Hugo构建静态站点-部署到cloudflare的Pages-教程系列一

一·环境准备

本地平台是win 10（64位系统），把系统设置为文件后缀名可见和隐藏文件可见；需要以下软件环境：

(1)GitHubDesktopSetup-x64.exe下载地址

(2)GitHubDesktop汉化工具下载地址

(3)Git-2.42.0.2-64-bit.exe下载地址

(4)go1.21.1.windows-amd64.msi下载地址

(5)VSCodeUserSetup-x64-1.82.2.exe下载地址，这是一款跨平台的编程工具，也可用来作为新手写hugo博客文章超好用。

以上软件均可全程默认安装，直接下一步就好。

其中VSCodeUser为了方便可以在创建桌面快捷方式那一步：①将“通过code 打开”操作添加到windows资源管理器文件上下文菜单； ②将“通过code 打开”操作添加到windows资源管理器目录上下文菜单；说明：①②勾选上，可以对文件，目录点击鼠标右键，选择使用 VScode 打开。

VSCodeUser安装好后，打开软件点开右边栏扩展安装插件：

(6)hugo_extended_0.118.2_windows-amd64.zip下载地址,hugo的Windows安装包注意是 extended 版本

二·hugo搭建

(1)把hugo_extended_0.118.2_windows-amd64.zip解压到盘符根目录某个XXX文件夹里，并把解压出来的文件夹更名为hugo，呈现为（D:\XXX\hugo）；随后在hugo文件夹内新建一个bin文件夹，再把hugo文件夹内的hugo.exe移动到bin内，呈现为（D:\XXX\hugo\bin\hugo.exe）。

(2)配置环境变量：依次点开（桌面 > 右键此电脑 > 高级系统设置 > 环境变量）然后按下图操作

（3）检测hugo是否搭建成功：在任意位置空白处右键点击open git bash here输入 hugo version显示如下图证明hugo成功安装了。

三·构建静态站点

（1）构建站点文件：在D根目录建立一个文件夹，比如我这里D盘下mywebsite，等会生成的博客网站存放在里面，呈现（D:\mywebsite）。进入mywebsite右键点击open git bash here（以后默认输入命令行都用这个方法）命令行

hugo new site myblog #建立一个名为myblog的站点文件夹

这时会提示祝贺你，你的hugo网站已经生成，然后提示你去下载主题。呈现为（D:\mywebsite\myblog）,在myblog文件夹里生成了很多文件；
由于本教程是使用hugo-theme-stack主题，所以关注下列文件就好：

hugo.toml #全局参数配置文件，老版本的hugo文件名是config.toml

themes #存放站点主题，可存多个主题，在config.toml全局文件中配置指定，

content #存放你创作站点文章内容的目录。

public #用hugo命令编译生成的静态站点存放目录，目前暂时还没有，别管。

（2）下载站点主题：当完成上面的操作，你的站点已经可以运行了；

一定要在myblog文件夹里（D:\mywebsite\myblog）右键点击open git bash here输入命令hugo server ，
浏览器里访问localhost:1313

但是这时候站点还是空的，hugo初始生成的站点默认不带样式，需要安装主题。

一定要在themes文件夹里右键点击open git bash here输入命令:
git clone https://github.com/CaiJimmy/hugo-theme-stack #下载主题文件
命令完成后等待文件下载完毕。

（3）使用主题：把exampleSite文件夹（\themes\hugo-theme-stack\exampleSite）里的所有文件，复制并覆盖到hugo-theme-stack文件加（\themes\hugo-theme-stack）里。

再把exampleSite文件夹（\themes\hugo-theme-stack\exampleSite）里的config.toml文件，复制到myblog文件夹（D:\mywebsite\myblog）里，
并把myblog文件夹里的hugo.toml删除；以后就依靠复制过来的config.toml文件调整站点。

此时在myblog文件夹里（D:\mywebsite\myblog）右键点击open git bash here输入命令hugo server ，
浏览器里访问localhost:1313，就能看见主题的预设内容了。

四·把站点和GitHub存储库对接

（1）拥有GitHub的账号，注册超级简单，并建立一个新的存储库：见图操作

（2）建立好GitHub的public存储库后，打开本地的Github Desktop程序登录相同的账号并克隆存储库：见图：

等它同步完后，和GitHub的链接完成。以后就只需要同步本地的public里的内容。

(3)在myblog文件夹里（D:\mywebsite\myblog）右键点击open git bash here输入命令：hugo ，构建你的站点，其内容就放在public里。
此时再打开本地的Github Desktop程序按下图操作，以后有站点内容变化，就只需要同步本地的public里的内容。