hugo

很多热爱写作的小伙伴或许都曾想过，要是能拥有一个自己专属的博客就好了。这里呢，就跟大家详细地分享一种自己动手搭建博客的简单方案：GitHub Pages + Hugo。

如果你感觉有点儿陌生，没关系。虽说是自己动手搭建，但并不要求你有多少技术基础，熟悉一下就好了。我在之前的分享中，曾跟大家提到过 GitHub，老读者肯定不陌生了。例如这两篇，不了解的小伙伴可以先戳链接去看下：

技术写作工具 | GitHub + Markdown 的新轻型技术写作模式速览
技术文档方案 | GitHub + Markdown 的深度实践解析
那 GitHub Pages 和 Hugo 又是什么呢？

GitHub Pages 是一个静态站点托管服务，直接将个人、组织或项目的页面托管于 GitHub 库或仓库 (repository) 中。
Hugo 是一个用 Go 语言编写的静态站点生成器，它针对速度、易用性和可配置性进行了优化，快速灵活。
接下来，看看如何一步一步地为自己搭建一个博客吧！

下面的步骤或许乍一看有点儿多，那是为了让操作更具体更明确特意划分的，实际操作起来并不会很复杂。

注：以下步骤以在 macOS 上的操作为例，其它操作系统类似，只是一些工具和命令有区别。

第 1 步：新建一个 GitHub 库。
1. 注册一个 GitHub 账号。如果你已有账号，直接登录。如果你没有账号，注册并登录。

2. 打开 GitHub Pages 官网，浏览并了解 User or organization site 部分对应的操作步骤。
GitHub Pages: https://pages.github.com

3. 新建一个 GitHub repository，库名为 username.http://github.io，username 即你的 GitHub 账号 username。新建 repository：https://github.com/new

第 2 步：安装 Hugo。
1. 浏览 Hugo 官方的安装指南。

进行初步了解，安装与你的操作系统对应的必要工具。例如，我的 macOS 上已经安装了 Homebrew，这里就不需要再安装了。

如果你感到有点儿困惑，该指南页面的后半部分有对 macOS 和 Windows 上如何安装 Hugo 的详细说明。

Hugo 安装指南：https://gohugo.io/getting-started/installing/

2 .打开一个终端 Terminal，输入与操作系统对应的 Hugo 安装命令。

brew install hugo
3 .安装完成后，输入以下命令来确认。

hugo version
第 3 步：新建一个 Hugo 网站。
1. 进入你想存放 Hugo 网站文件夹的目录。

我直接将其放在了 macOS 的家目录下。你也可以通过 cd 命令切换到其它目录。例如，如果你想放在 Documents 目录下，在终端里执行 cd ~/Documents 即可。

2 .执行以下命令新建一个 Hugo 网站。

hugo new site lilian-blog # "lilian-blog" 是我的网站文件夹名。
第 4 步：选择 Hugo 主题并克隆至本地目录。
1. 打开 Hugo Themes 页面，选择一个你喜欢的主题。

Hugo Themes: https://themes.gohugo.io 下文以选择 Tranquilpeak 主题为例。

2 .将所选主题克隆至本地目录。

cd ~/lilian-blog # 进入网站目录，用你的网站目录名替换 "lilian-blog"。
mkdir -p themes # 创建 "themes" 目录。
cd themes # 进入 "themes" 目录。
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak # 将 Tranquilpeak 主题克隆至 "tranquilpeak" 目录。
第 5 步：编辑配置文件。
1. 在 Hugo 网站文件夹的根目录下，使用 Visual Studio Code 打开 config.toml 文件。

如果你还没用过 Visual Studio Code，建议下载安装一下，是一个很好用的开源文本编辑器，同时支持 Windows、Linux 和 macOS 操作系统。

2. 参考所选 Hugo 主题的配置说明，编辑 config.toml 文件。

注意：theme 配置项指的是所选主题的名称，必须与所选主题被克隆至的目录名相同。在本例中，即 theme = "tranquilpeak"。

Tranquilpeak 主题的配置说明：https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tranquilpeak-configuration

第 6 步：新建一篇文章。
1. 进入网站文件夹的根目录。

cd ~/lilian-blog # "lilian-blog" 为网站文件夹名。
2 .使用以下命令新建一篇文章。

hugo new post/my-first-post.md # "my-first-post.md" 是新建文章的文件名。
3. 编辑新建的文章，添加内容并保存。

第 7 步：本地预览网站效果。
1. 启动 Hugo server。

hugo server -D
2. 使用浏览器打开 http://localhost:1313 预览。

如果你对预览效果满意，进入下一步。
如果不满意，编辑 config.toml 配置文件，再次预览。
第 8 步：构建 Hugo 网站。
在 Hugo 网站文件夹的根目录下，执行 hugo 命令来构建。

hugo # 构建你的 Hugo 网站，默认将静态站点保存到 "public" 目录。
注意：Hugo 会将构建的网站内容默认保存至网站根目录的 public/ 文件夹中。

第 9 步：将网站文件夹转换为 Git 库。
1. 进入 lilian-blog/public 目录，初始化 Git 库。

cd ~/lilian-blog/public # 生成的 HTML 文件保存在 "public" 目录中，"public" 文件夹会被转换为 Git 库。
git init # 初始化 Git 库。
2. 查看 public 目录下的文件，会发现多了 .git 文件。

ls -a # 显示所有文件和目录列表，包含隐藏文件。
第 10 步：将 Git 本地库关联至远程库。
1. 在 lilian-blog/public 目录下，为 Git 本地库添加远程库。

git remote add origin git@github.com:lilin90/lilin90.github.io.git # "lilin90/lilin90.github.io.git" 代表 "your-github-id/your-github-id.github.io.git"。
2. 查看 config 文件。

cat .git/config # 显示 config 信息。
上述命令返回结果如下：

cd ~/lilian-blog # 进入网站目录，用你的网站目录名替换 "lilian-blog"。
mkdir -p themes # 创建 "themes" 目录。
cd themes # 进入 "themes" 目录。
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak # 将 Tranquilpeak 主题克隆至 "tranquilpeak" 目录。
如果 [remote "origin"] 信息正常显示，说明你的 Git 本地库已成功关联至远程库。

第 11 步：提交你的修改至本地库。
在 lilian-blog/public 目录下，通过 commit 提交修改，并写一个 commit message 来简洁描述你的修改。

git status # 查看当前修改状态。
git add . # 添加所有修改过的文件。你也可以只添加某个文件。
git commit -m "Add a new post" # "Add a new post" 是 commit message.
第 12 步：将你的修改推至远程库。
在 lilian-blog/public 目录下，将修改推至远程库。

git push -u origin master
恭喜！现在你已经走完了全程，拥有了一个自己构建的博客网站。

我的博客地址是：https://lilin90.github.io

如果你想使用 HTTPS 以防止其他人窥探或篡改网站流量，在 GitHub 上打开相应的库，点击 Settings 勾选 Enforce HTTPS 即可。

顺便说一下，我购买了个域名 https://lilianlee.me，并将其关联到了默认的 URL https://lilin90.github.io。所以如果你访问 https://lilin90.github.io，会自动跳转至 https://lilianlee.me。

博客首页

第一篇博客文章页面
接下来：之后如何添加一篇博客
之后如果要添加一篇博客，使用如下几步即可：

新建一篇文章，编辑内容。
本地预览网站呈现效果。
构建 Hugo 网站。
提交修改至 Git 本地库。
将修改推至远程库。