介绍具体的搭建步骤之前，有一句话提醒自己，也提醒各位读者，最重要的事不是搭建网站，不是设计各种好看的主题，而是坚持写作，坚持记录和输出。

博客工具选择

博客工具多种多样，有想上古大神这样的手写 html 静态页面+网站服务器（eg. lamport），也有大量基于 WordPress + 网站服务器的精美博客，甚至还有大佬用自己手写的服务器框架（eg. A Personal Blog Odyssey），大佬们的技术力我是相当佩服的，但这样的建站流程也是相当麻烦的，费时费力还费钱。正如我在前言中说的，真正重要的不是博客网站，而是你写出的一篇篇内容。所以我选择了最简单方便的个人博客搭建方式：GitHub Pages。简言之，Github Pages 是基于 Github 仓库的静态网页托管服务，你只需要推动博客内容到 Github 仓库，就可以用自定义的域名访问网站，无需购买云服务器、搭建 Web 服务框架等操作，省心省事还省钱。

但 Github Pages 并不能完全解决你的问题，因为它只是简单地展示你推送到仓库的 html 页面，而不能帮助你生成 html 页面。也就是说，如果你想将本地写好的 Markdown 文件展示到博客页面，仅有 Github Pages 是做不到的，还需要一样工具，静态页面生成框架，目前常用的框架有 3 种：

  • Jekyll
  • Hexo
  • Hugo

网上比较 3 者优劣的文章已经有很多了，但我不想纠结这些细节，偶然看到一位大佬的博客 把博客从 Hexo 迁移到 Hugo，他用的主题深得我心，就决定基于 Github Pages + hugo + Even 构建我的博客。想用其余主题的读者可以参考 Hugo 官网 或在 Github 上搜索自己喜欢的主题。有能力的读者可以也可以设计自己的主题。

Hugo 安装与配置

安装 Hugo

Mac 上直接用 brew 安装，其他系统参考官方安装指南。

1

brew install hugo

验证是否安装成功：

1
2

hugo version
hugo v0.87.0+extended darwin/arm64 BuildDate=unknown

建立博客站点

安装 Hugo 之后，需要建立一个文件目录存放网站所有内容，Hugo 提供了简单的命令行工具。运行下面的命令：

1

hugo new site myblogsite

会看到以下提示内容：

1
2
3
4
5
6
7
8

Congratulations! Your new Hugo site is created in /Users/xxx/myblogsite.

Just a few more steps and you’re ready to go:

Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/, or create your own with the “hugo new theme ” command.
Perhaps you want to add some content. You can add single files with “hugo new /.”.
Start the built-in live server via “hugo server”.
Visit https://gohugo.io/ for quickstart guide and full documentation.

博客目录下会有以下内容：

1

archetypes/  config.toml content/   data/    layouts/     public/      resources/   static/      themes/

其中 archetypes/ 中有一个 default.md，保存了新建博文的默认配置；config.toml 是博客的配置文件；themes/保存了主题文件。

后续步骤中还会有 public/ 目录，构建生成的网页文件将全部保存在public/目录。

安装主题

在 myblogsite 目录下，运行：

1
2

git init -b main
git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even

用 themes/even/exampleSite/config.toml 替换默认配置文件，也可以根据需求将 themes/even/archetypes/default.md 替换到 archetypes/default.md，编辑 default.md，设置 draft: false，这样每篇新建的博文都默认可以直接发布。

新建博文

用以下命令新建博文：

1
2
3

hugo new post/test.md
或者
hugo new post/2021/test.md

就可以新建一篇博文，编辑 test.md 的内容，开始你的博客写作吧。

查看网站效果

写作完成后，如果想在部署到网站之前预览一下文章效果，可以执行：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

➜   hugo server
Start building sites … 
hugo v0.87.0+extended darwin/arm64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 30  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 39  
  Processed images |  0  
  Aliases          | 10  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 41 ms
Watching for changes in xxx
Watching for config changes in xxx
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

在浏览器中访问 http://localhost:1313/即可预览网站效果。

博客网站部署

确定博客内容后，就可以将网站部署到 Github Pages 了。

首先你需要新建一个名称为 xxx.github.io的 public 仓库，在仓库页面可以获取到 clone 链接：git@github.com:$USER_NAME/xxx.github.io.git ，并在根目录执行以下命令：

1
2
3
4
5
6
7
8

mkdir public && cd public
git init -b main
git remote add upstream git@github.com:$USER_NAME/xxx.github.io.git
cd ..
hugo -t even # 生成网页内容并保存到 public/ 目录
git add .
git commit -m "blog init"
git push -f upstream main

这样就部署成功了，等待几分钟后，访问网址：xxx.github.io即可看到自己的博客内容。

博客配置和优化

部署成功后，网站依然略显简陋，可以通过配置 config.toml 中的配置项增加你想要的功能。

增加 utterances 评论系统

Hugo 生成的只是静态页面，如果想为博客添加评论功能，就需要引入第三方服务。

utterances 是基于 Github issue 的评论系统，它会将所有评论记录到博客所在的 Github 仓库 issue 中，便于管理。只需登陆 Github 账户就可以评论，非常方便。基于 Hugo Even 主题的博客仅需 2 步即可配置。

  1. 首先安装 utterances 的 APP，点击 Install 后，选择托管此博客网站的 Github 仓库即可。

  2. 编辑 config.toml，输入自己的 Github 用户名和博客仓库名。

    1
2
3

      [params.utterances]       # https://utteranc.es/
    owner = "USER_NAME"              # Your GitHub ID
    repo = "xxx.github.io"               # The repo to store comment

  3. 重新部署博客，页面下方即可显示评论框。

增加 About 页面

博客默认菜单只有 4 个页面选项：Home, Archives, Tags, Categories，如果想新增 About 页面，仅需以下 2 步：

  1. 新建 about 文件

    1

    hugo new about.md

    以上命令将会创建 contents/about.md 文件

  2. 在 about.md 文件的 Front Matter 中输入以下配置：

    1
2
3
4
5
6
7

    ---
title: "About"
date: 2021-12-19T13:51:21+08:00
draft: false
menu: "main"     # 在 main 新增选项 
weight: 50       # About 选项的位置
---

重新部署博客，可以看到新增了 About 选项。

SEO 优化

写博客不只是为了记录，也是为了更好地去(man)帮(zu)助(xu)别(rong)人(xin)，为了让搜索引擎更好地收录你的博客文章，还需要做一些搜索引擎优化(SEO)，Even 主题已经提供了丰富的 SEO 优化手段，我们只需设置一些配置项。

  • 最好在 archtypes/default.md 中增加 keywords 和 description配置，便于搜索引擎索引。
1
2

keywords: []
description: ""

  • 网站目录 增加 robots 文件，便于爬虫爬取网页内容。不过 Even 已经提供了 robots 和相关的网页地图设置，因此这里无需操作。

  • 提交博客地址到搜索引擎 Google

  • 配置 Google Analytics，将获取到的 Tracking ID 配置到 config.toml 中

    1

    googleAnalytics = ""      # UA-XXXXXXXX-X

  • 坚持写作，持续更新网站内容

当然，SEO 技术博大精深，以上内容只是其中简单的一小块，更多优化手段可以参考博客 Hexo 个人博客 SEO 优化（3）：改造你的博客，提升搜索引擎排名 及其他资料。