概述

基于Hugo和Github Pages搭建个人博客是一件非常成熟简单的事情，你不需要看懂html和css源码，只需要修改几个配置就可以搭建出一个静态页面。你可以通过这里来查看我基于这套框架搭建的个人网站。

最近，我关注的PyTorch大神ezyang也将个人博客迁移至hugo，ezyang’s blog, 说明它足够稳定和强大。

理论上，只需要几十分钟就可以实现整个博客的搭建， 我参考的视频教程。

安装hugo

以macos为例，需要先安装homebrew和git，之后参考官方指南

brew install hugo
cd ~/Desktop
hugo new site blogs

此时桌面下就生成了blogs目录，当然，你可以自定义它要存放的位置。

安装主题

以papermod主题为例：

cd blogs/themes
git clone https://github.com/adityatelange/hugo-PaperMod.git

你可以修改 blogs 下的hugo.yml或者叫hugo.toml, 设置theme = “PaperMod” 你可以参考这个示例文件来配置你的网站

例如，你可以通过[params]来控制是否显示阅读时间、是否打开评论区、时间样式、作者等等等等，你甚至可以直接把文件丢给Gemini来帮你快速完成你想要的样式。 你可以通过[params.homeInfoParams]来控制主页标识，通过[[menu.main]]来管理你的菜单栏。

预览

在 blogs/content下添加一个md文件，例如：

---
title: "About"
layout: "single"
url: "/about/"
summary: "about YuZhouye"
---
内容

在blogs目录下执行hugo server就可以预览，你可以访问本地端口http://localhost:1313/来实时查看你的修改

创建Github Pages

在github下新建一个项目，通常是你的用户名.github.io，在终端执行：

hugo --baseUrl="你的用户名.github.io"

此时会生成一个public文件夹，你在blogs下的修改，hugo会帮你在public下生成对应的html文件，此时只需要将文件夹与你的Github Pages绑定即可。

cd public
git init
# 连接你的项目
git xxxx
git add .
git commit -m'xxx'
git push -u origin main

push前，你可以执行hugo --cleanDestinationDir，以清理缓存。 此时需要等待Github Pages部署，稍过几分钟就可以通过访问你的用户名.github.io来访问你的个人博客了。

添加评论系统

以giscus为例，它真的很简单，首先，需要在[params]中设置comments = true。在layouts/partials/comments.html中写入一些内容，就可以生效了，这个目录和文件可能不存在，可能需要你自己创建。

内容怎么填写？访问giscus指南，按照要求配置几个选项，并且保证你的项目是公开的且打开discussion功能，配置内容可以根据自己的喜好配置。完成后，向下滚动，可以出现一份代码，将它粘贴到你的comments.html中去。例如：

<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

此时，评论区就成功启用了，它依赖github账号。

添加访客计数

基于busuanzi进行计数，在layouts/partials/extend_footer.html中写入一些内容，就可以生效了，同样地，这个目录和文件可能不存在，可能需要你自己创建。你需要写入：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

还需要修改主题的layouts/partials/extend_footer.html，推荐使用gemini生成。

结语

这一套应该是我摸索出的最简单的博客搭建方法了，因为是事后写博客，难免有不足之处，欢迎评论+建议。