Lyndra's Blog

基于 Hugo 和 github pages搭建bolg

2024-09-15
工具教程 BlogHugoGithub pages
18分钟
3488字
温馨提示:本文最后更新于 2025-03-11 ,部分信息可能因时间推移而不再适用,欢迎反馈。

目前搭建个人博客网站分为动态网站和静态网站两种。其中动态网站需要购买服务器,并且需要维护网站安全,虽然功能比静态网站更多更丰富,也有后台管理系统,可以在线写博客,但成本还是太高。这类网站框架有:wordpress(主流,功能丰富但需要时间和优化知识),typecho(轻量级,最近团队开始重新维护),Halo等。

  静态网站则功能有限,只能显示静态编译好的html,不能在线写博客,没有管理系统。但好在可以0成本搭建,结合github page功能,无需服务器就可以搭建。这类网站框架有Hugo(go语言编写,大量博客加载速度快,新框架,但目前已经发展的挺不错的了),Hexo(老牌,网络资源丰富,但大量博文加载很慢)等。

  结合我自己的需求,静态网站就足够我的使用场景了。并考虑到日后的博客数量会很多,选择Hugo。

  且之前也用hugo搭过一个博客网站,但是由于发布太过于繁琐(即使使用了github action),后面没有怎么更新了。但现在思源的发布插件已经支持了一键自动发布,和思源配合,能够解放双手,为这个博客发布的工作流补上最后一块拼图。由于其效果不好,最终还是不能使用这个一键发布工具,不过考虑参考采用这个发布工具,开发一个针对我的应用场景的发布工具。Todo++

  补充:如果想建立类似于书籍或者使用说明的这种形式的博客网站,可以选择 mkdocs,mdbook可能存在一些小问题。

github page类型选择

  我们使用github pages作为静态网站的部署方式,个人用户只有两种 GitHub Pages 网站的类型:一种是 user​(用户),一种是project​(项目)。

  ​user​类型的网址只能对应唯一的用户,而且仓库的名字必须为 <username>.github.io​,对应的网址为 http(s)://<username>.github.io​。

  ​project​类型的仓库则可以新建很多,只要仓库的名字不为 <username>.github.io​ 即可,对应的网址为 http(s)://<username>.github.io/<repository>​。

  本文采用多种仓库的形式进行管理,因为为了可能会引入不同的网站框架。

  需要注意,我们可以同时拥有user​和project​ pages。因此,我们可以将个人博客放到user​上,而其他的网页,例如专为某一个项目写的说明文档,放在单独的仓库中。这样访问博客站点只需要访问https://<username>.github.io​即可,而访问其他项目就加上后缀,例如:https://<username>.github.io/HugoStack​。

  并且按照这篇博客中的方式,只公开编译好的站点,隐藏源码仓库。

Hugo搭建

  最开始按照 【Hugo+PaperMod搭建博客】 中的教程进行搭建。但后续发现这个主题文档不完善,使用过程中的小问题很多,因此不建议使用。转而使用 stack 主题。

  涉及到的工具:

  • hugo
  • stack 主题
  • github
  • giscus 是评论接口,也很快。使用的也是 github 的服务,利用的是 github discussion,所以,比 discus 之类的小厂要快。稳定性倒是差不多。以及,github 的用户是比较多的,所以会更方便大家评论交流,这一点很重要。
  • neovim/vscode
  • git
  • flaticon 用来挑选网站的 favicon 的。

安装

  本文在Manjaro系统下操作。

  首先需要安装一些依赖软件:gohugodart-sass

  参考链接:manjaro go环境搭建PaperMod Installation

Terminal window
1
sudo pacman -S go
2
sudo pacman -S hugo
3
sudo pacman -S dart-sass

安装主题

  两种方式:使用主题给出的模板仓库直接创建仓库;本地建立仓库,通过 git submoudle 安装。

  第一种直接使用模板的方式不会下载主题仓库,修改起来较为麻烦。且使用的配置文件格式是 toml,写起来也繁琐。但好处是不需要自己对网页做各种修改,可以直接使用。

  第二种方式可以修改主题,但是连同一些网页基础的设置也需要自己手动配,可以参考主题仓库中的示例。

  值得注意的是,第二种方式下载的主题其各种配置和hugo所创建的新的站点文件夹结构很类似,我们优先在hugo的根目录下进行修改,hogu会优先使用根目录下的文件,这样就可以覆盖主题中的一些配置。例如

  存在文件 themes/Stack/assets/icons/user.svg,我们可以直接在根目录下创建同名文件,hugo就会优先使用根目录下的 user.svg,而不是themes下的。

