1. 为什么需要个人笔记网站在这个信息爆炸的时代我们每天都会接触到大量有价值的内容。你可能和我一样经常遇到这样的困扰收藏的文章太多找不到笔记分散在各个平台想分享知识给朋友却要一个个发送链接。一个专属的个人笔记网站能完美解决这些问题。我搭建自己的笔记网站已经三年了它成了我的第二大脑。所有读书笔记、技术心得、生活灵感都集中在这里随时随地可以查阅和分享。更棒的是完全由自己掌控数据不用担心平台倒闭或内容消失。2. 搭建前的准备工作2.1 技术选型考量对于个人笔记网站我推荐使用静态网站生成器。经过对比Hugo、Jekyll和Hexo后我选择了Hugo。原因有三首先Hugo的构建速度最快我的500篇文章10秒内就能完成其次它有丰富的主题生态最重要的是它不需要依赖复杂的运行环境一个二进制文件就能搞定所有事情。2.2 必备工具清单Hugov0.110.0或更高版本Git版本控制必备文本编辑器VS Code或Sublime TextGitHub账号用于免费托管域名可选但强烈推荐提示建议在本地开发环境使用Windows Subsystem for Linux(WSL)或macOS终端能获得更好的命令行体验。3. 从零开始搭建步骤3.1 基础环境搭建首先安装Hugo以macOS为例brew install hugo验证安装hugo version创建新站点hugo new site my-notes cd my-notes添加主题以Ananke为例git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo theme ananke config.toml3.2 内容结构设计合理的目录结构能让你后续维护事半功倍content/ ├── posts/ # 主博客区域 │ ├── tech/ # 技术分类 │ ├── life/ # 生活分类 ├── about.md # 关于页面 ├── contact.md # 联系页面创建第一篇笔记hugo new posts/first-note.md3.3 关键配置详解config.toml是网站的核心配置文件这几个参数必须设置baseURL https://yourdomain.com languageCode zh-CN title 我的知识库 theme ananke [params] description 记录与分享我的学习历程 dateFormat 2006-01-02 # 符合中文习惯4. 深度定制与优化4.1 主题个性化调整大多数Hugo主题都支持通过config.toml自定义。以Ananke为例可以添加[params] favicon favicon.ico logo images/logo.png primary_color #3a86ff # 修改主题色要深度修改样式建议在static/css/目录下创建custom.css/* 增大中文阅读舒适度 */ article { line-height: 1.8; font-size: 16px; }4.2 搜索功能实现静态网站实现搜索的完美方案安装Lunr.js搜索插件npm install hugo-lunr --save-dev创建搜索模板参考主题文档在config.toml启用JSON输出[outputs] home [HTML, JSON]4.3 评论系统接入我推荐使用Twikoo它是基于腾讯云开发的轻量评论系统注册腾讯云开发账号获取环境ID在主题模板中插入Twikoo组件div idtcomment/div script srchttps://cdn.jsdelivr.net/npm/twikoo1.6.7/dist/twikoo.all.min.js/script script twikoo.init({ envId: 您的环境ID, el: #tcomment }); /script5. 部署与持续维护5.1 免费托管方案GitHub Pages是最经济的方案创建 .github.io仓库设置GitHub Actions自动部署name: GitHub Pages on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - uses: actions/setup-gov2 with: go-version: 1.16 - run: go install github.com/gohugoio/hugolatest - run: hugo --minify - uses: peaceiris/actions-gh-pagesv3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public5.2 自定义域名配置在域名注册商处添加CNAME记录指向GitHub在仓库根目录添加CNAME文件yourdomain.com在GitHub Pages设置中验证域名5.3 内容更新流程我采用的Markdown写作工作流本地创建新笔记hugo new posts/2023/note-title.md使用Typora实时预览编辑本地测试hugo server -D提交变更git add . git commit -m add new note推送到GitHubgit push origin main6. 高级技巧与避坑指南6.1 图片优化方案我的图床解决方案使用PicGo腾讯云COS自动上传在Markdown中使用相对路径添加懒加载提升性能img> 
长河君 · 2026/11/4 9:00:34 · 阅读 1.2k 使用Hugo搭建个人笔记网站的完整指南
1. 为什么需要个人笔记网站在这个信息爆炸的时代我们每天都会接触到大量有价值的内容。你可能和我一样经常遇到这样的困扰收藏的文章太多找不到笔记分散在各个平台想分享知识给朋友却要一个个发送链接。一个专属的个人笔记网站能完美解决这些问题。我搭建自己的笔记网站已经三年了它成了我的第二大脑。所有读书笔记、技术心得、生活灵感都集中在这里随时随地可以查阅和分享。更棒的是完全由自己掌控数据不用担心平台倒闭或内容消失。2. 搭建前的准备工作2.1 技术选型考量对于个人笔记网站我推荐使用静态网站生成器。经过对比Hugo、Jekyll和Hexo后我选择了Hugo。原因有三首先Hugo的构建速度最快我的500篇文章10秒内就能完成其次它有丰富的主题生态最重要的是它不需要依赖复杂的运行环境一个二进制文件就能搞定所有事情。2.2 必备工具清单Hugov0.110.0或更高版本Git版本控制必备文本编辑器VS Code或Sublime TextGitHub账号用于免费托管域名可选但强烈推荐提示建议在本地开发环境使用Windows Subsystem for Linux(WSL)或macOS终端能获得更好的命令行体验。3. 从零开始搭建步骤3.1 基础环境搭建首先安装Hugo以macOS为例brew install hugo验证安装hugo version创建新站点hugo new site my-notes cd my-notes添加主题以Ananke为例git init git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke echo theme ananke config.toml3.2 内容结构设计合理的目录结构能让你后续维护事半功倍content/ ├── posts/ # 主博客区域 │ ├── tech/ # 技术分类 │ ├── life/ # 生活分类 ├── about.md # 关于页面 ├── contact.md # 联系页面创建第一篇笔记hugo new posts/first-note.md3.3 关键配置详解config.toml是网站的核心配置文件这几个参数必须设置baseURL https://yourdomain.com languageCode zh-CN title 我的知识库 theme ananke [params] description 记录与分享我的学习历程 dateFormat 2006-01-02 # 符合中文习惯4. 深度定制与优化4.1 主题个性化调整大多数Hugo主题都支持通过config.toml自定义。以Ananke为例可以添加[params] favicon favicon.ico logo images/logo.png primary_color #3a86ff # 修改主题色要深度修改样式建议在static/css/目录下创建custom.css/* 增大中文阅读舒适度 */ article { line-height: 1.8; font-size: 16px; }4.2 搜索功能实现静态网站实现搜索的完美方案安装Lunr.js搜索插件npm install hugo-lunr --save-dev创建搜索模板参考主题文档在config.toml启用JSON输出[outputs] home [HTML, JSON]4.3 评论系统接入我推荐使用Twikoo它是基于腾讯云开发的轻量评论系统注册腾讯云开发账号获取环境ID在主题模板中插入Twikoo组件div idtcomment/div script srchttps://cdn.jsdelivr.net/npm/twikoo1.6.7/dist/twikoo.all.min.js/script script twikoo.init({ envId: 您的环境ID, el: #tcomment }); /script5. 部署与持续维护5.1 免费托管方案GitHub Pages是最经济的方案创建 .github.io仓库设置GitHub Actions自动部署name: GitHub Pages on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - uses: actions/setup-gov2 with: go-version: 1.16 - run: go install github.com/gohugoio/hugolatest - run: hugo --minify - uses: peaceiris/actions-gh-pagesv3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public5.2 自定义域名配置在域名注册商处添加CNAME记录指向GitHub在仓库根目录添加CNAME文件yourdomain.com在GitHub Pages设置中验证域名5.3 内容更新流程我采用的Markdown写作工作流本地创建新笔记hugo new posts/2023/note-title.md使用Typora实时预览编辑本地测试hugo server -D提交变更git add . git commit -m add new note推送到GitHubgit push origin main6. 高级技巧与避坑指南6.1 图片优化方案我的图床解决方案使用PicGo腾讯云COS自动上传在Markdown中使用相对路径添加懒加载提升性能img>