不知脑子又瓦特了,又把网站的程序从WordPress 换成了 Hugo 。之前也写过一篇文章:「使用了静态网页生成器:从WordPress 到 Hugo」,大概是自己贴在知乎上的文章阅读数量最多的一篇🤣。
动态网站 vs 静态网站
在8月初的时候,逐渐厌倦了静态网页生成器。为什么?每次写文章总觉得特别的正式,需要打开电脑坐在电脑前编辑文章;写完之后点击保存还不能立即更新在网站上,需要通过一系列步骤:先告诉代码版本管理软件改了哪些地方、点击上传、然后再克隆或者更新到服务器。
这样就觉得整个流程特别的麻烦,特别是写完之后的那些流程。或者是仅仅修改一些地方,比如修改错别字,都要同样进行这些流程。
码文章倒很方便:可以先在某个笔记软件上用讯飞输入法随便写写(边说边写,感觉这样效率高),最后统一发布到网站上。但是就整个网站发布的体验来说,比 WordPress 这样的建站程序要麻烦很多。
所以静态博客的优势到底在哪里?个人觉得下面这两点是非常吸引我的:
- 可以使用 Markdown 写文章,这样就可以不用考虑文章排版的问题。
- 网站易于维护,不用担心数据库损坏或者被攻击等问题。整个网站就只有自己写的那一堆 markdown 文件和一些文章的配图,只要这些文件没有丢失,网站就不会消失。
Markdown 语法速查,图片来源:https://www.pinterest.fr/pin/558939003759342514/
但是在前一阵子随便看看的时候看到有一个静态网页的发布神器:叫做 Netlify。在它的主页上可以看到它的宣传语:用最快的方式构建最快的网站。确实快,而且免费。
极其朴素的主页
白嫖不香嘛?
那么快速建立一个静态的网站或者想建立一个自己的个人博客,现在的成本可以只降到一个域名的价格:
- 一个域名(价格不等,新的非精品 .cn 域名大概二、三十元/年)
- Github 账号(免费)
- Netlify 账号(一定用量免费,小站完全够用)
当然,如果不想使用自己个性的域名,完全可以使用这些静态网站部署工具所提供的默认域名,比如 https://自己随便取.github.io
或者 https://自己随便取.netlify.app
等等。
这里又出了一个问题:代码托管仍需要 Github,那为什么不用 Github Page 直接部署并建立一个网站呢?因为据说 Github 屏蔽了百度蜘蛛,百度可能无法抓取里面的内容、从而导致网站迟迟不被收录。
推荐使用 Hugo 构建网站
为什么推荐 Hugo 作为静态网页生成器呢?Hugo 构建网页的速度非常快,比其他静态网页生成器快得多。
具体如何使用 Hugo 构建一个个人网站,可以参看开头的那篇文章「使用了静态网页生成器:从WordPress 到 Hugo」(这篇文章大概忘记复制粘贴到公众号里了,可以去知乎或者是小栋同学网站上找找),或者之后再理一理、重新写一篇更为简洁一点的教程。
Netlify 用最快的方法构建最快的网站
当使用 Github 将网站项目文件夹里的所有东西上传完毕之后,那么就可以打开 Netlify 给予它访问 Github 仓库的权限。
当 Netlify 读取完你的网站所属仓库时,会自动识别你所用的静态网页生成器的程序,然后只要点击部署并发布,你的网站就会在 Netlify 被构建并且被发布。
在此之后,这一切都是自动的:包括当修改了哪篇文章之后:只要Github上你网站的仓库发生了变化,Netlify 就会自动重新构建网页文件并且自动发布。
构建网站的控制台
自定义域名
没有一个自定义的域名,那么这个个人网站就感觉缺了那么一点点意思。
在添加完域名之后,需要在自己的域名供应商那边将 dns 服务器改成 Netlify 的服务器,这样可以享受到 Netlify 所提供的 cdn 加速服务。
自定义域名
Netlify 也能自动为你的网站加上 https,但是实测我的网站域名后缀 .sh.cn 就不行。需要自己去重新申请一个证书,并将证书和密钥粘贴到 Netlify 内即可。
为你的网站加上 https
一些遇到的坑
在整个使用过程中体验非常流畅,也不需要借助额外的教程,只要根据 Netlify 上的指令一步一步完成即可。但是也遇到了以下几点致命的问题:
- 网站构建失败:虽然 Netlify 可以自动检测网站程序,但是最好能够匹配电脑上装的那个静态网页生成器的版本。所以,可以在下方的位置修改 Netlify 构建网站的静态网页生成器版本号:
Build & deploy
–>Continuous Deployment
–>Enviroment
–>Environment variables
,填入HUGO_VERSION
0.76.3
(具体版本号以使用的为准)
示例
- 自定义域名不生效:如果一切操作都没有错的话(改 DNS 服务器等),那要做的就是:等待。
- 是否能上传前端应用?可以。目前使用 react.js 制作的「纸记卡片 Paper MEMO」网页应用依旧可以使用:https://xd.sh.cn/pm