组件分享之后端组件——基于Go语言的HTML和CSS网站生成器Hugo

近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。

公司主营业务：网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出蕉岭免费做网站回馈大家。

本节分享一个基于Go语言的HTML和CSS网站生成器 hugo ，它针对速度、易用性和可配置性进行了优化。Hugo 获取一个包含内容和模板的目录，并将它们呈现为一个完整的 HTML 网站。Hugo 依赖于 Markdown 文件和元数据的前端，你可以从任何目录运行 Hugo。这适用于您没有特权帐户的共享主机和其他系统。例如我们日常编写一些博客文章，进行快速生成一套静态页面进行分享时可以使用它来进行生成一套静态页面作为我们的博客部署基础。

它支持大量的主题模板，我们可以通过 进行选择相关的主题使用，有兴趣的小伙伴可以进行深入研究一下

基于hugo搭建个人站点

以前使用wordpress搭建网站，插件太多，完善起来比较费时费力。现在，静态博客也很受欢迎，hugo就是GO语言开发的一个静态博客生成器。

mackbook上直接使用 brew install hugo 安装hugo，安装完成后使用 hugo version 来查看hugo的版本。

在Github目录下打开终端，或者cd到Github目录下：

hugo new site site_name

其中，si te_name为github账号名称加上 .github.io ，例如：

hugo new site gary-hertel.github.io

创建成功后会显示一些信息，诸如：

这就表示站点已经创建成功了。

然后进入到站点目录：

cd gary-hertel.github.io

使用 tree 查看目录结构如下：

接下来需要为我们的网站指定一个主题，这里我们选择 even 这个主题:

git clone themes/even

将该主题增加到网站的配置文件中，这样才能生效：

echo 'theme = "even"' config.toml

测试下是否成功，运行：

hugo serve

这里是按照别的教程操作的，但是发生了报错，查看even这个主题的文档后发现有如下内容：

这里提示我们查看 themes/even/exampleSite 目录下有一个示例的 config 配置文件，我们需要将这个文件复制到站点根目录，覆盖原文件，这样才能够使站点生效。配置文件中的信息可以查看一下，然后进行相应的修改。

在站点根目录：

hugo new post/first_article.md

查看 gary-hertel.github.io/content/post 目录下新增了一个 first_article.md 的markdown文档，打开之后对其进行编辑即可，注意将 draft:true 修改为 false .

撰写文章的方法就是通常开发者常用的markdown格式。

在站点根目录下：

Hugo serve

然后就可以在浏览器中输入 进行查看了，在撰写文章或者进行配置修改等等操作时，内容会自动更新。

hugo -d docs

静态页面会保存至站点根目录下的docs文件夹。

每次更新后我们都需要执行一下这条命令。

在github上新建一个公开仓库，名为github用户名加上 .github.io ，例如 gary-hertel.github.io

在仓库的settings的pages设置中，Source那里设置为：

说明如下：

使用hugo搭建个个人博客还是不错的，一开始要花些时间折腾和摸索，后续就使用起来比较方便了，也不需要购买服务器去部署，部署在github上可能国内访问较慢，可以考虑部署到gitee.

利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages

现在个人博客通常有比较多的选择，如果不想要自己购买服务器实现静态博客的发布，可以在、CSDN等平台建立自己的账号并发布，但是原始数据无法在本地管理；如果想要数据完全自己管理，可以使用GitHub或者Gitee Pages功能发布自己的博客，利用Hugo或Hexo等成熟的静态博客将md文件转换成静态网站文件进行快速发布。本文就用来记录如何快速将博客发布到、GitHub以及Gitee Pages三个平台。

我希望的流程当然是主要精力用在写文章，发布的流程最好完全不需要手动处理，但实际情况下手动发布博客的流程大体是：

之前有使用过Travis CI+GitHub+Hexo自动发布到GitHub Pages，但是GitHub的访问经常不那么靠谱，因此想着也能同步到Gitee，并且自动构建Hexo的速度受Nodejs环境部署影响，速度很慢，因此本次计划采用Hugo来构建网站文件，整体流程设计如下：

为了满足博客自动发布流程，首先需要在本地准备好生产环境，以满足快速发布，以此的复杂是为了长期的简单，因此在环境准备阶段我会把所有涉及的工具都记录下来，以方便大家使用以及后边自己回顾，环境准备包含：

Obsidian完成知识积累后，按照ZK-Project-Archive-Blog的流程发布Blog，但是Obsidian的文件相互关联，且附件如何快速复用，需要对Typora和Obsidian都进行简单的配置，确保后续Blog能够快速完成并发布，并且文件仍在Obsidian工程中正常显示；

Typora非常的简洁，而且可以实时预览，在写博客的时候经常会插入一些图片，截图后可以直接粘贴进去，图片也会自动保存在本地，这里需要注意图片的保存路径，在偏好设置里，设置插入图片时复制到指定路径（./resource/），这样复制的图片就会自动保存在当前文件夹下的resource文件夹里，方便后续管理与转移。

在.ssh文件生成id_rsa和id_rsa.pub两个文件；

Hugo 是一个基于Go语言开发的静态博客框架，号称世界上最快的构建网站工具；

命令为： hugo new site myblog

myblog为博客的目录名，可以修改为你自己想取的名字，生成的目录如下：

由于默认主题生成的文章页面有些功能是不需要的，因此需要对themes下文件进行修改：

将config、content和themes三个目录拷贝到新创建的站点目录，将content下替换为文章文件即可。

utterances 是一款基于Github Issue的Github工具，优点主要是无广告、加载快、配置简单，轻量开源。

由于 utterances 是一款Github App，因此 安装utterances 非常简单，只需要授权特定repo权限给 utterances 就可以了,注意一个点：授权的这个repo必须是public的，可以选择多个repo，但是建议选择一个就可以了，也比较安全。

这是当前最简单的配置方法， 也可以在 utterances官方 查看其他配置方法，以及详细的配置参数说明。

Obsidian的安装和使用可参考我的另一篇文章： Obsidian作为第二大脑工具的基本使用和配置

所有环境准备好后，终于要开始启动我们的自动化流程的实现了；

同之前步骤相同，将Gitee密码配置到GitHub Secrets，命名为：GITEE_PASSWORD，所有配置结果如下：

synctogitee.yml

需要绑定Gitee账号到微信公众号，否则最后一步reload pages自动部署Gitee Pages会登录失败，原因是需要短信验证；绑定公众号后则不需要短信验证；其他问题解决可以参考 gitee-pages-action

在Typora完成文章编写后，一键上传所有图片到Gitee图床，拷贝发布到，然后提交到GitHub repo master分支，即可自动部署到GitHub和Gitee Pages；

以上就是我利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages，希望可以帮助大家快速构建自己的个人网站；后边我会继续完善我的第二大脑系统的构建思路和方法。

网站栏目：go语言静态博客 go 静态语言
文章路径：http://chengdu.cdxwcx.cn/article/doogigj.html