Netlify 真香!又回到了静态网站

不知脑子又瓦特了,又把网站的程序从WordPress 换成了 Hugo 。之前也写过一篇文章:「使用了静态网页生成器:从WordPress 到 Hugo」,大概是自己贴在知乎上的文章阅读数量最多的一篇🤣。

Host on Netlify

动态网站 vs 静态网站

在8月初的时候,逐渐厌倦了静态网页生成器。为什么?每次写文章总觉得特别的正式,需要打开电脑坐在电脑前编辑文章;写完之后点击保存还不能立即更新在网站上,需要通过一系列步骤:先告诉代码版本管理软件改了哪些地方、点击上传、然后再克隆或者更新到服务器。

这样就觉得整个流程特别的麻烦,特别是写完之后的那些流程。或者是仅仅修改一些地方,比如修改错别字,都要同样进行这些流程。

码文章倒很方便:可以先在某个笔记软件上用讯飞输入法随便写写(边说边写,感觉这样效率高),最后统一发布到网站上。但是就整个网站发布的体验来说,比 WordPress 这样的建站程序要麻烦很多。

所以静态博客的优势到底在哪里?个人觉得下面这两点是非常吸引我的:

  1. 可以使用 Markdown 写文章,这样就可以不用考虑文章排版的问题。
  2. 网站易于维护,不用担心数据库损坏或者被攻击等问题。整个网站就只有自己写的那一堆 markdown 文件和一些文章的配图,只要这些文件没有丢失,网站就不会消失。

Markdown 语法速查,图片来源:https://www.pinterest.fr/pin/558939003759342514/

但是在前一阵子随便看看的时候看到有一个静态网页的发布神器:叫做 Netlify。在它的主页上可以看到它的宣传语:用最快的方式构建最快的网站。确实快,而且免费。

极其朴素的主页

白嫖不香嘛?

那么快速建立一个静态的网站或者想建立一个自己的个人博客,现在的成本可以只降到一个域名的价格:

  1. 一个域名(价格不等,新的非精品 .cn 域名大概二、三十元/年)
  2. Github 账号(免费)
  3. 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