GitHubPages + Hugo博客搭建记录
上一个博客的搭建记录
今日打开尘封多年的github pages，搭建自己的博客，为了防止重构时忘了怎么搞，故做个笔记。
〇、远程连接仓库
首先创建一个username.github.io的仓库，作为github pages的目录
一、安装Hugo
进入hugo官方仓库，下载最新release：Releases · gohugoio/hugo
我用的windows11，所以下载amd64版本。如果在虚拟机上运行，应当下载linux-amd64版本。
hugo的配置很简单，下载下来的压缩包里只有hugo.exe，只需要将其放到任意安装目录即可。
我将hugo安装到E:\ProgramFile\hugo中，并将此目录配置到环境变量path中，当启动powershell，输入hugo有反应时，表明hugo配置成功。
二、初始化网页
切换到工作目录，创建自己的网站：
cd D:\Workspace
hugo new site MyGitHubPages
接着，进入工作目录：
hugo -D
这样便会生成一个发布版的网页，目录为.\MyGitHubPages\public，为了方便使用，我们把这里设为git仓库。
在这之前，清空public中的所有文件，然后
git pull remote http://github.com/<MY sites>
git add .
git commit -m "first commit"
git push origin main
三、配置主题
我选择了hyde主题，导入主题需要如此操作：
cd D:\Workspace\MyGitHubPages\themes
git clone https://github.com/spf13/hyde.git
然后配置hugo.toml
code .
修改文件内容为：
1
2
3
4
5
6
7
8
9
10
11
12
13
baseURL = 'https://lamaper.github.io/'
languageCode = 'zh-CN'
title = 'lamaper'
theme = 'hyde'
[Menus]
main = [
{Name = "Github", URL = "https://github.com/lamaper/"},
{Name = "博客园", URL = "https://lamaper.cnblogs.com/"}
]
[params]
description = "你好，我是lamaper，BIT信科大一学生，喜欢与计算机相关的所有东西！"
date = ‘2024-10-29T19:25:03+08:00’ draft = false title = ‘GitHubPages + Hugo博客搭建记录（2）’ tags = [‘blogs’, ‘hugo’] categories = [‘blogs’]
四、杂项
hugo.toml与config.toml
在查找资料的过程中，我发现绝大多数博客和文章中，都会提到config.toml，但是在我的实际操作中，并没有遇到这个文件，整个项目目录中，只有hugo.toml。实际上，经过个人观察，这两个文件的功能应该是一样的。
更换主题报错
之后在更换主题的过程中，我遇到了一个报错：
1
Error: Error building site: TOCSS: failed to transform "scss/style.scss" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS. 6:06:59 PM: Total in 5416 ms 6:06:59 PM:
导致这个问题的原因是，该主题用到scss，即安装的hugo版本有误，应当下载的是extended版本.所以正确的下载地址应该是hugo_extended_0.136.5_windows-amd64.zip，在下载完毕之后，替换原来的hugo.exe，这样问题就得到了解决。
这个问题的参考文献：Hugo构建错误
添加分类归档
本来是要添加【分类归档】和【标签】两个功能，但是今天想了半天只实现了一个。
首先是在\content目录下新建目录categories，并且创建_index.md文件，在里面书写：
1
2
3
4
5
+++
title = "分类归档"
type = "taxonomy"
layout = "categories"
+++
然后回到根目录修改hugo.toml，添加以下内容：
1
2
3
4
5
6
7
8
[taxonomies]
tag = "tags"
category = "categories"
[markup]
[markup.tableOfContents]
startLevel = 1
endLevel = 3
最后需要修改前端显示，由于我对css等前端知识并不熟悉，这段内容交给了AI来实现。
首先切换到当前使用的主题的目录下，找到layouts/_default/list.html，修改为以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<article>
<aside>
<h2>分类归档</h2>
<ul class="taxonomy-list">
<li>
<a href=""></a>
<ul>
<li><a href=""></a></li>
</ul>
</li>
</ul>
</aside>
<h1>文章列表</h1>
<div class="post-content"></div>
<ul class="posts-list">
<li class="posts-list-item">
<a class="posts-list-item-title" href=""></a>
<span class="posts-list-item-description">
<span class="posts-list-item-separator">-</span>
min read
</span>
</li>
</ul>
</article>
最后添加一些CSS样式，虽然我没看出来这些东西有啥用，但是以防万一，先加上吧。这个文件位置是static/css/styles.css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.taxonomy-list {
list-style-type: none;
padding: 0;
}
.taxonomy-list li {
margin: 5px 0;
}
.taxonomy-list li a {
text-decoration: none;
color: #333;
}
.taxonomy-list li a:hover {
text-decoration: underline;
}
参考文献:hugo官方文档
date = ‘2024-10-30T12:04:12+08:00’ draft = false title = ‘GitHubPages + Hugo博客搭建记录（3）’ tags = [‘blogs’, ‘hugo’] categories = [‘blogs’]
今天魔改了一下主题，主要是添加了归档卡片等东西，学习了一些CSS和前端模版渲染。
list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<article>
<aside>
<h2>分类归档</h2>
<div class="categories-archive">
<div class="category-card">
<a class="category-title" href=""></a>
<ul class="category-posts">
<li><a href=""></a></li>
</ul>
</div>
</div>
</aside>
<h1>文章列表 ：</h1>
<div class="post-content"></div>
<ul class="posts-list">
<li class="posts-list-item">
<a class="posts-list-item-title" href=""></a>
<span class="posts-list-item-description">
<span class="posts-list-item-separator">-</span>
需要 分钟阅读
</span>
<div class="post-preview">
</div>
</li>
</ul>
</article>
single.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<article class="post">
<header class="post-header">
<h1 class="post-title"></h1>
<div class="post-meta">
<div>
</div>
<div>
需要 分钟阅读
</div>
<div>
<a class="tag" href=""></a>
</div>
</div>
</header>
<div class="post-content">
</div>
<div class="post-footer">
</div>
</article>
baseof.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html lang="">
<head>
<title> // </title>
<link rel="shortcut icon" href="" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="" />
</head>
<body>
<header class="app-header">
<a href=""><img class="app-header-avatar" src="" alt="" /></a>
<span class="app-header-title"></span>
<nav class="app-header-menu">
<a class="app-header-menu-item" href=""></a>
</nav>
<p></p>
<!-- 新增栏目开始
<div class="categories-section">
<h3>Categories</h3>
<ul class="categories-list">
<li><a href=""></a></li>
</ul>
</div>
-->
<div class="custom-divider">
contact me ↓
<div class="app-header-social">
<a href="" target="_blank" rel="noreferrer noopener me">
</a>
</div>
</header>
<main class="app-container">
<p style="text-align: center;">Copyright 2014 - 2024 lamaper. All Rights Reserved</p>
</main>
</body>
</html>
assets\css\main.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$darkest-color: ;
$dark-color: ;
$light-color: ;
$lightest-color: ;
$primary-color: ;
@import 'base';
@import 'components/app';
@import 'components/error_404';
@import 'components/icon';
@import 'components/pagination';
@import 'components/post';
@import 'components/posts_list';
@import 'components/tag';
@import 'components/tags_list';
// The last 'extra' import can optionally be overridden on a per project
// basis by creating a <HUGO_PROJECT>/assets/css/_extra.scss file.
@import 'extra';
$primary-color: #333;
body {
font-family: Arial, sans-serif;
// color: $primary-color;
}
.custom-divider {
width: 100%;
height: 2px;
background: linear-gradient(to right, #666, #333);
margin: 20px 0;
}
.categories-archive {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.category-card {
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 250px;
}
.category-title {
font-size: 18px;
font-weight: bold;
text-decoration: none;
color: #333;
display: block;
margin-bottom: 10px;
}
.category-title:hover {
color: #666; /* 修改为灰色 */
}
.category-posts {
list-style-type: none;
padding: 0;
}
.category-posts li {
margin: 5px 0;
}
.category-posts li a {
text-decoration: none;
color: #666;
}
.category-posts li a:hover {
text-decoration: underline;
}
.post-preview {
margin-top: 10px;
color: #fff;
font-size: 14px;
line-height: 1.5;
}
本地server显示不了文章的问题
导致这个问题主要是因为我对hugo的认识不够清楚，在写博客的时候不知道从哪抄了一个头标记就用上了，实际上是因为在本地使用hugo -D会生成带有draft（草稿）的博客，而hugo server不会包含带有draft标记的博客。
恰好，我抄的那个头标记中写了draft = true，如此就产生了我的困惑。
感谢littflower提供了解决思路。