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

如果你想阅读冰布子写的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. 准备1. 创建仓库并使用Netlify发布1.1 创建并同步仓库1.2 使用Netlify发布1.2.1 添加自定义域名1.2.2 添加SSL证书2. 设置2.1 主题2.2 添加评论系统2.3 菜单3. 撰写3.1 Markdown语法入门3.2 文章属性3.2.1 摘要分隔符3.2.2 文章设置


0. 准备

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

需要注意的是,如果你手里没有虚拟主机或服务器(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社交了(逃)。

image-20200721125758299

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

1.2 使用Netlify发布

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

截屏2020-07-21 15.44.00

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语法的最基本的项目,只需看一次就可以记住了。

其部分效果如下:

  1. 这是有序列表

    1. 这是列表嵌套

这是引用

code 这是代码

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

3.2 文章属性

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

3.2.1 摘要分隔符

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

3.2.2 文章设置

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

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

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

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