冰布子的简易静态网站建站指南

如果你想阅读冰布子写的Wordpress指南，请 点击这里

在之前的一份指南中，冰布子讲到了如何使用Wordpress建立自己的独立网站。Wordpress是基于PHP+MySql的动态网站，因此对服务器有一定的要求。因此今天冰布子打算简单地介绍如何使用Serverless平台配合Github和Gridea搭建一个属于自己的静态网站。

相较于Wordpress这类“动态网站”，静态网站通常速度更快且所有的内容、脚本、样式等都已预先生成好，可以很容易被CDN缓存，这样也会使此网站即使受到攻击（或单纯并发请求太多）也不会有什么问题。除此之外，当前有很多Serverless平台，配合它们可以几乎零成本地利用Hugo、Hexo这类程序创建自己的静态网站。

但此类静态网站程序的缺点也很明显：一是此类网站没有图形化的“后台”，内容管理起来不太方便；二是可扩展性远不如Wordpress，例如，设定密码保护就非常麻烦。虽然成本很低，但使用Hugo门槛不比虚拟主机搭建Wordpress低。

但好消息是，一个叫Gridea的项目出现了，自带GUI客户端，大大降低了静态博客的使用门槛。

本指南将会以Gridea为例，使用Github存储网站数据，并由Netlify或Vercel生成静态网站。

简单、门槛低也会带来其缺点，Gridea的可扩展性和主题数量明显不如Hexo或Hugo，只适合不爱折腾只想写文的用户。考虑到本指南的受众，Hexo和Hugo实在是比较麻烦且没有图形化管理界面，对新手很不友好，故本指南仅包含Gridea。但如果你想多整点花样，可以考虑直接使用Hugo或Hexo配合Github+Netlify建站，你可以上网搜索相关教程。

0. 准备

在开始之前，你应该准备一些软件或网站账户或技能。

• Github 你需要使用Github存储你的网站数据
• Netlify / Vercel 或其它类似的Serverless平台，用于生成网站
• Gridea 客户端（Windows/macOS/Linux）
• 一个域名（可选）且会配置DNS，可以参考 冰布子的简易建站指南 的域名、DNS部分
• Markdown语法（非常简单易学）

需要注意的是，如果你手里没有虚拟主机或服务器（VPS），那么你的网站大概率都会完全依赖各种Serverless平台或其他类似服务，而这些服务大都只会提供CNAME绑定自定义域名，但裸域如 glaceon.best 是不能直接使用CNAME记录的，否则会和MX邮箱记录起冲突，如果你不使用域名邮箱则没有问题，但部分DNS提供商（如Azure）会禁止你这么做，因此如果你需要使用域名邮箱，则在此之前你必须保证你的DNS服务商支持“ANAME”或“ALIAS”记录或支持“CNAME拉平（CNAME Flattening）”技术。目前冰布子已知 Cloudflare和NS1（直接在Netlify中添加域名，见 1.2.1）支持，腾讯云和阿里云虽然目前不支持但是不会禁止你在裸域添加CNAME。

1. 创建仓库并使用Netlify发布

Gridea大幅度地简易化了静态网站的生成使用，正如其网站所说，“可以，写博客的那个劲儿又回来了”。下面简单介绍如何使用它。

1.1 创建并同步仓库

Gridea的 官方文档 写得十分详细，不过有的地方可以稍作修改。

官方文档是指引用户直接发布在Github Pages，但Github Pages使用自己的域名时不支持HTTPS，这都2020年了，不支持HTTPS都不好意思出来混。所以冰布子建议使用Netlify或Vercel或其他类似的Serverless平台发布（且自带全球CDN）。

在官方文档“发布”一节，的第二步，由于你不需要使用Github Pages，因此仓库名没有必要使用 用户名.github.io 的格式。

Gridea不支持密码保护的私有文章（事实上其他静态博客想做到此功能也比较麻烦），因此仓库选择公开是没什么问题的，因为本身你使用本项目的目的就是公开你的文章作品，选择公开仓库只不过是公开你本身就公开的博客的源码而已，而且考虑到后面会使用Gitalk评论系统，你的读者要评论就需要注册Github账户，如果你的网站仓库是公开的，那么你的读者甚至可以直接在Github上面关注（Follow）你或你的网站仓库（Watch仓库），四舍五入这就是用Github社交了（逃）。

因此，上图的设置中，我们这里将“域名”改成你想使用的域名，如 blog.glaceon.best ，CNAME可以不填。其余的和官方文档所讲解的一致即可。填写好后点击“检测远程连接”，如果没有问题，保存即可。接下来点击“同步”，让Gridea生成并上传源码到Github仓库。

1.2 使用Netlify发布

