Hugo 博客基于Codespace搭建记录

前言

编译平台:Github Codespaces

发布平台:Github Pages

前置知识

  • Hugo 是一个用 Go 语言编写的静态站点生成器,它针对速度、易用性和可配置性进行了优化,快速灵活。

  • GitHub Pages 由Github提供的静态站点托管服务,可直接将个人、组织或项目的页面托管于 GitHub 库或仓库 (repository) 中。

  • GitHub Codespaces Github提供的云端开发环境。 可通过将配置文件提交到存储库(通常称为“配置即代码”)来为 GitHub Codespaces 自定义项目,这将为项目的所有用户创建可重复的 codespace 配置。

我为什么选择Hugo?

    目前无服务器博客大多是Hexo加 Github Page,Hexo比较容易上手,并且有丰富的主题。每个CS专业的人基本都有Github账户,Github Pages又是免费的,配合Cloudflare的DNS解析和CDN加速,也能取得不错的访问速度。

    Hexo搭建比较简单,搭建过程就建立了Github仓库访问,完成搭建以后,只需要专注于写作,使用"-g"和"-d"命令就完成静态文件生成和自动发布到Github操作。

    Hugo搭建比Hexo麻烦,并且Hexo只需要"-d"即可直接发布到Github Pages,尽管Hugo官方文档比较糟糕,且易用性不如Hexo,但我选用Hugo的原因只需要一个理由——快,Hugo使用Go语言开发,在生成静态文件时会判定源文件是否有改动,无改动的则不需要重新生成。有博主测评同样200篇博文,采用Hexo需要10分钟生成静态网页,而Hugo只需要10秒钟,仅我个人测试,同样只有Example,Hexo需要一分多钟,而Hugo只需要毫秒。

新建仓库

    为了保护博文不被直接剽窃(尤其workflow文件包含了public仓库key,如果被他人拿到,是可以通过SSH纂改博客),建立两个Repositories,分别存放源码和编译成品。

名称 属性 说明
Yourname.blog Private 用于存放博客源码
Yourname.github.io Public Github Pages 发布站点

克隆仓库

为了方便你使用codespace部署,我已经将hugo extended相关文件开源。

访问 https://github.com/devil6117/hugo-codespaces-starter

将该仓库代码上传到你博客的private仓库中,你也可以直接从你的仓库中impoert code,像下图这样。

注:如果你采用这类方式,你的仓库页面会出现代码来自某某,尽管他对外不可见,如果你和我有一样强迫症,还是自己下载再上传一下吧。

部署环境

(1) 创建codespace实例

打开private仓库,直接以该仓库创建实例。

等待codespace环境搭建。

(3) 测试codespace

注:建议Open in Visual Studio Code。

在codespace的终端运行"hugo server"

测试成功。

编写内容

博文路径:" \content \post \ "

博文以文件夹形式存储,文本文件命名为index.zh-cn.md,与该博文有关的资源文件都放置在该文件夹内。

过程略。

部署自动发布

workflow 代码

workflow代码已包含在.github/workflow下,名为build.yml,修改build.yml中的参数。

external_repository 为网站仓库,如果有域名,在cname填写上要绑定的域名并取消注释符号,否则每次push都会覆盖。

ssh-keygen

生成密钥在以下两种方式二选一:

1
ssh-keygen -t rsa -c "Yourname@mail.com"

更推荐使用ed25519方式,除非你的操作系统不支持。

1
ssh-keygen -t ed25519 -C "Yourname@mail.com"

将引号内邮箱替换成Github邮箱。

在".ssh"文件夹(Windows路径:C:\Users(Username).ssh)运行Bash,输入以下命令复制公钥和私钥。不要使用记事本或其他工具,容易发生格式改变导致复制后的内容不被识别。

1
clip < ~/.ssh/id_ed25519.pub

公钥填入网站仓库的 Deploy Key 处,如图所示。

记得勾选写入权限,如图所示。

静态文件是要上传到这个仓库的。

私钥填入workflow。

1
clip < ~/.ssh/id_ed25519

如下图所示,名称填下框文本,Secret框内填私钥。

1
ACTIONS_DEPLOY_KEY

效果预览

workflow 成功运行。

网站仓库成功被 push。

通过域名访问网站,能正常访问。

上图使用的主题是CaiJimmy的stack。

主题地址:https://themes.gohugo.io/themes/hugo-theme-stack/

参考链接

感谢Zenlian提供的Actions部署代码。

原文链接 : https://zenlian.github.io/github-actions-hugo/

Licensed under CC BY-NC-SA 4.0
使用 Hugo 构建
主题 StackJimmy 设计