Elizen

There is only one thing in the world worse than being talked about, and that is not being talked about.

使用 Hugo 从 0 到 1 搭建个人博客

Elizen / 2021-01-19


我喜欢一个关于知识分子的定义:他们是研究理念的,他们永远要站在一个制度的对立面。

这也是为什么我在信息爆炸的今天,依然推荐用 RSS 订阅的方式阅读新的信息,使用 Kindle 或者直接读纸质书,在独立博客发表文章,谨慎地使用抖音一类短视频服务。它们部分或全部地站在了当代社会的对立面。但在我看来,这却是回归到互联网本身的必经之路。

再一次细数我十年来的独立博客历程已无必要,无非是单调的一个时间列表。过程中,倒总是包含一个关键词「折腾」。如同麦克卢汉所说的「媒介即信息」,我选择独立博客作为我的信息传播渠道,也就必须融入这一传播介质之中。所以,这也是一篇关于「折腾」的文章。

在查阅多方资料,以及[木木哥]和其他朋友的帮助下,我 2020 年使用 Hugo 重新搭建了自己的博客网站。最近,我想如法炮制,用最快的速度给一个新入手的域名搭建网站,却发现「建站」这件事是一件典型的超低频操作,一次建站,除了爱折腾的人,对于大部分像我一样,只是寻找一个能舒舒服服写东西的地方的人来说,几年都不会有大的变动,所以当初对着电脑从 0 开始搭建出博客的过程,已忘到九霄云外。

对此,就启发我要写下这样一篇文章,解决以下问题:

本文也因此分为上、下两个章节,基础篇和进阶篇。今天先讲基础篇,使用 Github 搭建免费的 Hugo 个人网站。

第一部分,基础版:使用 Github 搭建 Hugo 网站。

1. 注册 Github,创建 repo 仓库


Github 是全世界程序员的福音书,一个技术人不可能不知道的开源技术社区。我们就从这里开始,让它成为我们自己网站的第一个落脚点。

注册 Github,就像注册任何网站一样。进入 Github 网站,点击Sing Up,输入自己的用户名、邮箱和密码,完成账户验证,点击Create account,之后可以选择你的职业,你想用 Github 做什么,或者干脆跳过,直接下一步。

查收你的邮箱,点击确认链接,完成注册。

点击右上角+ - New repository,填写 Repository name,点击Create repository

到此,Github 上的工作就已经完成了。你会得到如下图一些完全看不懂的东西。没关系,我们输入一个 Repository name ,点击 Create repository ,开始下一步。

2. 安装 VS Code 和 Git,开启折腾之旅


我们在本地的电脑上,还需要安装两个软件,一个是 Git,一个是 VS Code,Git 是一个版本控制系统,是我们连接 Github 的钥匙,而 VS Code 本身是微软出品的一款程序员使用的开发集成工具。我们不需要懂得这么多,只把它看成是我们的博客管理平台就可以了。

2.1 安装 Git

去 Git [官网]下载,按照默认配置一直下一步,安装。

安装完毕,打开桌面的快捷方式,我们需要现在本地创建一个 ssh key,这个目的就是在你的电脑上生成一个密钥,获取之后,在 Github 上输入,就把你的电脑和 Github 连接起来,以后我们就可以在快速、方便地保存自己的本地文件到 Github 上,并生成网站内容。

//输入下面的代码,获取密钥(双引号内容为你自己注册账号时的邮箱):
$ ssh-keygen -t rsa -C "email@xxx.com"

在默认目录中找到 .ssh 中的 id_rsa.pub 文件,打开,复制。

回到浏览器中,进入 Github [设置] 中的 SSH and GPG keys,新建一个 SSH keys,标题自己起,Key 的内容就输入刚才复制的文件中的值,然后添加。

回到本地的 Git 窗口,输入如下代码,验证是否链接成功。

$ ssh -T git@github.com

成功之后,输入下面的代码,绑定自己的 Github 账号,到此,连接本地和 Github 的工作就完成了。

$ git config --global user.name "XXXX"
$ git config --global user.email "XXX@gmail.ocm"

2.2 安装 VS Code

点击进入 VS Code [官网],选择自己的版本下载,我这里是 Mac 版本。如果安装不熟悉,就一路默认配置。安装完成,打开 VS Code 软件。点击Extensions,安装所需插件。在这里也推荐几个必备和好用的插件。

进入 Github 选择刚才建立的 Repo,复制 HTTPS 链接,在 VS Code 中切换左侧边栏到 Project Management(项目管理)中,点击+,粘贴地址,回车。

之后就可以在 gpm 中找到相应的 Github 项目。右键点击你的项目名,选择在文件管理器中打开。

2.3 安装博客

点击[下载](提取码: g5xe)我准备好的 Blog 网站文件。将下载好的文件解压后,Copy 到项目文件夹。找不到本地文件夹,可以在文件管理器中右键自己的博客项目,选择打开目录。

解压后的文件内容目录如下:

