目前搭建个人博客网站分为动态网站和静态网站两种。其中动态网站需要购买服务器,并且需要维护网站安全,虽然功能比静态网站更多更丰富,也有后台管理系统,可以在线写博客,但成本还是太高。这类网站框架有: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系统下操作。
首先需要安装一些依赖软件:go
hugo
dart-sass
参考链接:manjaro go环境搭建、PaperMod Installation
1sudo pacman -S go2sudo pacman -S hugo3sudo 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
。
这里注意,用这个模板创建的不是<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的action3 with:4 repository-name: codetang-2417/codetang-2417.github.io5 token: ${{ secrets.HUGO_BUILD }}6 branch: main7 folder: public8 clean: true9 single-commit: true
-
生成Personal access tokens
点击个人头像,选择
Setting
,拉到最低下,选择Developer Settings
->Personal Access Tokens
->Tokens
。
选择
Generate new token
创建后需要马上复制生成的
Personal Access Tokens
,因为后续将看不到该Personal Access Tokens
。 -
生成Actions secrets
接下来在源码repo中添加上面的personal access token,进入repo的
Settings
->Secrets and variable
->Actions secrets
一栏,选择New repository secret
并添加。
配置
在hugo的配置文件 config/_default/config.toml 更改 base url:
1# Change baseurl before deploy2baseurl = "https://codetang-2417.github.io/"
然后 git push 到 github,等待 deploy 任务完成,就可以正常通过网址 https://codetang-2417.github.io
访问了。如果直接使用源码仓库作为 git page的域名仓库,则需要在网址最后加上仓库名,否则会导致访问网站时 css 加载不出来等问题(且涉及到绝对域名地址引用位置的也需要修改)。
下面的部分就是修改模板中的git action
文件,使之部署到其他仓库
1name: Deploy to Github Pages2
3on:4 push:5 branches: [master] # 这里的意思是当 master 分支发生push的时候,运行下面的jobs6 pull_request:7 branches: [master]8
9jobs:10 build:11 runs-on: ubuntu-latest12
13 permissions:14 # Give the default GITHUB_TOKEN write permission to commit and push the15 # added or changed files to the repository.39 collapsed lines
16 contents: write17
18 steps:19 - uses: actions/checkout@v420 with:21 submodules: recursive22 fetch-depth: 023
24 - name: Cache Hugo resources25 uses: actions/cache@v426 env:27 cache-name: cache-hugo-resources28 with:29 path: resources30 key: ${{ env.cache-name }}31
32 - uses: actions/setup-go@v533 with:34 go-version: "^1.17.0"35 - run: go version36
37 - name: Setup Hugo38 uses: peaceiris/actions-hugo@v239 with:40 hugo-version: "latest"41 extended: true42
43 - name: Build44 run: hugo --minify --gc --cleanDestinationDir45
46 - name: Deploy 🚀47 uses: JamesIves/github-pages-deploy-action@v4 # 一个自动发布github pages的action48 with:49 repository-name: codetang-2417/codetang-2417.github.io50 token: ${{ secrets.HUGO_BUILD }}51 branch: main52 folder: public53 clean: true54 single-commit: true
手动安装
创建一个新站点,这里可以参考 hugo 官网的指导。
以及这篇文章,介绍的很详细:krislinzhao.github.io/docs/create-a-wesite-using-github-pages-an…
有一些主题默认的配置文件格式是yaml,需要使用 —format 指定为yaml。
1hugo new site <name of site> --format yaml
然后进入站点文件夹,配置git
1cd LingLong2git init3git add .4git branch -m main5git commit -m "Framwork: Init Hugo new site."
导入子模块
1git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
同样需要注意,在hugo的配置文件中,将仓库名加在 base url后。
1# Change baseurl before deploy2baseurl = "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 -d2.3├── assets4│ ├── img5│ └── scss6├── config7│ └── _default8├── content9│ ├── categories10│ │ └── example-category11│ ├── page12│ │ ├── archives13│ │ ├── links14│ │ └── search15│ └── post5 collapsed lines
16│ ├── hello-world17│ ├── image-gallery18│ ├── markdown-syntax19│ ├── math-typesetting20│ └── shortcodes
assets:存放图片,scss样式
config:存放hugo和主题配置,toml 格式,分文件配置各个参数,比较清晰明了。
content:博文内容存放位置。
其中 page 存放是导航栏的内容,post 存放文章的内容,categories 为分类。page和post的文件结构一样,每一篇文章单独一个文件夹,里面的 index.md为正文内容,还可以存放一些图片,可以直接在文章中引用。区别在与page和post的 frontmatter 中的layout字段不同,也就是布局。
pages的 frontmatter如下(即在正文之前的最开头的文字)
1---2title: "Archives"3date: 2022-03-064layout: "archives"5slug: "archives"6menu:7 main:8 weight: 29 params:10 icon: archives11---
menu后续的内容是菜单层级。
post frontmatter如下:
1---2title: Hello World3description: Welcome to Hugo Theme Stack4slug: hello-world5date: 2022-03-06 00:00:00+00006image: cover.jpg7categories: # 分类,可以在归档界面看到8 - Example Category9tags:10 - Example Tag11weight: 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---2title: Example Category3description: A description of this category4image:5
6# Badge style7style:8 background: "#2a9d8f"9 color: "#fff"10---
一些基本信息的配置
修改文件:config/_default/config.toml
1# Change baseurl before deploy2baseurl = "https://codetang-2417.github.io/"3copyright = "LingLong's Blog" # 网站的版权声明,通常显示在页脚4languageCode = "zh-cn"5title = "LingLong" # 站点标题6
7# Theme i18n support8# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar9defaultContentLanguage = "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.13hasCJKLanguage = true14
15# Change it to your Disqus shortname before using11 collapsed lines
16disqusShortname = "Ling" # 标签页简称17
18enableRobotsTXT = true # 允许生成 robots.txt19buildDrafts = false # 构建时是否包括草稿20buildFuture = false # 构建未来发布的内容21buildExpired = false # 构建过期的内容22
23enableEmoji = true24
25[pagination]26pagerSize = 8 # 首页最多容纳的文章数量
配置导航栏
修改文件:config/_default/menu.toml,这里的导航栏只能新增,不能修改已有的。
推荐直接在 page文件夹中添加page时,在 frontmatter 里添加。
详见:stack.jimmycai.com/config/menu
配置评论
这里的评论使用了 giscus 插件。
根据 giscus 官网的 指导,最后生成一份代码,主要是安装 github app和开启discussion
然后点击 app 旁边的链接进入app页面。
然后可以先去站点仓库,Setting -> General -> Features,打开disscusion
。
打开后,回到giscus
,填一些配置,主要是仓库名称,mapping方式。
然后在该网页中的找到这段配置代码:
将其填入到配置文件 config/_default/params.toml 中,主要是 repoId,categoryId
1[comments.giscus]2repo = "codetang-2417/codetang-2417.github.io"3repoID = "xxxxxxxxx"4category = "Announcements"5categoryID = "xxxxxxxxx"6mapping = "pathname"7lightTheme = "light"8darkTheme = "dark"9reactionsEnabled = 110emitMetadata = 0
下面给出常见的几种 frontmatter
page
1---2title: "Archives"3date: 2022-03-064layout: "archives"5slug: "archives"6menu:7 main: # 菜单层级8 weight: 2 # 用于排序9 params:10 icon: archives # 图标11---
其中 icon存放于 themes/xxx/assets/icons 或者 根目录assets/icons。
主题自带的icon有:
1archives.svg back.svg brand-twitter.svg clock.svg date.svg home.svg language.svg messages.svg search.svg toggle-left.svg user.svg2arrow-back.svg brand-github.svg categories.svg copyright.svg hash.svg infinity.svg link.svg rss.svg tag.svg toggle-right.svg
post
1---2title: Markdown Syntax Guide3date: 2023-09-074description: Sample article showcasing basic Markdown syntax and formatting for HTML elements.5tags: # 自定义tag6 - markdown7 - css8 - html9 - themes10categories: # 自定义分类,可以在 content/categories/ 创建更详细描述11 - themes12 - syntax13---
例如,分类 example-category,其文件夹下存放文件 _index.md
1$ ls content/categories/example-category ✔2_index.md
_index.md内容为
1---2title: Example Category3description: A description of this category4image:5
6# Badge style7style:8 background: "#2a9d8f"9 color: "#fff"10---
编写和发布
在博客搭建起来以后,我尝试过 siyuan 的一键发布工具,但是效果不好,不能处理本地图片,需要图床,但 hugo 本身是静态网页,图片也是存在 git 仓库中,是可以直接访问的。因此,还是选择在 siyuan 中编写完导出 md 文件夹,手动复制到本地仓库并上传。
参考来源
思源笔记一键发布至Hexo、Hugo、Jekyll、Vitepress、Vuepress博客(github)并通过github action构建page并同步gitee page、GitHub Pages