使用 git 模板

  参考 github.com/CaiJimmy/hugo-theme-stack-starter

  采用 github template 的形式直接使用主题提供的模板创建仓库,并将仓库设置为github page。且该模板已经配置了github action。

  先按照 readme 中的指示,使用 stack starter 作为模板创建仓库。点击Use this template​。

default

  这里注意,用这个模板创建的不是<username>.github.io​为名称的仓库,而是创建一个其他命名的私有仓库,因为这里存放的是源码,我们期望源码为私有仓库,在部署的时候再将其部署到<username>.github.io​为名称的仓库。

  然后将源码下载到本地,我们对其部署的方式进行修改。

  要从源码仓库部署到站点仓库,则需要我们使用 PAT(Personal access tokens)访问权限。

生成PAT

  只有从源码仓库部署到其他仓库需要生成PAT,并在源码仓库中将PAT保存为Actions secrets​变量。

  使用时,在action​文件中引用secrets​设置的变量即可。

  例如,在源码仓库设置的 PAT 名称为HUGO_BUILD,就可以按照下列方式使用。具体语法要查看使用的action​方法的说明文档。例如JamesIves/github-pages-deploy-action@v4​。

1
name: Deploy 🚀
2
uses: JamesIves/github-pages-deploy-action@v4 # 一个自动发布github pages的action
3
with:
4
repository-name: codetang-2417/codetang-2417.github.io
5
token: ${{ secrets.HUGO_BUILD }}
6
branch: main
7
folder: public
8
clean: true
9
single-commit: true
  1. 生成Personal access tokens

    点击个人头像,选择 Setting​,拉到最低下,选择Developer Settings​->Personal Access Tokens​->Tokens​。

    default

    选择Generate new token

    default

    创建后需要马上复制生成的Personal Access Tokens​,因为后续将看不到该Personal Access Tokens​。

  2. 生成Actions secrets

    接下来在源码repo中添加上面的personal access token,进入repo的 Settings​->Secrets and variable​->Actions secrets​一栏,选择New repository secret​并添加。

    default

配置

  在hugo的配置文件 config/_default/config.toml 更改 base url:

1
# Change baseurl before deploy
2
baseurl = "https://codetang-2417.github.io/"

  然后 git push 到 github,等待 deploy 任务完成,就可以正常通过网址 https://codetang-2417.github.io​ 访问了。如果直接使用源码仓库作为 git page的域名仓库,则需要在网址最后加上仓库名,否则会导致访问网站时 css 加载不出来等问题(且涉及到绝对域名地址引用位置的也需要修改)。

  下面的部分就是修改模板中的git action​文件,使之部署到其他仓库

1
name: Deploy to Github Pages
2
3
on:
4
push:
5
branches: [master] # 这里的意思是当 master 分支发生push的时候,运行下面的jobs
6
pull_request:
7
branches: [master]
8
9
jobs:
10
build:
11
runs-on: ubuntu-latest
12
13
permissions:
14
# Give the default GITHUB_TOKEN write permission to commit and push the
15
# added or changed files to the repository.
39 collapsed lines
16
contents: write
17
18
steps:
19
- uses: actions/checkout@v4
20
with:
21
submodules: recursive
22
fetch-depth: 0
23
24
- name: Cache Hugo resources
25
uses: actions/cache@v4
26
env:
27
cache-name: cache-hugo-resources
28
with:
29
path: resources
30
key: ${{ env.cache-name }}
31
32
- uses: actions/setup-go@v5
33
with:
34
go-version: "^1.17.0"
35
- run: go version
36
37
- name: Setup Hugo
38
uses: peaceiris/actions-hugo@v2
39
with:
40
hugo-version: "latest"
41
extended: true
42
43
- name: Build
44
run: hugo --minify --gc --cleanDestinationDir
45
46
- name: Deploy 🚀
47
uses: JamesIves/github-pages-deploy-action@v4 # 一个自动发布github pages的action
48
with:
49
repository-name: codetang-2417/codetang-2417.github.io
50
token: ${{ secrets.HUGO_BUILD }}
51
branch: main
52
folder: public
53
clean: true
54
single-commit: true

