静态博客站点搭建攻略
本文简单介绍个人博客站点搭建流程,相关原理以及白嫖资源推荐。
域名
域名选购
一个好记的域名,能很大程度的增加网站的访问量,甚至还有收藏价值(传闻天猫的域名tmall.com就是从个人手上几百万买下来的), 现在各大互联网厂商都进入了云时代,购买域名变得十分简单,阿里云、腾讯云显著位置都能找到购买域名的地方, 越短的域名通常越贵,我们可以选择稍微长一点的域名
域名备案
收到国家信息部管理,域名若指向国内的服务器的,都需要备案,域名商行通常会提供备案服务及教程,以阿里云为例,从申请备案到寄送幕布到信息填报,整个过程顺利的话通常两个星期左右。
如果嫌麻烦的话,可以选择购买国外的服务器,可以免去备案流程。
域名解析
我们都知道,在浏览器中浏览页面时浏览器做的第一件事就是对域名进行DNS解析(直接输入ip地址可以免去这个过程),DNS全称Domain Name System,是一个将域名和IP地址相互映射的服务,能买域名的地方通常都能提供域名解析服务,在阿里云或腾讯云购买域名通常会配套有域名解析服务:
搭建博客的过程我们同城会用到两种记录类型,分别是A记录和CNAME,A记录将域名指向一个IPV4地址,CNAME则将域名指向另一个域名。A记录通常使用在将站点部署在服务器的场景,CNAME则更多使用在CDN加速、图床、第三方站点托管服务等场景。
静态博客
原理
做好域名相关工作后,可以开时着手准备站点,博客网站出于SEO考虑,通产会使用纯静态或者SSR的方式,但由于SSR成本更高,所以社区中更多都是存静态的框架。不同的框架做的事情都大同小异:
a=>operation: 原始内容(markdown或者其他富文本)
b=>operation: 附加内容进行编译
c=>operation: 输出HTML
a->b->c
最终你的博客站点就是每篇博客对应一个HTML文件
框架选型
大部分的静态博客框架都是采用了模板语法,你可以选择一些优秀的主题直接使用或者进行改造,或者自己写一个独一无二的模板。
- jekyll 使用的是 liquid 模板语法,本站点就是使用Jekyll搭建的( 这里 有相关记录),同时Jekyll也是Github Page的默认框架
- hexo 则是一个node博客框架,它做的事情也是将Markdown解析渲染为HTML
这两个框架都有着庞大的生态,丰富的主题和插件,当然你也自己写一套框架来完成从内容到页面的转换
自动构建与资源部署
当我们准备好博客项目,纪要考虑构建与部署的问题了。当我们写完一篇博客后,需要完成页面资源生成和将资源暴露在公网这两个步骤,才能让博客有机会被其他人看到。
Githup Page
当我们用git来管理博客项目时,push事件是最好的自动化触发时机。Github Page 在你每次推送时会进行自动构建,并将构建产物托管在Github的服务器中:
Vercel
vercel是一个三方托管服务,免费且与github无缝对接,支持多种构建动作模板,构建产物也是放在他们自家的服务器上的,上面讲到的Github Page流程,完全可以用它来做到,理论上任何
理论上任何最终产物时可访问的静态资源的框架,都能够当作博客框架使用。
个人服务器
如果你不喜欢白嫖,也可以利用Github Action,控制你的服务器拉取最新内容并触发构建动作(Github目前支持secret key,不用担心信息泄漏),相应的,构建产物这时候在你自己的服务器上,相关流程可以看这篇文章 。
让域名真正访问到静态博客资源
万事俱备,只欠东风。
第三方托管服务自定义域名
当我们的静态资源位于第三方托管服务时,都会有一个自带的域名,如果我们对域名没有要求,那么博客的搭建到这一步其实就结束了。但第三方一般都会支持自定义的域名设置,只需要将我们自己的域名通过CNAME解析到指定的第三方域名就可以了,例如系统,通过设置CNAME记录实现vercel自定义域名
Nginx反向代理
当静态资源部署到个人服务器时,需要做两件事:
- 将域名通过A记录解析到服务器IP
- 配置Nginx反向代理
以下是一个简单的Nginx静态资源代理
server {
listen 80;
server_name www.streakingman.com;
location / {
alias /path/to/html/files;
index index.html;
}
}
CDN加速
内容分发网络将我们的静态资源部署在了各地的边缘服务器上,通过中心进行一系列的调度分发,使用户就近获取内容。设置CDN加速的方法很简单,只需要将我们的域名通过CNAME解析到这个中心的域名即可。
那么问题来了,谁来帮我们把静态资源部署到各地的边缘服务器呢?那就是各CDN服务商,一般都是要钱的,按流量计费,但截至2021年双十一腾讯云新用户是可以白嫖10个G一个月的流量包的
早些时候可以白嫖六个月-_-
其他
图床
图文并茂的博客显然更有意思,这时候我们需要用到图床。七牛云 可以白嫖10G的储存空间,只需要配置相应的CNAME解析即可
除此外Githup仓库 也可以用来白嫖图床(虽然官方并不建议这么做,有兴趣的自行搜索)
HTTPS
各云服务上一般都会提供免费的证书,如果域名也是同一个服务商的那一般可以直接在平台上进行证书签发部署
评论系统
静态博客中的评论系统一般需要借助第三方完成(客户端进行评论拉取),gitment 是一个白嫖Github Issue来进行数据持久化的一个评论系统,很鸡贼的方案,与白嫖Github当图床有异曲同工之妙,本站也介入了gitment,欢迎评论体验流程。