在建设个人blog网站的路上，经历了Wordpress，源码部署，到现在的Hugo框架。在此也总结一下经验：
- Wordpress虽然已经有很多一件部署的脚本了，但也还是要有自己的服务器，域名以及一些动手能力，另外数据转移也有些麻烦
- 源码部署网站我一直用的是基于Django的博客系统界面简洁美观，文档也很详细，但是需要自己买域名，要备案，不备案的话需要买个香港的服务器，如果不是经常写东西，性价比不高
- Hugo以前经常看见没用过，这次正好体验一下
Hugo在Mac电脑上的安装和基础使用
关于Hugo的介绍这里不多介绍，这里有官方网站。
Hugo建站的流程可总结为以下几步：
- 安装Hugo
- 建立Hugo站点
- 安装配置主题
- 编写文章
- 启动本地Web服务器查看站点
- 推送站点文件到GitHub
- 使用Cloudflare托管站点
完成上述步骤后即可拥有自己的博客网站了，全程用到的技能点就是Hugo的安装，GitHub的简单实用以及Cloudflare的托管配置，全程免费，没有任何费用，本篇文章记录也就到此结束了。
当然为了站点的美观和个性化，以及更好的使用体验，后续文章将介绍：
- 自定义网站域名
- 使用图床存储网站的图片
安装
官方也有详细的安装文档Installation，Mac上推荐使用Homebrew安装。
brew install hugo
安装成功后，查看Hugo版本信息（下文有用），我这里可以看到版本信息是Hugo v0.114.0
xudashuai@mbp14 $ hugo -v
WARN deprecated: --verbose was deprecated in Hugo v0.114.0 and will be removed in a future release. use --logLevel info
Total in 2 ms
Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
Run `hugo help new` for details.
创建站点
Hugo的创建站点命令为：hugo new site 站点名称，接下来我将创建一个名为TestSite的站点进行全程的演示。
xudashuai@mbp14 $ hugo new site TestSite
Congratulations! Your new Hugo site was created in /Users/xudashuai/Desktop/blogs/TestSite.
Just a few more steps...
1. Change the current directory to /Users/xudashuai/Desktop/blogs/TestSite.
2. Create or install a theme:
- Create a new theme with the command "hugo new theme <THEMENAME>"
- 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/.
然后按照提示信息做完1-5步
- 进入站点目录
xudashuai@mbp14 $ cd TestSite
- 安装主题
我这里随便安装了一个主题hugo-book，更多主题请浏览Hugo Themes。
我这里使用git clone的方式将主题包下载到站点的themes文件夹下，其他安装方式请查看对应主题的介绍页面。
xudashuai@mbp14 $ git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book
- 修改站点配置，指定使用的主题名
编辑hugo.toml文件，指定刚才安装的主题。
baseURL = 'https://example.org/'
languageCode = 'zh'
title = 'My New Hugo Site'
theme = 'hugo-book'
- 编写新文章
Hugo创建新文章的命令为hugo new content 文件夹/文件名
xudashuai@mbp14 $ hugo new content posts/第一篇文件.md
Content "/Users/xudashuai/Desktop/blogs/TestSite/content/posts/第一篇文件.md" created
我这里创建了一篇文章，放在了TestSite/content/posts文件夹下，所有文章都会放入站点的content文件夹中，二级菜单可视为对文章的分类，有些主题会要求文章都放入posts文件夹下，需要注意看主题要求，否则主题显示会出问题。
- 打开web服务器查看效果
xudashuai@mbp14 $ hugo server --buildDrafts
Watching for changes in /Users/xudashuai/Desktop/blogs/TestSite/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /Users/xudashuai/Desktop/blogs/TestSite/hugo.toml
Start building sites …
hugo v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa+extended darwin/arm64 BuildDate=2024-01-26T15:54:24Z VendorInfo=brew
| EN
-------------------+-----
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 0
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0
Built in 11 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
然后浏览器打开http://localhost:1313/即可看到网站效果
至此已经在本地可以写文章并查看自己的网站了。
要实现网站的公网访问，接下来将需要把站点的文件上传到GitHub，然后托管到Cloudflare Pages。
站点文件上传至GitHub仓库
打开自己的GitHub创建一个仓库，我将创建一个名为TestBlog的仓库进行演示：
公共仓库和私有仓库都是可以的。
进入站点根目录，然后依次运行下列命令将站点文件推送到GitHub仓库：
xudashuai@mbp14 $ git init
xudashuai@mbp14 $ git add .
xudashuai@mbp14 $ git commit -m "first commit"
xudashuai@mbp14 $ git remote add origin 刚才创建的仓库地址
xudashuai@mbp14 $ git push -u origin main
站点托管到Cloudflare
登陆到Cloudflare管理后台，右上角选择简体中文，左侧下拉点击Workers 和 Pages，点击创建应用程序：
选择Pages标签，点击连接到Git:
然后关联自己的GitHub账号，选择对应的仓库，点击开始设置：
如果没有仓库权限，请点击下方的链接进行权限配置
这里的框架预设选择Hugo，添加一个环境变量HUGO_VERSION值为上面提到的本地安装的Hugo的版本，我这里是0.114.0，其他默认，点击保存并部署：
构建成功后会得到一个免费的公网链接，点击查看站点：
预览效果：
至此，一个免费的个人博客站点就建设完成了！你可以尝试切换主题，编写文章，然后推送到GitHub，Cloudflare将会自动拉取新的文件完成站点的构建和发布。
上面的网站地址：https://testblog-ac7.pages.dev/