同步完成后，前往你的Netlify账户后台，点击页面右侧的“New Site from Git”按钮，在跳转后的页面点击“Github”登陆你的Github账号。绑定后，Netlify会读取你账户里的仓库，选择你刚刚创建的Gridea仓库，然后直接点击“Depoly Site”开始部署即可。

1.2.1 添加自定义域名

几秒后就能部署完成，这时点击页面中的“Domian Settings”设置你的域名。

在 Custom Domains 一栏，你会看到Netlify已经给你分配了一个后缀是 *.netlify.app 的默认域名，复制此网址备用。点击 Custom Domains 一栏下的“Add Domian Alias”，添加你之前在Gridea客户端中填写的域名，如 blog.glaceon.best 。

然后回到DNS服务商，在你的DNS管理面板中添加一项 CNAME 记录，名称是你之前填写的域名名称，如 blog ，记录值是本段初复制的那个后缀是 *.netlify.app 的域名。

如果你要使用裸域（如 glaceon.best）创建网站，则必须保证你的DNS提供商支持“CNAME拉平”或“ALIAS（ANAME）”记录（因为裸域不支持使用CNAME），目前冰布子推荐Cloudflare或直接使用Netlify托管你的DNS记录（其DNS服务基于NS1），Azure DNS是不支持这两种技术或记录的，国内的腾讯云或阿里云冰布子尚不清楚。如果你想把自己的域名DNS转移到Netlify，请在Netlify后台首页的“Domians”一栏中添加域名，获取你的DNS服务器网址后，在域名服务商后台修改DNS服务器。（修改的具体方法请参考 冰布子的简易建站指南）

1.2.2 添加SSL证书

这都2020年了，没有HTTPS都不好意思出来混，所以一定要添加SSL证书。

DNS记录添加完成后，回到Netlify后台中你的Gridea项目的管理页面，在Domain Settings中，确认你添加的兹定于域名旁边没有⚠️警告标识后，说明域名绑定完成，现在你可以滑动到页面底部，HTTPS一栏中申请免费证书了（Use Let’s Encrypt Certficate）。根据网页提示申请完证书后，你的网站会自动开启HTTPS。

现在，访问你的网站，一个全新的Gridea博客（的框架）就做好了。

2. 设置

设置完成后，一定要记得点击“同步”以生成你更改后的网站，否则你的改动不会生效。

2.1 主题

在做个性化之前，你需要先挑选一个主题。

你可以在 项目网站 或 Github 里寻找喜欢的主题，下载并解压到Gridea的文档目录中的 themes 文件夹内（你可以在 客户端左下角的设置按钮-站点源文件路径 中找到）。完成后重启客户端即可在“主题”一项中看到新安装的主题。

应用主题后，你可以在“主题”选项中自行设置。

需要注意的是，各主题功能不一样，可以做的选项也不尽相同，这也是本指南指引读者先选择主题的原因。

2.2 添加评论系统

Gridea是静态博客，因此所有页面都是已经生成好了的静态页面，故不能像Wordpress那样自带评论系统。

目前Gridea支持Gitalk和Disqus作为评论系统，考虑到本指南受众（Disqus被墙），冰布子在这里仅推荐并讲解Gitalk。使用本系统的博客，其读者必须注册Github账户后才能评论。

首先，你需要在Github新建一个仓库（Repository，Github右上角“+”菜单中），仓库必须是公开的（Public），名称随意。然后需要创建 GitHub Application，如果没有 点击这里申请，Authorization callback URL 填写当前使用插件页面的域名，申请好后，记下Client ID和Client Secret。

回到Gridea客户端，进入远程-评论配置，选择Gitalk，开启“是否显示评论”，填写刚刚记下的Client ID和Client Secret；仓库名称填写刚刚创建的公开仓库，Owner填写你的Github用户名。

最后点击保存，并同步。

同步完成后，务必访问一次你的网站，点开任意一篇文章，这时候Gitalk会提示你“没有找到此文章对应的Issues，请联系@[用户名]创建”并有一个“登陆”按钮。你只需要点击登陆按钮登陆Github，且上一步中的Owner填写无误，程序会自动创建相关设置，至此，你的博客就可以使用评论系统了。

2.3 菜单

每个博客都有自己的导航菜单，Gridea客户端使用“菜单”选项编辑菜单。

点击右上角的“➕ 加号”图标添加新菜单，输入你想要的名称，选择属性：Internal为内链，即链接对象是本网站内部的某个页面（文章、TAG等）；External是外链，任何不在本网站的链接都叫外链。最后输入链接地址即可。下面举例说明。

