Deploy weblog site with hugo
使用 Hugo 构建静态博客,并快速免费部署。
几个静态网站构建工具对比
| name | starts | forks | first released | language |
|---|---|---|---|---|
| jekyll | 50k | 10k | Nov, 2008 | Ruby |
| Hexo | 40k | 4.9k | Oct, 2012 | TypeScript |
| Hugo | 80k | 7.8k | Jul, 2013 | Go |
| VuePress | 2.5k | 0.9k | Apr, 2018 | TypeScript |
这几个工具个有优缺点
- jekyll :GitHub 最古老最多人关注,构建工具依赖 Ruby 和相关依赖包,在最新的 macOS 系统上安装麻烦,依赖包兼容性差;
- Hexo :中文主题多但自身官方文档不完整且混乱;
- VuePress :适合开源软件项目简陋官网和文档,易于通过 Vue 编写扩展,但默认缺乏最基本分类 (categories)、标签 (tags) 等静态博客功能。
- 其他
- astro 类似整合 Vue 和 next.js 为一体的工具,强大而复杂。
最终解决方案 hugo + Cloudflare 的方案
在 Cloudflare 上部署 hugo 最新版本构建的静态博客。
- 构建工具使用 hugo,安装简单只有一个二进制文件、构建速度快、文档完善;
- 静态页面托管、域名、SSL 证书都是用 Cloudflare ,免费且稳定;
部署步骤
- 以此文编写时刻为例,按 hugo 官方文档是用构建工具版本为 0.147.2, 生成项目后,添加 markdown 页面内容;
- 安装构建工具参考命令
CGO_ENABLED=1 go install -v -tags extended github.com/gohugoio/hugo@v0.147.2 - 如果是用官方文档推荐的默认 ananke 主题,需要锁定它的版本
cd themes/ananke ; git checkout v2.12.0
- 安装构建工具参考命令
- 提交内容项目到 GitHub 仓库;
- 在 Cloudflare 上创建项目,选择 hugo 构建工具,选择 GitHub 仓库,等待构建完成;
- 配置域名和 SSL 证书,完成。
注意:
- Cloudflare Pages 如果不通过环境变量指定 hugo 版本,默认会使用 0.118.2 版本,导致构建失败;
- 设置环境变量
HUGO_VERSION和前面生成项目时指定的版本一致即可。
最终方案的效果就是当前博客的样子。
自定义 CSS 样式
根据使用 theme 不一样可能要按需修改,以 themes/ananke 为例。
- 根目录下新建 layouts/partials/head-additions.html 文件, 内容为
<link rel="stylesheet" href="{{ "css/main.css" | relURL }}"> - 根目录下新建 static/css/main.css ,文件内容为要添加的自定义 CSS 样式
工作原理, themes/ananke 会在 baseof.html 引入 partials/head-additions.html 子模板,默认从根目录开始加载文件覆盖(如有)。