如果你想阅读冰布子写的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 文章设置
在开始之前,你应该准备一些软件或网站账户或技能。
需要注意的是,如果你手里没有虚拟主机或服务器(VPS),那么你的网站大概率都会完全依赖各种Serverless平台或其他类似服务,而这些服务大都只会提供CNAME绑定自定义域名,但裸域如 glaceon.best
是不能直接使用CNAME记录的,否则会和MX邮箱记录起冲突,如果你不使用域名邮箱则没有问题,但部分DNS提供商(如Azure)会禁止你这么做,因此如果你需要使用域名邮箱,则在此之前你必须保证你的DNS服务商支持“ANAME”或“ALIAS”记录或支持“CNAME拉平(CNAME Flattening)”技术。目前冰布子已知 Cloudflare和NS1(直接在Netlify中添加域名,见 1.2.1)支持,腾讯云和阿里云虽然目前不支持但是不会禁止你在裸域添加CNAME。
Gridea大幅度地简易化了静态网站的生成使用,正如其网站所说,“可以,写博客的那个劲儿又回来了”。下面简单介绍如何使用它。
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仓库。
同步完成后,前往你的Netlify账户后台,点击页面右侧的“New Site from Git”按钮,在跳转后的页面点击“Github”登陆你的Github账号。绑定后,Netlify会读取你账户里的仓库,选择你刚刚创建的Gridea仓库,然后直接点击“Depoly Site”开始部署即可。
几秒后就能部署完成,这时点击页面中的“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服务器。(修改的具体方法请参考 冰布子的简易建站指南)
这都2020年了,没有HTTPS都不好意思出来混,所以一定要添加SSL证书。
DNS记录添加完成后,回到Netlify后台中你的Gridea项目的管理页面,在Domain Settings中,确认你添加的兹定于域名旁边没有⚠️警告标识后,说明域名绑定完成,现在你可以滑动到页面底部,HTTPS一栏中申请免费证书了(Use Let’s Encrypt Certficate)。根据网页提示申请完证书后,你的网站会自动开启HTTPS。
现在,访问你的网站,一个全新的Gridea博客(的框架)就做好了。
设置完成后,一定要记得点击“同步”以生成你更改后的网站,否则你的改动不会生效。
在做个性化之前,你需要先挑选一个主题。
你可以在 项目网站 或 Github 里寻找喜欢的主题,下载并解压到Gridea的文档目录中的 themes
文件夹内(你可以在 客户端左下角的设置按钮-站点源文件路径 中找到)。完成后重启客户端即可在“主题”一项中看到新安装的主题。
应用主题后,你可以在“主题”选项中自行设置。
需要注意的是,各主题功能不一样,可以做的选项也不尽相同,这也是本指南指引读者先选择主题的原因。
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填写无误,程序会自动创建相关设置,至此,你的博客就可以使用评论系统了。
每个博客都有自己的导航菜单,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,直接把链接复制到链接框内即可。
添加好链接后,你可以上下拖拽各菜单以调整位置。
在写文章之前,你需要了解什么是 Markdown语法 ,因为Gridea仅支持Markdown。不必担心,只需要几分钟你就能记住基本的语法,实际使用上比普通的“所见即所得”编辑器(如Word)有效率得多。
冰布子在这里简要列出Markdown语法的最基本的项目,只需看一次就可以记住了。
xxxxxxxxxx
351标题(共六级):
2# 一级标题
3## 二级标题
4### 三级标题
5#### 四级标题
6##### 五级标题
7###### 六级标题
8
9字体样式:
10*斜体文本*
11**粗体文本**
12***粗斜体文本***
13
14无序列表:
15- 第一项
16- 第二项
17- 第三项
18
19列表嵌套只需在子列表中的选项前面添加四个空格即可:
201. 第一项:
21 - 第一项嵌套的第一个元素
22 - 第一项嵌套的第二个元素
23
24引用:
25> 引用区块
26
27代码:
28`代码内容`
29
30链接:
31[链接名称](链接地址)
32或 <链接地址>
33
34图片(请直接客户端的插入图片功能):
35![alt 属性文本 可以理解为图片标题](图片地址)
其部分效果如下:
这是有序列表
这是引用
code 这是代码
Markdown的基本语法就是这么简单!
假定你已经学会了Markdown的基本语法并写好一篇文章。你可以随时点击文章编辑界面右侧的“👁 预览”图标预览你文章实际的样式。
<!-- more —>
标签,即摘要分隔符,在Gridea中,如果你没有使用摘要分隔符,则你的网站首页就不会输出文章摘要,只会输出一个标题,非常不好看,因此请务必在每篇文章,你认为合适的地方添加此标签。你不需要手动输入<!-- more —>
,只需在文章编辑页的右侧,点击“…”图标即可自动将分隔符插入到你当前的光标位置。
作为博主,你应该认真对待每一篇文章。除了文章本身,你还应该关注文章设置。
在文章编辑界面的右侧,点击“⚙ 文章设置”图标,弹出的菜单内有很多选项。在这里冰布子选择其中部分进行详细解释。
abc
,你的博客网址是 glaceon.best
那此文章的网址就是 glaceon.best/post/abc
。如果不自己填写,默认为你文章标题的拼音。一切无误后,点击客户端最右上角绿色的“勾号”图标,就可以发布文章了。
——当然,最后的最后不要忘记点击主界面的“同步”按钮。