感谢“小球飞鱼”的教程 ,以及在这个过程提供帮助的各位朋友。
下载软件,注册账号
-
Hugo 下载地址:https://github.com/gohugoio/hugo/releases
打开链接后往下拉,找到 Assets ,下载最新的带 extended 的版本,或者直接点 hugo_extended_0.145.0_windows-amd64.zip 下载
下载后解压到博客文件夹在的位置,比如说,我在 D 盘建了一个 blog 文件,那么解压后的 hugo 文件夹就要移动到这个 blog 文件夹里(后文举例都用这个)
-
Git 下载地址:https://git-scm.com
打开链接后点击
Download for Windows
,下载 64-bit Git for Windows Setup ,或者直接点 Git-2.49.0-64-bit.exe 下载下载后安装,安装路径随意,一直点下一步直到安装成功
-
Github账号 注册网址:https://github.com
最好用谷歌邮箱,或者别的国外邮箱
-
Github Desktop 下载地址:https://github.com/apps/desktop
-
VScode 下载地址:https://code.visualstudio.com
下载后点击左下角
设置
,再点击Extensions
(扩展),搜索 Chinese Language Pack for Visual Studio Code(汉化) 和 Markdown All in One 插件,点击 install 安装启动汉化插件
Ctrl+Shift+P打开命令搜索框,输入 configure language ,点击 Display language ,点击中文(简体),在弹出框中点 Restart 重启 VScode
安装HUGO
Hugo.exe 放在 D 盘的 blog 文件中,可以从文件上方看到文件路径为 D:\blog\hugo_extended_0.145.0_windows-amd64 ,在地址栏复制路径
- win+R,输入
sysdm.cpl
,按ENTER回车 - 进入高级选项卡,点击
环境变量
- 在系统变量部分,找到 Path 变量,点击
编辑
- 在编辑环境变量窗口中,点击
新建
,然后将上面的路径粘贴到这里 - 依次点确定关闭所有窗口
测试是否成功
在D:\blog中任意空白处右键,点击Open Git Bash Here,在弹出的命令行界面中输入hugo version,如果步骤正确,会显示:
hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended windows/amd64 BuildDate=2025-02-26T15
25Z VendorInfo=gohugoio
显示结果中的0.145.0是hugo的版本号,后面需要用
搭建博客
-
注册Verce:https://vercel.com ,点击右上角
Sign Up
,选择I'm working on personal projects
(hobby),给自己取个名字,再点击Continue
-
选择
使用 Github 账号注册
,登录前面注册的github账号,弹出授权窗口时,点击Authorize Vercel
-
在 Let’s build something new 页面,点击右边 Clone Template 项目下方的
Browse All Templates
,左边搜索栏输入hugo
,会出现 Hugo Starter 项目,点开如果没有看到这个界面,点击右上角头像
,点击Dashboard
,点击右上角黑色的Add New project
-
点击左边
Deploy
,点击 Git Scope的下拉列表
,点击Add GitHub Org or Account
,弹出安装窗口,点击Install
-
在Git Scope下拉列表中点击
你的Github账户
,在右侧 Private Repository Name 位置输入仓库名,我这里输入 donbro (这个名字很重要!它决定了博客的域名!),点击Create
,大概等1分钟左右,会弹出来一个Congratulations!的弹窗,代表 Vercel 已经自动搭建好一个 Hugo 博客 -
点击
Continue to Dashboard
进入管理页面,Domains下面的 donbro.vercel.app 就是自动分配的访问网址域名,点击可以直接进入博客 -
点击右上角
头像
,点击Dashboard
,看到刚刚建立的 Hugo 项目,点击项目右上角三个点
后再点击Setting
进入设置 -
点击左侧
Environment Variables
,key 处填写HUGO_VERSION
,Value 处填写版本号
(上面写了怎么查),最后点击save
推送到Github
这个博客更新的顺序是,你在本地新建一篇md文件,然后通过 github Desktop 同步更新到 Github,然后再更新到你的博客域名
- 打开 Github Desktop,登录 Github 账号,选择
Clone a repository from the internet…
(也就是把刚刚在 vercel 建立的项目克隆到 github ) - 跳出的 Clone a repository 弹框中,注意下面的 Local path,确认选择的是自动建立的 donbro 空文件夹
- 点击左边
Changes
栏,点击文件名可以看到具体内容,勾选要同步的文件
,下方Summary(required)
为本次更新行为命名,再点击最下面Commit to main
提交,最后点击上方第三个大黑框Push origin
进行推送 - 登录 github 网页,点击右上角
头像
,选择Your repositories
,点击donbro
仓库,左边是更新记录和文件,右边可以看到一个蓝色链接 donbro.vercel.app ,点击就可以进入博客,也可以从vercel项目中进入
如果你想在同步到 github 之前预览效果
编辑好文件后,在donbro文件夹的空白处单击右键,选择Open Git Bash Here,在弹出的命令行界面中输入hugo server,如果步骤正确,会显示:
Watching for changes in D:\blog\github_wsw_hugo\donbro\{archetypes,content,theme
s}
Watching for config changes in D:\blog\github_wsw_hugo\donbro\config.toml
Start building sites …
hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended windows/amd64 Bu
ildDate=2025-02-26T15
25Z VendorInfo=gohugoio
| ZH-CN
-------------------+--------
Pages | 11
Paginator pages | 0
Non-page files | 0
Static files | 11
Processed images | 0
Aliases | 0
Cleaned | 0
Built in 110 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableF
astRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
显示结果最后的 http://localhost:1313 就是预览网址
新建文章
在 donbro 文件夹的空白处单击右键,选择 Open Git Bash Here
,在弹出的命令行界面中输入 hugo new posts/文章名字.md
,回车后,hugo 会在 \donbro\content\posts 文件夹中创建一个新的 md 文件,用 Markdown 编辑器(比如 Tyopa )打开后,就可以写文章了
文章属性模板
用以指定文章的标题、分类、Tag等,打开 \donbro\content\posts\archetypes 文件夹下的 default.md
文件,将下面的代码粘贴进去,不需要的属性可以自由删除:
|
|
Open Git Bash Here
,然后在git中输入命令的前提是,右键时文件夹内必须有config.toml文件。 安装主题
其实这篇流水账记录到上面就已经结束了,剩下的是更复杂的花里胡哨部分~
在此附上Hugo主题下载网址:https://themes.gohugo.io/ ,大(剩)家(下)自(的)由(我)发(不)挥(会)吧(了)!