基于 hugo 构建个人博客

基于 hugo 构建个人技术博客剥离了数据库和动态脚本的复杂性，让你能完全专注于写作和技术分享。另外，hugo 的工作方式可以非常自然地借助 git 对文章进行版本管理，特别适合有一定命令行基础的人。

1. 准备工作，安装必要工具

需要安装两个基础软件：

Git：用于文档版本管理和后续的主题安装。
Hugo (扩展版)：核心的静态网站生成器。建议安装带有“extended”后缀的版本，以确保支持Sass/SCSS等现代主题特性。
- macOS用户：brew install hugo
  国内用户可能需要为 brew 配置 proxy，例如为 brew 配置 SOCKS5 代理：
  export all_proxy=socks5://$HOST:$PORT
  或者为 brew 配置 HTTP 代理：
  export http_proxy=http://$HOST:$PORT
- Windows用户：可以使用 scoop install hugo-extended，或从Hugo GitHub Releases页面下载。
安装完成后，在终端输入 hugo version 验证是否成功。
注意：不同 hugo 主题对 hugo 的版本有一定需求，可以从 Hugo GitHub Releases 页面下载特定版本

2. 搭建博客骨架

在终端执行以下命令，Hugo会为你生成一个包含所有必要目录的站点骨架。

# 创建一个名为 "my-blog" 的站点（可替换为你喜欢的名字）
hugo new site my-blog
Congratulations! Your new Hugo site was created in ./my-blog.

Just a few more steps...

1. Change the current directory to ./my-blog.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

# 进入站点目录
cd my-blog

# 目录下生成了 `archetypes`、`content`、`themes`等文件夹和 `hugo.toml` 配置文件
tree
.
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes

8 directories, 2 files

# 初始化Git仓库，方便后续管理主题和代码
git init

# 为项目配置 .gitignore 文件

.gitignore 文件示例：

# 构建输出目录
/public/

# 本地构建缓存与锁文件
/resources/
/.hugo_build.lock

# 编辑器/IDE辅助文件
/assets/jsconfig.json
/hugo_stats.json

# 操作系统无关文件
.DS_Store
Thumbs.db

3. 选择并配置主题

Hugo本身不带默认样式，你需要选择一个主题。

挑选主题：访问 Hugo官方主题市场，这里有数百个开源主题供你挑选。
安装主题：最推荐的方式是使用 git submodule 将主题添加到你的项目中。这样便于以后更新主题。以 PaperMod 为例：
```
# 将主题以子模块形式添加
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
```
这里选择 PaperMod 是因为 PaperMod 最流行，且文档完善。

启用主题：打开站点配置文件 hugo.toml（也可能是 config.toml 或者 hugo.yaml），添加或修改主题配置

theme = 'PaperMod'
# 还可以在这里配置网站标题、语言等基本信息
title = '我的技术博客'
languageCode = 'zh-cn'

4. 创作内容，写下第一篇文章

所有文章都存放在 content 目录下，不同的 hugo 主题对文章目录组织方式有不同的要求，需要参考 hugo 主题的要求。

使用Hugo命令可以快速创建一个带有固定头部信息（Front Matter）的Markdown文件。

hugo new content tutorial/hugo-usage.md

打开这个文件，你会看到类似下面的内容。在 +++ 之间是文章的元数据（标题、日期、是否为草稿等），正文则使用标准的Markdown语法撰写。

---
title: '我的第一篇技术笔记'
date: 2024-05-20T10:00:00+08:00
draft: true  # 草稿模式，预览时需特殊处理
---

## 今日学习要点
今天开始用Hugo搭建博客，感觉**非常高效**！

5. 本地预览，实时查看效果

在站点根目录下启动Hugo的开发服务器。

# --disableFastRender: For full rebuilds on change
# --buildDrafts: or -D, include content marked as draft
hugo server --disableFastRender --buildDrafts

终端会显示一个本地地址（通常是 http://localhost:1313/），在浏览器中打开它，就能实时看到网站效果了。确认文章无误后，记得将md文件头部的 draft 改为 false。

6. 构建与部署，让你的博客上线

当你完成文章写作，检查内容后，就可以构建用于生产环境的静态文件并部署到服务器了。

构建：在站点根目录运行 hugo 命令（不加任何参数）。Hugo会将所有内容整合，生成一个完整的网站，存放在 public 文件夹中。
部署：你只需将 public 文件夹内的所有内容上传到你的Web服务器。
- 免费方案 (推荐)：结合 GitHub Pages 可以实现免费托管和自动部署。你只需将包含源码的仓库推送到GitHub，并在仓库设置中启用GitHub Pages，选择 /root 或 /docs 文件夹即可。
- 云服务器：如果你有自己的云服务器，可以将 public 目录上传，并使用 Nginx 等软件进行配置。

参考资料

PaperMod Installation

1. 准备工作，安装必要工具#

2. 搭建博客骨架#

3. 选择并配置主题#

4. 创作内容，写下第一篇文章#

5. 本地预览，实时查看效果#

6. 构建与部署，让你的博客上线#

参考资料#