├── archetypes
│   └── default.md
├── config.toml # Hugo 配置文件
├── content
│   └── posts # 文章目录
│       ├── hello-world.md
│       ├── hugo-single-link.md
│       └── huo-zha-le.md
├── static # 静态文件目录
│   ├── images
│   └── photos
│       └── 刘堃现场.jpeg
└── themes # 主题目录
    └── hyde
        ├── CHANGELOG.md
        ├── LICENSE.md
        ├── README.md
        ├── archetypes
        │   └── default.md
        ├── go.mod
        ├── images
        │   ├── screenshot.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   ├── path.html
        │   │   ├── single.html
        │   │   └── terms.html
        │   ├── index.html
        │   ├── partials
        │   │   ├── comments.html
        │   │   ├── head.html
        │   │   ├── head_fonts.html
        │   │   ├── hook_head_end.html
        │   │   └── sidebar.html
        │   └── shortcodes
        │       ├── link.html
        │       └── music.html
        ├── static
        │   ├── Bmdb.min.css
        │   ├── Bmdb.min.js
        │   ├── apple-touch-icon-144-precomposed.png
        │   ├── css
        │   │   ├── hyde.css
        │   │   ├── poole.css
        │   │   ├── print.css
        │   │   └── syntax.css
        │   └── favicon.png
        └── theme.toml

2.4 配置博客

回到 VS Code,打开项目管理,右键自己的项目,选择在当前窗口打开或者新窗口打开。接下来,就可以进行修改了。Hugo 的基本配置都在 config.toml 中,可以参考如下信息:

baseURL = "<https://ittenblunt.github.io/my-blog/>" # 修改为自己的博客地址
languageCode = "zh-CN"
title = "Itten's Blog" # 修改“”中的内容为自己的网站名字
theme = "hyde" # 如果以后启用其它主题,在这里替换主题名字
disqusShortname = "" # 如果使用 disqus 评论系统,在这里填写自己的 disqus 用户名 
hasCJKLanguage = true
enableEmoji = true

[permalinks]
  posts = "/:filename/"

[Menus] # 边栏目录
  main = [
      {Name = "Archives", URL = "<https://ittenblunt.github.io/my-blog/posts/>"},
      {Name = "Tags", URL = "<https://ittenblunt.github.io/my-blog/tags/>"},
      {Name = "Photos", URL = "<https://ittenblunt.github.io/my-blog/photos/>"}
  ]

[params] # 指定发布的文件目录和博客描述
  # dir name of your blog content (default is `content/posts`)
  contentTypeName = "posts"
  # description abou this website
  description = "There is only one thing in the world worse than being talked about, and that is not being talked about."

[params.valine] # 我把它默认甚至为关闭了,想打开可以修改 false 为 true,填写 valine 的 appId 和 appKey 即可开启 valine 的评论系统。(目前 valine 好评在下降,很多人更换了自己的评论系统,我还没有折腾,暂时不提供这部分教程了。想用的可以参考 <https://valine.js.org/> 操作手册)
  enable = false
    appId = ''
    appKey = ''
    placeholder = '既然来了,那就留个痕迹吧~'
    visitor = true

修改之后,点击左侧边栏源代码管理,在消息框中随便输入,例如「updata my blog」,点击对勾。点击左下角master旁边的上传,之后可能会有弹窗,需要关联自己的 Github,在弹出的网页中同意关联即可。

现在,网页进入自己的 Github 项目,就会发现,我们本地文件已经全部上传好了,但它还不是最终的博客形态,Hugo 是需要进行编译才能产生静态网站页面的工具,这部分工作,在下一小节我们交给 Github 自动完成。

3 配置 Github Action 实现自动化部署

我们在自己的项目中新建一个 gh-pages 分支。

	name: Deploy Hugo # 任君喜欢
	on:
	  push:
	branches:
	  - master   # master 更新触发
	jobs:
	  build-deploy:
	runs-on: ubuntu-18.04
	steps:
	  - uses: actions/checkout@v1
	
	  - name: Setup Hugo
	    uses: peaceiris/actions-hugo@v2
	    with:
	      hugo-version: latest
	
	  - name: Build 
	    run: hugo
	
	  - name: Deploy
	    uses: peaceiris/actions-gh-pages@v3
	    with:
	      personal_token: ${{ secrets.personal_token }} # 填写你自己的 personal_token
	      PUBLISH_BRANCH: gh-pages  # 推送到当前 gh-pages 分支
	      PUBLISH_DIR: ./public  # hugo 生成到 public 作为跟目录
	      commit_message: ${{ github.event.head_commit.message }}

Commit 提交,看看 Action 是不是成功了,再看看 gh-pages 静态文件是否更新,到此,你的独立博客就算搭建成功了,为了方便,可以重新在 VS Code 中下载一遍自己的项目,保证它们的同步。现在可以访问你的博客地址,欣赏一下自己的成果了。

如果你没有改动 config.toml 文件的描述信息,打开它应该是下面这个样子:

现在你就可以在本地的 posts 目录下开始写作了。新建一个 .md 格式的文件,填写下面的基本信息,开始博客之旅。

---
title: 
date: 
tags: 
---
balabalabala...

到此,大功告成。可以欢呼了。

后话

基础篇到这里就结束了。后面会更新进阶篇,包括域名注册、DNS 解析、VPS 的购买和配置、通过 webhook 将 Github 内容自动拉取到自己的服务器等。

俗话说,工欲善其事,必先利其器,搭建好了的小伙伴,就应该写起来了。