使用Hugo+Netlify开发持续发布的静态网站

使用Hugo建立自己的静态站点

介绍

-->Hugo<--是使用Go语言开发的,号称世界上最快的静态网站开发工具。Go语言天然支持多线程,6000个页面的生成时间仅需5秒,确实很快了~

Hugo有非常详细的英文文档(是的,中文文档非常滞后,配套的版本老旧不堪,没法看 /手动捂脸),以及多种多样的主题,据说数目已经超过了-->Hexo<--。

这次自建Blog选择Hugo而不是Hexo的原因,除去对Node.js有点失望之外(这是另一个话题),另一个原因,是已知的比较流行的云平台框架或者工具,大都是Go语言编写而成,比如Dokcer,K8s, Istio,Prometheus,Grafana等等,趁着写博客的功夫研究下Hugo的源码也是可以的。

版本

当前Hugo的版本是0.74.3, 但是要注意的是, 如果想要sass的编译支持(某些主题也需要), 那么请下载并使用extended版本,不知道为啥不能放在一起 /摊手,可能是操作系统编译的缘故吧~~

安装

安装非常简单,Mac/Linux 都可以用brew, Windows下可以用 Chocolatey/Scoop。当然也可以直接去Github下载可执行文件包,windows下只有三个文件,小巧实用,另外还有Docker版本可用。

使用

按照Hugo的官方文档开始使用是个不错的主意,命令行的话就那么几个,但是考虑到总是要用一个主题的,所以个人推荐找一个配置项注释写的比较全的主题先研究(比如我用的这个-->MemE<--), 然后需要深入了解的内容再回过头来看官方的文档即可,没有那么复杂。如果要自己开发主题的话,会涉及到很多内容,不是短时间可以完成的,除非确实有必要,否则不推荐哈。

建站

建新的site,然后建新的页面:

1
2
3
~ $ hugo new site myblog
~ $ cd myblog
~/myblog $ hugo new posts/first.md

此时的站点文件夹上层结构如下:

archetypes :存放default.md,头文件格式,里面是一些基本的配置

content: 存放博客文章(markdown文件)

data:存放自定义模版和数据,导入的toml文件(格式与早先windows下的ini格式比较接近),或者json/yaml

layouts:网站的模板文件

static:静态资源目录

config.toml:网站的配置文件,非常重要,此时为空

themes: 用来存放主题,新建时是空的

使用主题

想要使用主题的话需要做些额外的动作。直接下载并将主题放到themes目录是可以的,但是Netlify的要求是themes作为git repo下的submodule出现,所以我们要先git init, 然后把themes使用git命令加进来,如下,以我使用的主题为例:

1
2
3
~ $ cd myblog
~/myblog $ git init
~/myblog $ git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme

然后将主题的config-examples下的例子拷贝到myblog根目录,覆盖空的config.toml。要注意配置示例文件不是所有的主题都有的,在选择主题是要注意下这个,否则有很多坑要填。

再然后剩下的就是写自己的文字了。

查看调试

使用如下命令,马上可以看到网站的样子:

1
~/myblog $ hugo -D server

会有提示信息,然后打开 http://localhost:1313/, 就可以看到了~

接下来就是自己按照主题的配置信息边写文章边调整了,主要要做的就是调整config.toml的内容,在正式写文章之前会耗用非常多的时间。好在MemE的配置文件写的非常详尽,对于擅长偷懒的我来说再合适不过了。

本地生成静态页

如果使用Netlify的话,实际上这个步骤是不需要的,只需要将myblog的内容直接提交到Github即可。此时要注意要先在Github上生成一个repo,然后git commit/push就可以了。

在本地生成静态网页可以帮你了解生成的大致过程,然后可以查看生成的静态网页的大致组成。命令就一个,如下:

1
~/myblog $ hugo

生成的静态页面的目录是public,使用Netlify的话,这个目录是不需要提交到git的。

此时要注意,每个新的markdown文件的头部都有个draft标记,如果draft是true, 那么不会生成对应的静态页面。


使用Netlify持续发布网站

介绍

Netlify 是一家为静态网站提供托管和 serverless 后端服务的云计算公司。与 GitHub 相比,Netlify 托管的网站速度更快,也更稳定。

这次建Blog把Gitee/Github的pages也都试用了下,不太清楚是不是Gitee的Hugo版本不正确的原因,在部署Gitee的page之后,网站的样式都是错的,而且暂时没有找到修正的方法。Github的page可以正常打开部署后的网站,也可以通过Actions做到持续的部署,但是国内打开确实有难度,时好时坏,而且速度堪忧。

Netlify可以使用Github/Github/Gitlab/BitBucket的账号直接登录, 支持这些平台上代码的直接部署,如果付费的话,也可以用self-hosted-git的形式部署自己的代码,不过价格比较可观,99刀每月,所以先凑合用下吧哈哈~

这里有个hugo发布到Netlify的官方文档可以看: deploying Hugo to Netlify

发布步骤

大致说一下,部署网站的操作真的很简单,

  • 第一步,使用Github上的代码库建立Netlify的站点,选择repo,授权就好了。

  • 第二步,选择构建的参数,对于Hugo的话,默认的命令行是hugo,发布的目录是public, 这里要注意的是需要指定hugo的版本,可以直接在界面上添加variable,也可以使用一个netlify.toml文件,放在代码库里面,名字是HUGO_VERSION, 现在指定版本是 0.74.3即可。

  • 第三步就可以直接构建了,具体的操作是利用一个Ubuntu的docker container来运行所有的构建命令,包括准备代码,构建,清理等等。如果成功,那么会提示你做个preview,有问题可以直接回头改。

  • 第四步就是publish了,之后会有个临时的域名地址给你查看发布后的网站。

  • 这算第五步? Netlify在publish之后会提示你是不是绑定一个域名,如果你有自己的域名,那么直接绑定就好了,如果没有Netlify可以提供一个给你,不过是收费的,我已经有了所以没有用Netlify提供的。

至此,发布大功告成。将来Github上的每次push,Netlify都会自动触发一次构建发布的过程,全自动无需值守,哈哈~~


写完才发现这个可以拆成两篇blog了?

好吧现在没有工作量的要求,就这吧~~~

updatedupdated2020-08-052020-08-05