如何利用 GitHub Pages 和 Hugo 轻松搭建个人博客?

如何利用 GitHub Pages 和 Hugo 轻松搭建个人博客?

Foreword

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

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

那 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.github.io,username 即你的 GitHub 账号 username。新建 repository:github.com/new

第 2 步:安装 Hugo。

1. 浏览 Hugo 官方的安装指南。

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

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

Hugo 安装指南:gohugo.io/getting-start

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 主题的配置说明:github.com/kakawait/hug

第 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

博客首页
第一篇博客文章页面

接下来:之后如何添加一篇博客

之后如果要添加一篇博客,使用如下几步即可:

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

Afterword

点击“阅读原文”,即可阅读本文的英文版。英文版里多了一些开头的内容。

如果你也想拥有一个自己亲手搭建的博客或网站,现在可以行动起来了!如果遇到网络搜索解决不了的问题,或者有相关经验想跟大家分享,欢迎留言交流哦~


你可能想读

技术文档诞生记 | 完整的技术写作流程是怎样的?

GitHub + Markdown 的新轻型技术写作模式速览

GitHub + Markdown 的深度技术写作实践解析

Technical Writer 不只是写产品说明书的

Lilian Lee:技术文档种类详解 | Technical Writer 可提供的交付物有哪些?

不同阶段如何应对 Technical Writer 的职业顾虑或烦恼?

Technical Writer 日常工作中好用的小工具

技术传播人士应该知道的色彩搭配常识

如何使用颜色来提高技术文档的可读性?

技术翻译需要有 Technical Writer 的 sense

深度解析关于技术翻译的六个认知误区

如何让你的内容输出更加专业更有设计感?

Technical Writer 如何 Review 技术文档?

书单 | 有哪些技术传播从业者必知必看的书籍?

有哪些适合技术传播从业者关注的优质博客?(一)

有哪些适合技术传播从业者关注的优质博客?(二)

经验分享 | 来自 11 位 Technical Writer 前辈的职业发展建议(上篇)

经验分享 | 来自 11 位 Technical Writer 前辈的职业发展建议(下篇)

技术传播沙龙精彩分享 | 高校老师与行业大牛谈“互联网技术写作”

英语技术文档的标题到底该大写还是小写?

如何使用正则表达式批量添加和删除字符?

英语技术文档中如何正确使用时态?

英语技术文档中如何正确使用人称?

Markdown:写技术文档、个人博客和读书笔记都很好用的轻量级标记语言

如何为 Markdown 文件自动生成目录?

技术写作实例解析 | 简洁即是美

两分钟趣味解读 Technical Writer

若脱离理解,直译得再正确又有何意?

优质译文不应止于正确,还要 Well-Organized

Technical Writer 需要 Technical 到会写代码吗?

写在入职技术型创业公司 PingCAP 一个月之后

揭秘 Technical Writer 的工作环境 | 加入 PingCAP 五个月的员工体验记

-END-

编辑于 2019-02-24

文章被以下专栏收录