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

这也是为什么我在信息爆炸的今天，依然推荐用 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 protected]"

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

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

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

$ ssh -T [email protected]

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

$ git config --global user.name "XXXX"
$ git config --global user.email "[email protected]"

2.2 安装 VS Code

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

• gpm 用来管理 Github 上的文件。 必备
• Setting Sync 同步 Github 与本地文件。 必备
• Markdown All in One 使用 Markdown 写作的利器。必备
• Chinese Language Pack for Visual Studio Code VS Code 的汉化插件。 推荐
• Auto Rename Tag 如果涉及修改代码的时候，非常好用。推荐
• Material Icon Theme 一套个性的图标主题。 推荐

进入 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 分支。

• 在 Setting 中设置 [Token]，暂存。Note 也是随便写，勾选 repo 和 workflow

• 进项目 settings/secrets 新建标题为 personal_token ，内容是刚创建的 tokens ;

• 回到项目，点击 Action - Set up a workflow yourself 添加如下代码：

	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 内容自动拉取到自己的服务器等。

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