从第一次搭建hugo程序到发布第一篇文章

托管到 Github 仓库和部署到 cloudflare Pages

1. 准备工作

2. 创建 Hugo 项目

下载 Hugo
- 选择 Windows x64 版本 下载，会得到一个压缩包
- 解压后，将 Hugo.exe 的文件路径添加到系统环境变量，方便后续操作
选择项目地址
- 本例使用桌面路径：
  1
  C:\Users\yourname\Desktop\

创建 Hugo 项目

打开 CMD，进入桌面目录：

1
2
3
cd C:\Users\yourname\Desktop\
hugo new site mysite
cd mysite

3. 安装 Stack 主题

下载主题
- hugo-theme-stack
- 可以选择在 GitHub 作者的项目地址下载并解压到：
  1
  mysite/themes/
- 如果安装了 Git，可以直接使用命令：
  1
  git clone https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack
使用演示站点
- 作者提供了 exampleSite 作为演示，路径在：
  1
  themes/hugo-theme-stack/exampleSite
- 将依赖文件覆盖到 mysite，包括：
  1
  assets/ | images/ | config.yaml | hugo.yaml | ... 等等

配置启动文件 hugo.yaml

1
2
3
4
5
baseurl: https://yourwebsitedomain   # 网站地址
languageCode: zh-cn                  # 语言
theme: hugo-theme-stack              # 主题
title: Example Site                  # 网站标题
copyright: 林的小别野               # 版权信息

4. 添加第一篇文章

发布第一篇文章
- 启动本地预览
1
hugo server -D
- 如果能看到网站正常运行,我们就来发布第一篇文章
- 关闭server服务
1
ctrl+c
- 他会自动创建一篇文章
- 接下来可以找到’content/post/‘我的第一篇文章’/index.md’进行编辑
1
hugo new content/post/我的第一篇文章/index.md

5. 上传到 GitHub

初始化仓库

1
2
3
git init
git add .
git commit -m "Initial commit"

添加远程仓库

1
git remote add origin https://github.com/username/my_blog.git

如果已经存在 origin，使用

1
git remote set-url origin https://github.com/username/my_blog.git

如果远程仓库非空，先强制推送覆盖
1
git push -u origin main --force

后续托管仓库

1
2
3
git add .
git commit -m "Add new post"
git push origin main

5. 部署到 Cloudflare Pages

登录 Cloudflare Pages
- 点击 Create a project → 选择你的 GitHub 仓库
配置项目

设置项	配置值
Production branch	main
Framework preset	Hugo
Hugo version	Extended 版本（和本地一致）
Build command	`hugo --gc --minify`
Build output directory	`public`

⚠️ 确保主分支包含 themes/hugo-theme-stack 或使用 Hugo Modules。

部署项目
- 点击 Save and Deploy
- 部署完成后，会得到一个 *.pages.dev 域名
可选步骤：添加自定义域名
- 在 Cloudflare Pages 设置自定义域名
- 配置对应的 DNS 解析

6. 后续更新

切换到项目文件
1
cd \yourproject\

发布一篇文章

1
2
3
4
5
hugo new content/post/articletitle/index.md

git add.        # 把整个工作目录（当前目录及子目录）所有 已修改或新增的文件 都加入 Git 暂存区
git add content/posts/my-new-post/   # 把整个文章路径加入 Git 暂存区
git add content/posts/my-new-post/articletitle\index.md # 把整个文章加入 Git 暂存区

注意单独把文章加入暂存区需要把文章依赖的图片等资源也加进去

1
2
3
git add content/posts/my-new-post/index.md
git commit -m "发布新文章：我的新文章"
git push origin main