如何用Hugo + GitHub Pages + Giscus搭建个人博客

简介

Hugo

Hugo 是一个基于Go语言的静态网页生成器，它可以帮助我们快速创建出具有高度优化性能的静态网站。Hugo具有简单易用的特点，而且支持各种主题和插件，使得我们可以根据自己的需求进行个性化的定制。

GitHub Pages

GitHub Pages 是由GitHub提供的免费的静态网站托管服务。通过将我们的静态网页文件提交到GitHub仓库，我们可以轻松地将我们的博客站点部署到GitHub Pages上，并与全世界分享我们的内容。

安装Hugo

在开始之前，我们需要进行一些准备工作。首先，我们需要在本地安装Hugo。您可以访问Hugo官方网站获得安装指南。

因为我用的是MAC电脑，所以选择的是brew安装方式：

brew install hugo

然而，后来发现许多高级功能（比如打赏、shortcode等）是在hugo扩展版本里才支持的，所以之后又手动下载了hugo扩展版本，然后本地which hugo找到hugo的binary路径，替换成了新版本binary。扩展版本可以在hugo github仓库中找到，release里以hugo_extended开头的就是。

创建并配置Hugo网站

在这一部分，我们将创建一个新的Hugo网站并对其进行配置，您也可以参考官网文档。

初始化Hugo网站

首先，打开终端或命令行工具，并导航到您希望创建Hugo网站的文件夹目录下。

使用以下命令初始化一个新的Hugo网站：

hugo new site myblog
cd myblog
git init

这将在当前目录下创建一个名为 myblog 的新文件夹，初始化一个全新的Hugo网站，并将其作为一个git仓库，后续会上传到git仓库中来持续更新。

选择并应用主题

Hugo提供了许多精美的主题可供选择。您可以从Hugo Themes网站上浏览并选择您喜欢的主题。我选择的是LoveIt。

选择一个主题后，将其下载到您的Hugo网站的themes文件夹下。例如：

cd myblog
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
echo "theme = 'LoveIt'" >> hugo.toml
hugo server

添加博客文章

• 创建新的博客文章
• 编辑博客内容和元数据
• 生成静态网页

部署博客到GitHub Pages

• 创建并设置GitHub Pages仓库
• 配置部署设置
• 将静态网页发布到GitHub Pages上

添加评论功能（使用Giscus）

• 介绍Giscus：基于GitHub Issues的评论系统

参考资料

• hugo官方文档
• LoveIt
• Hugo如何添加评论系统？
• hugo博客增加赞赏功能，基于LoveIt/LeaveIt/FixIt主题
• Hugo 图片懒加载和自适应 CSS 图片占位