手动安装

  创建一个新站点,这里可以参考 hugo 官网的指导

  以及这篇文章,介绍的很详细:krislinzhao.github.io/docs/create-a-wesite-using-github-pages-an…

  有一些主题默认的配置文件格式是yaml,需要使用 —format 指定为yaml。

Terminal window
1
hugo new site <name of site> --format yaml

default

  然后进入站点文件夹,配置git

Terminal window
1
cd LingLong
2
git init
3
git add .
4
git branch -m main
5
git commit -m "Framwork: Init Hugo new site."

  导入子模块

1
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

  同样需要注意,在hugo的配置文件中,将仓库名加在 base url后。

1
# Change baseurl before deploy
2
baseurl = "https://codetang-2417.github.io/HugoStack/"

  这种方式由于hugo根目录中没有任何配置,因此需要自己手动配置。参考主题目录中的 exampleSite文件夹。

  简单介绍hugo的目录中各个文件夹的含义。

  • archetypes:存放用 hugo 命令新建的 Markdown 文件应用的 front matter 模版
  • content:存放内容页面,比如「博客」、「读书笔记」等
  • layouts:存放定义网站的样式,写在layouts​文件下的样式会覆盖安装的主题中的 layouts​文件同名的样式
  • static:存放所有静态文件,如图片
  • data:存放创建站点时 Hugo 使用的其他数据
  • public:存放 Hugo 生成的静态网页
  • themes:存放主题文件
  • config.toml:网站配置文件

  本文不采用这种方式,节省时间。

配置 stack 主题

  这里不选用 PaperMod,因为这个主题总有一些小问题,还需要自行修改大量的代码。

  以下基于 git 模板的仓库。

  参考:stack.jimmycai.com/config/,说明中写的很详细,每一个字段的作用。

  简单说明一下该主题中的各个文件夹的作用

1
$ tree -d
2
.
3
├── assets
4
│ ├── img
5
│ └── scss
6
├── config
7
│ └── _default
8
├── content
9
│ ├── categories
10
│ │ └── example-category
11
│ ├── page
12
│ │ ├── archives
13
│ │ ├── links
14
│ │ └── search
15
│ └── post
5 collapsed lines
16
│ ├── hello-world
17
│ ├── image-gallery
18
│ ├── markdown-syntax
19
│ ├── math-typesetting
20
│ └── shortcodes

  assets:存放图片,scss样式

  config:存放hugo和主题配置,toml 格式,分文件配置各个参数,比较清晰明了。

  content:博文内容存放位置。

   其中 page 存放是导航栏的内容,post 存放文章的内容,categories 为分类。page和post的文件结构一样,每一篇文章单独一个文件夹,里面的 index.md为正文内容,还可以存放一些图片,可以直接在文章中引用。区别在与page和post的 frontmatter 中的layout字段不同,也就是布局。

  pages的 frontmatter如下(即在正文之前的最开头的文字)

1
---
2
title: "Archives"
3
date: 2022-03-06
4
layout: "archives"
5
slug: "archives"
6
menu:
7
main:
8
weight: 2
9
params:
10
icon: archives
11
---

  menu后续的内容是菜单层级。

  post frontmatter如下:

1
---
2
title: Hello World
3
description: Welcome to Hugo Theme Stack
4
slug: hello-world
5
date: 2022-03-06 00:00:00+0000
6
image: cover.jpg
7
categories: # 分类,可以在归档界面看到
8
- Example Category
9
tags:
10
- Example Tag
11
weight: 1 # You can add weight to some posts to override the default sorting (date descending)
12
---

  以上是我们在平时写文章时最主要用到的部分。

  categories 为分类,在这下面创建的文件和显示在分类栏,即便没有文件被分在这个类别也会显示。如果categories中没有,但是文章中的 frontmatter引用了,则会自动显示,而不需要在这个目录下创建。

  其格式如下:content/categories/example-category/_index.md

1
---
2
title: Example Category
3
description: A description of this category
4
image:
5
6
# Badge style
7
style:
8
background: "#2a9d8f"
9
color: "#fff"
10
---

一些基本信息的配置

  修改文件:config/_default/config.toml

