创建 Markdown 文件
- 使用 Markdown 编写笔记。
将 Markdown 文件转换为本地网站
安装 Hugo 并配置网站文件夹
- 按照指南安装 Hugo。
- 安装 PowerShell。
- 打开
powershell,运行cd <loc>,切换到希望存放网站文件的位置。 - 在
powershell中运行hugo new site <site_name>,使用 Hugo 创建新网站。 - 编辑
hugo.toml文件,暂时将baseURL留空。 - 在
powershell中切换到网站文件夹。 - 运行
hugo new docs/test.md创建一篇内容文档。
安装主题并添加内容
- 运行
git init。 - 在 Hugo 选择喜欢的主题,依次进入 Download → Install(运行方法 1 中的
git clone命令,以及方法 2 中的git submodule add命令)。 - 编辑
hugo.toml文件,添加theme = <theme_name>。 - 编辑内容文件,将
draft设为false,并添加一些内容。 - 运行
hugo server,然后在本地访问http://localhost:1313/。
将网站部署到 GitHub
将网站框架推送到 GitHub
- 创建一个空的 GitHub 仓库。
- 复制
git remote add origin <website_path>.git命令。 - 添加
README.md文件并推送:git add README.md→git commit -m "initial commit"→git branch -M main→git remote add origin <website_path>.git→git push -u origin main。
为 GitHub Pages 设置分支
- 创建
gh-pages分支。 - 在仓库中依次进入 Settings → Actions → General,启用
Read and write permissions,然后保存。
创建 GitHub 工作流
- 在本地仓库的
.github/workflows/目录中创建名为hugo.yaml的空文件。 - 将 HUGO: Host on GitHub Pages 中“Step 6”的 YAML 代码复制到
hugo.yaml。 - 修改
hugo.yaml中指定的 Hugo 版本,使其与本地版本一致(在终端输入hugo version查看)。
Git 推送
- 依次运行
git add .→git commit -m "add the first test page"→git push。 - 等待 GitHub 部署网站。
- 通过
https://<user_name>.github.io/<repo_name>/访问网站。
如何更新网站
- 在
content文件夹中添加(hugo new <path/filename>)或修改 Markdown 文件;记得将这些文件中的draft设为false。 - 运行
hugo server在本地重新构建网站。 - 发布网站:
git add .→git commit -m "message"→git push。 - 验证发布结果。
如何配置网站
- 将
themes/<theme_name>/config.toml的内容复制到hugo.toml。 - 修改
hugo.toml中的网站标题、avatarURL和社交链接等参数。 - 若要在主页添加菜单(例如右上角的标签),请参考
config.toml中的菜单设置,配置网站根目录的hugo.toml。 - 推荐的内容文件结构和组织方式见此处。
- 要启用 LaTeX 风格的公式显示,在
hugo.toml的params.page.math项下设置enable = true。
添加图标
LoveIt 使用 Font Awesome 提供的图标库,可以将图标融入文章内容。
图标引用遵循 Markdown 语法。只需使用
:icon_name:格式即可插入图标,具体的icon_name可在 Font Awesome 网站查找。例如,要插入代码图标,可以在此处找到对应的 HTML 代码
<i class="fa-solid fa-code"></i>。随后使用:fa-solid fa-code:即可插入图标,其中fa-solid fa-code(即icon_name)直接取自该 HTML 代码。