技术传播那些事儿工具干货

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

2019-02-24  本文已影响3人  Lilian_Lee

Foreword

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

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

那 GitHub Pages 和 Hugo 又是什么呢？

接下来，看看如何一步一步地为自己搭建一个博客吧！下面的步骤或许乍一看有点儿多，那是为了让操作更具体更明确特意划分的，实际操作起来并不会很复杂。

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

第 1 步：新建一个 GitHub 库。

  1. 注册一个 GitHub 账号。

    • 如果你已有账号，直接登录。
    • 如果你没有账号，注册并登录。

    GitHub: https://github.com

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

    GitHub Pages: https://pages.github.com

  3. 新建一个 GitHub repository，库名为 username.github.io，username 即你的 GitHub 账号 username。

    新建 repository：https://github.com/new

    Create a new repository

第 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 信息。

    上述命令返回结果如下：

    [core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true
[remote "origin"]
    url = git@github.com:lilin90/lilin90.github.io.git
    fetch = +refs/heads/*:refs/remotes/origin/*

    如果 [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

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

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

你可能想读：

技术文档诞生记 | 完整的技术写作流程是怎样的？
Technical Writer 可提供的交付物有哪些？
GitHub + Markdown 的新轻型技术写作模式速览
GitHub + Markdown 的技术文档方案深度解析
Technical Writer 日常工作中好用的小工具
技术传播人士应该知道的色彩搭配常识
如何使用颜色来提高技术文档的可读性？
Technical Writer 如何 Review 技术文档？| 重细节+全局观
技术翻译需要有 Technical Writer 的 sense
深度解析关于技术翻译的六个认知误区
如何让你的内容输出更加专业更有设计感？
书单 | 有哪些技术传播从业者必知必看的书籍？
有哪些适合技术传播从业者关注的优质博客？（一）
有哪些适合技术传播从业者关注的优质博客？（二）
经验分享 | 来自 11 位 Technical Writer 前辈的职业发展建议（上篇）
经验分享 | 来自 11 位 Technical Writer 前辈的职业发展建议（下篇）
技术传播沙龙精彩分享 | 高校老师与行业大牛谈“互联网技术写作”
英语技术文档的标题到底该大写还是小写？
不同阶段如何应对 Technical Writer 的职业顾虑或烦恼？
如何使用正则表达式批量添加和删除字符？
英语技术文档中如何正确使用时态？
英语技术文档中如何正确使用人称？
Markdown：写技术文档、个人博客和读书笔记都很好用的轻量级标记语言
如何为 Markdown 文件自动生成目录？
技术写作实例解析 | 简洁即是美
两分钟趣味解读 Technical Writer
若脱离理解，直译得再正确又有何意？
优质译文不应止于正确，还要 Well-Organized
Technical Writer 需要 Technical 到会写代码吗？
写在入职技术型创业公司 PingCAP 一个月之后
揭秘 Technical Writer 的工作环境 | 加入 PingCAP 五个月的员工体验记

-END-

上一篇 下一篇

猜你喜欢

热点阅读