Github + Hugo + Vercel

我上一篇博客介绍了几种托管一个小型静态网站的方法。本文专注于一种目前我认为的最佳配置，详细介绍如何做一个个人博客，确保资料安全，保护访客的个人隐私，没有人打广告，或者删你的帖，而且完全免费。概括而言：

• 你在本机使用文本编辑器用markdown 格式写作文章
• 你的博客使用Github来做源代码管理，确保一切历史得到妥善保护
• 然后通过Vercel 自动生成发布并托管

本地工具安装

首先确保你本地有需要的工具。

字符终端

某些朋友对字符终端有畏惧心理。但是，字符终端是最好的教学工具，它可以让你用最小的代价来传达一步步的指导。敲什么命令，预期什么样的返回，不会有任何模糊不清的情况。当然，这里命令行操作中的很大部分，甚至可能是全部，可以用图形界面操作来取代，但这是后话，等待你自己主动去发现。

Mac OSX 和 Linux 用户可以跳过这一段，你的电脑已经有可用的字符终端了。Windows用户请安装msys2, 并按照首页指示操作直到 pacman -S git

Hugo

Hugo是我们要使用的静态网站生成器。静态网站生成器有很多种，Hugo既不是最简单易用的，也不是功能最强大的，但综合两方面考虑我郑重推荐Hugo。Hugo 使用Go 语言开发，但你今天甚至未来都不需要懂一点点 Go 语言，在未来你可能需要修改一些模版文件来定制化自己的博客。

严格来说，你甚至不需要安装运行Hugo就可以发布博客，这一点我后来会提到。Hugo的安装非常简单，下载后只有一个可执行文件，把这个可执行文件拷贝合适的地方，在命令行直接运行就是了。安装说明 有点长，但你只需按照文中第一种方法就好。

文本编辑器

文本编辑器我不愿意做推荐。任何像话的文本编辑器都支持markdown文件编辑，例如Notepad++, Sublime Text, Textmate, VS code, Emacs, VIM, ... 通常而言软件工作者对文本编辑器都有很强的偏好，例如我，不能忍受使用任何非Emacs 工作超过十分钟。

如果你完全没有概念，也不知道可以用什么，可以尝试使用Atom. Atom 来自Github，可以和Git工作流程紧密结合，界面也比较新潮，对新用户相对友好。

补充：我现在建议初学者使用zettlr, 这是一个对Markdown 专门优化的编辑器，和Atom一样也是用跨平台的Electron框架写成。

加入 Github

你需要在Github注册账户。这个过程是免费的，而且仅需要一个邮箱信息。你的代码库会存在这里。之后你和guthub的交互主要是通过命令行工具，其他图形界面工具或第三方工具完成，网页交互不会太多。注册完用户之后你需要开通SSH public key访问，Github这里有详细步骤，我这里不再详述了。Windows用户的本地git工具在上面步骤已经安装完成，Linux请使用本机git，OSX用户第一次使用git的时候命令行会有提示如何安装git。

你在github网站的操作暂时告一段落，之后本文所有操作都是在外部完成的。

加入 Vercel

其实Github本身就可以做发布，但今天我不介绍，因为有更好的方法。请到Vercel 网站，无需注册新用户，直接点 Continue with github 按钮：

填写一些基本信息后，请点击 import Template 按钮：

然后注意选择hugo模版，排的不是太靠前，注意不要选错了。之后请一切照提示，把模版安装到github，并做首次发布，一个空白的，完全自主的博客就上线了。

如何加入自己的内容

首先，为简化起见，你的博客上自己提供的内容只有两种：

• 文章，就是 .md 文本文件
• 图片，可以是 .png 或 .jpg 文件，注意大小不要太大，最好不超过250KB，否则请自行缩小或降低分辨率。

请使用git工具把生成的模版工程克隆到本地，Github上有明确指示。hugo 网站上有相当详细的文档，但你暂时不需要看。你需要干的几件事如下。

配置

工程根目录下有个极简的配置文件 config.toml, 内容大致如下：

baseURL = "https://xxx.xxx.xx/"
languageCode = "en-us"
title = "XXXX"
theme = "ananke"

请把 baseURL 改成自己需要的域名。没有域名的话，可以使用 Vercel 提供的临时域名，你在Vercel网站上有，形如 xxx.vercel.app.

请把 title 改成自己想要的样子。没了。

第一篇文章

你的博客文章会放在 content/posts 目录下，每篇文章是一个 .md 文件。目前目录中只有有一篇基本空白的范例。文件分两部分，第一部分是一个简单的前言，包含本文的一些简单信息，例如：

---
title: Send My Own Emails
slug: send_my_own_emails
date: 2020-08-06
tags:
- email
description: Sending your own email by yourself is suprisingly hard.
---

含义不言而寓。这个格式是一个简单的yaml格式。

之后就是你的文章了，一个较简洁的格式介绍在这里:

你的图片放在 static 目录里，在你文章引用的时候请使用绝对路径, 但从static 目录开始算。例如，如果图片存成: static/pics/mypic.jpg 则网页引用路径是: /pics/mypic.jpg.

Hugo 预览

Hugo 包含本地动态预览功能。请在工程根目录下键入命令：

hugo server

然后打开你的浏览器指向：http://localhost:1313/ 你就看到你的博客预览效果了。你用文本编辑器每次存盘浏览器都会自行刷新。

发布

发布其实和Hugo无关，而是通过git通知github，再从github通知vercel，vercel会自动从github抓取最新工程，自己生成再发布。

你需要做的是在git里加入你新增的文件，记住不要加入生成文件 (public/) ，然后 commit 再 push。

git add posts/*.md static/*.jpg static/*.png
git commit -a
git push

之后如果顺利的话，不到一两分钟，你的内容就上网了。有兴趣的话可以到vercel 上观察过程日志。

模版订制

这一部分暂时超纲，你需要对hugo的模版机制有一定了解。模版文件都在 themes/THEME 目录下，其中THEME是你配置文件中配置的。如果没改过的话是ananke. 有兴趣的话可以进去看看。

还有一种可能是从网上 下载全新的theme，目前有几百个之多。

结束语

你的自主博客之路才刚刚开始，还有很多值得你去探索。别的好处我暂时不谈，这里我谈一谈资料安全性。在本文介绍的方法下，每一个部分都可以更换：

• Vercel不能用了还有别的托管公司，例如Netlify
• Github不能用了还有Gitlab，Bitbucket, ...
• Hugo不能用了还有很多很多静态网站生成器，都支持markdown，最多前言部分需要小修改
• 你电脑坏了，你所有的文章，图片，包括所有历史在Github有备份
• 如果网络都没有了，你所有的文章，图片，包括所有历史都在本地有备份

从数据量来说，你的文章微不足道。从意义来说，除了对你自己，对别人的意义未必很大。但是这是你自己的言论自由，什么人都管不着。

荣誉，隐私，言论自由。假如你自己都不在乎，不会有人在乎你的。-- 周溱