1
# Change baseurl before deploy
2
baseurl = "https://codetang-2417.github.io/"
3
copyright = "LingLong's Blog" # 网站的版权声明,通常显示在页脚
4
languageCode = "zh-cn"
5
title = "LingLong" # 站点标题
6
7
# Theme i18n support
8
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar
9
defaultContentLanguage = "zh-cn"
10
11
# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
12
# This will make .Summary and .WordCount behave correctly for CJK languages.
13
hasCJKLanguage = true
14
15
# Change it to your Disqus shortname before using
11 collapsed lines
16
disqusShortname = "Ling" # 标签页简称
17
18
enableRobotsTXT = true # 允许生成 robots.txt
19
buildDrafts = false # 构建时是否包括草稿
20
buildFuture = false # 构建未来发布的内容
21
buildExpired = false # 构建过期的内容
22
23
enableEmoji = true
24
25
[pagination]
26
pagerSize = 8 # 首页最多容纳的文章数量

配置导航栏

  修改文件:config/_default/menu.toml,这里的导航栏只能新增,不能修改已有的。

  推荐直接在 page文件夹中添加page时,在 frontmatter 里添加。

  详见:stack.jimmycai.com/config/menu

配置评论

  这里的评论使用了 giscus 插件。

  根据 giscus 官网的 指导,最后生成一份代码,主要是安装 github app和开启discussion

  giscus app安装

default

  然后点击 app 旁边的链接进入app页面。

default

  然后可以先去站点仓库,Setting -> General -> Features,打开disscusion​。

  打开后,回到giscus​,填一些配置,主要是仓库名称,mapping方式。

default

  然后在该网页中的找到这段配置代码:
default

  将其填入到配置文件 config/_default/params.toml 中,主要是 repoId,categoryId

1
[comments.giscus]
2
repo = "codetang-2417/codetang-2417.github.io"
3
repoID = "xxxxxxxxx"
4
category = "Announcements"
5
categoryID = "xxxxxxxxx"
6
mapping = "pathname"
7
lightTheme = "light"
8
darkTheme = "dark"
9
reactionsEnabled = 1
10
emitMetadata = 0

下面给出常见的几种 frontmatter

page

1
---
2
title: "Archives"
3
date: 2022-03-06
4
layout: "archives"
5
slug: "archives"
6
menu:
7
main: # 菜单层级
8
weight: 2 # 用于排序
9
params:
10
icon: archives # 图标
11
---

  其中 icon存放于 themes/xxx/assets/icons 或者 根目录assets/icons。

  主题自带的icon有:

1
archives.svg back.svg brand-twitter.svg clock.svg date.svg home.svg language.svg messages.svg search.svg toggle-left.svg user.svg
2
arrow-back.svg brand-github.svg categories.svg copyright.svg hash.svg infinity.svg link.svg rss.svg tag.svg toggle-right.svg

post

1
---
2
title: Markdown Syntax Guide
3
date: 2023-09-07
4
description: Sample article showcasing basic Markdown syntax and formatting for HTML elements.
5
tags: # 自定义tag
6
- markdown
7
- css
8
- html
9
- themes
10
categories: # 自定义分类,可以在 content/categories/ 创建更详细描述
11
- themes
12
- syntax
13
---

  例如,分类 example-category,其文件夹下存放文件 _index.md

1
$ ls content/categories/example-category  ✔
2
_index.md

  _index.md内容为

1
---
2
title: Example Category
3
description: A description of this category
4
image:
5
6
# Badge style
7
style:
8
background: "#2a9d8f"
9
color: "#fff"
10
---

编写和发布

  在博客搭建起来以后,我尝试过 siyuan 的一键发布工具,但是效果不好,不能处理本地图片,需要图床,但 hugo 本身是静态网页,图片也是存在 git 仓库中,是可以直接访问的。因此,还是选择在 siyuan 中编写完导出 md 文件夹,手动复制到本地仓库并上传。

参考来源

  使用 Github 记录笔记和搭建 blog

  思源笔记一键发布至Hexo、Hugo、Jekyll、Vitepress、Vuepress博客(github)并通过github action构建page并同步gitee pageGitHub Pages

  Hugo + Github免费搭建博客,并实现自动化部署

  ‍

本文标题:基于 Hugo 和 github pages搭建bolg
文章作者:Lyndra
发布时间:2024-09-15
总访问量
总访客数人次
Copyright 2025
站点地图