如果你想给你的菜单上添加分类目录（某个TAG），首先你需要查询该TAG的地址（访问你的博客，选择菜单中的“标签”页面，找到你想用的标签，把域名后缀右侧的所有部分截取下来，如某个TAG的完整网址是 https://blog.glaceon.best/tag/i3pwwuyel/，你只需要截取 /tag/i3pwwuyel 即可），选择Internal，网址输入刚刚截取的那部分，点击保存即可。

如果你想在菜单上添加“关于”或“留言板”或“友情链接”或任何你想让它摆在菜单上的页面，和TAG的处理方法类似，先查询地址，找到这篇文章，把域名后缀右侧的所有部分截取下来，如 https://blog.glaceon.best/post/abc/，你只需要截取 /post/abc 。选择Internal，网址输入刚刚截取的那部分，点击保存即可。文章（或页面）添加到菜单后，没有必要出现在博客文章时间线中，建议参考本指南 3.2.2 一节中，将这篇文章开启“列表中隐藏”。

如果你想留下你的其他社交平台链接（微博、Twitter等），你应该在 主题-自定义设置-社交 中找到相关选项填写。

如果你想在菜单上添加任何其他网站的链接，添加菜单，起一个名字，选择External，直接把链接复制到链接框内即可。

添加好链接后，你可以上下拖拽各菜单以调整位置。

3. 撰写

在写文章之前，你需要了解什么是 Markdown语法 ，因为Gridea仅支持Markdown。不必担心，只需要几分钟你就能记住基本的语法，实际使用上比普通的“所见即所得”编辑器（如Word）有效率得多。

3.1 Markdown语法入门

冰布子在这里简要列出Markdown语法的最基本的项目，只需看一次就可以记住了。

xxxxxxxxxx
35
1
标题（共六级）：
2
# 一级标题
3
## 二级标题
4
### 三级标题
5
#### 四级标题
6
##### 五级标题
7
###### 六级标题
8
​
9
字体样式：
10
*斜体文本*
11
**粗体文本**
12
***粗斜体文本***
13
​
14
无序列表：
15
- 第一项
16
- 第二项
17
- 第三项
18
​
19
列表嵌套只需在子列表中的选项前面添加四个空格即可：
20
1. 第一项：
21
    - 第一项嵌套的第一个元素
22
    - 第一项嵌套的第二个元素
23
    
24
引用：
25
> 引用区块
26
​
27
代码：
28
`代码内容`
29
​
30
链接：
31
[链接名称](链接地址)
32
或 <链接地址>
33
​
34
图片（请直接客户端的插入图片功能）：
35
![alt 属性文本 可以理解为图片标题](图片地址)

其部分效果如下：

• 这是无序列表

1. 这是有序列表

   1. 这是列表嵌套

这是引用

code 这是代码

Markdown的基本语法就是这么简单！

3.2 文章属性

假定你已经学会了Markdown的基本语法并写好一篇文章。你可以随时点击文章编辑界面右侧的“👁 预览”图标预览你文章实际的样式。

3.2.1 摘要分隔符

<!-- more —> 标签，即摘要分隔符，在Gridea中，如果你没有使用摘要分隔符，则你的网站首页就不会输出文章摘要，只会输出一个标题，非常不好看，因此请务必在每篇文章，你认为合适的地方添加此标签。你不需要手动输入<!-- more —>，只需在文章编辑页的右侧，点击“…”图标即可自动将分隔符插入到你当前的光标位置。

3.2.2 文章设置

作为博主，你应该认真对待每一篇文章。除了文章本身，你还应该关注文章设置。

在文章编辑界面的右侧，点击“⚙ 文章设置”图标，弹出的菜单内有很多选项。在这里冰布子选择其中部分进行详细解释。

• URL：文章在网址上的名称。如URL填写为 abc，你的博客网址是 glaceon.best 那此文章的网址就是 glaceon.best/post/abc。如果不自己填写，默认为你文章标题的拼音。
• 标签：你熟悉的TAG。不同于Wordpress，此类静态博客通常没有“分类目录”功能，但直接用TAG替代也是不错的。用好TAG，严格对文章进行适当的分类，对你和你的读者都有好处。
• 封面图：顾名思义，建议每篇文章都配上封面图，会好看很多。如果你要使用“外链”封面图，请保证你的外链链接没有反盗链。（事实上几乎所有非图床网站都会使用反盗链）
• 列表中隐藏：勾选后文章列表、归档页都不会显示此文章。如果你打算做一个“关于”、“友情链接”、“留言板”之类的页面，就应该勾选它，因为这种页面不应该出现在文章时间线中，应该出现在顶部菜单里。

一切无误后，点击客户端最右上角绿色的“勾号”图标，就可以发布文章了。

——当然，最后的最后不要忘记点击主界面的“同步”按钮。