Hugo官网 Gitee官网 Markdown官方教程 Markdown菜鸟教程
终端打开方式:win + r 输入 cmd 回车。
配置环境变量:此电脑右键 > 属性 > 高级系统设置 > 环境变量 > 用户变量 > path (提示:找到用户变量path不区分大小写,找不到则新建变量path,找到则点击编辑。把安装路径 (例:C:\Git\cmd) 复制到path变量对应的值里,如果有多个以';'分号分割。关闭所有终端重新打开,就可以使用该命令了)。
1、下载Git
下载完成后找到浏览器下载内容,找到刚下载的git双击安装,安装时一直next下一步或根据提示按自己需求选择安装,一般一直next下一步即可。
电脑桌面鼠标右键(win11需要点击查看更多选项)出现上方图片红框里这两个选项即为安装成功。
shell
> git --version
在终端输入上方命令后出现类似 git version 2.34.1 说明环境变量已经自动配置否则需要自行配置环境变量。
2、下载Go
下载完成后找到浏览器下载内容,找到刚下载的go双击安装,安装时一直next下一步或根据提示按自己需求选择安装,一般一直next下一步即可。
shell
> go version
在终端输入上方命令后出现类似 go version go1.21.5 说明已经安装成功并自动配置了环境变量否则需要自行配置环境变量。
3、下载Hugo
下载完成后进行解压,将解压出来的文件放到你想放的位置 (比如在C盘根目录创建个hugo文件夹把解压后的文件放进去,环境变量配置为:C:\hugo) ,需要手动配置环境变量。
shell
> hugo version
在终端输入上方命令后出现类似 hugo v0.121.1 说明环境变量已经配置成功,可以使用hugo相关命令了。
shell
> hugo env
在终端输入上方命令后出现类似以下内容,说明Hugo环境搭建成功。
4、搭建网站
shell
> hugo new site mySite
> cd mySite
在喜欢的位置输入上方命令创建一个hugo目录结构,并将当前目录更改为项目的根目录(mySite为文件夹名称,该名称自己定义)。
挑选自己喜欢的网站主题,点击进入。 Hugo主题地址
点击黄色按钮Download进入下载页面,点击黄色按钮Demo可以在线查看预览,该页面向下滑动是开发此主题的作者对主题介绍以及如何使用(务必完成阅读)。
点击黄色Download下载按钮后,会进入存放该主题的Github仓库,点击绿色Code按钮,会出现一个https仓库克隆地址,点击地址右方图标复制git地址。
shell
> git init
输入上方命令,在当前目录中初始化一个空的git存储库。
shell
> git clone https://github.com/loveminimal/hugo-theme-virgo.git themes/virgo
或
> git submodule add https://github.com/loveminimal/hugo-theme-virgo.git themes/virgo
在当前目录终端输入git clone 或 git submodule add 后跟刚复制的地址 后跟下载位置。themes是根目录的主题存放位置,virgo是主题的名称。
shell
> echo "theme = 'virgo'" >> hugo.toml
上方这个命令的意思是把根目录hugo.toml文件里的属性名为theme的值改为'virgo',也就是把配置文件里的主题配置为你的主题名称,也可以自行找到文件进行更改。
title: "我的第一个帖子"
date: 2024-01-01T00:00:00-08:00
draft: true
根目录有个名为archetypes的文件夹里面有个default.md是默认生成md文档的配置,上方是文件的默认配置,可根据主题需要进行配置。
shell
> hugo server
输入上方命令运行站点,在终端显示的URL上查看你的站点(Ctrl + 左击URL或在浏览器网址区输入访问 http: //localhost:1313)。每个md文档上方配置都有个draft属性值为true的配置,意思是不发布草稿文件,如果本地开发需要加载草稿文件的话运行 hugo server -D即可。
注意:
编写md文档打包后会有图片加载失败问题。
解决方式:
- content目录结构调整如下图(如果想本地开发显示图片资源,根目录static文件夹放一份图片资源,目录结构为static/images/)
md文档引用
- 绝对路径引用。图片资源位置固定放static/images/x.png,打包部署到gitee pages后,直接链接https: //executive-ability.gitee.io/blog/images/x.png引用即可(推荐)。
5、部署到Gitee Pages静态服务
输入命令前,找到根目录的.toml配置文件,把里面的baseURL改为你的博客地址,Gitee生成博客地址为 https: //你的个人空间地址.gitee.io/博客仓库名称,如果你的博客仓库名称和你的个人空间地址相同则生成为 https: //你的个人空间地址.gitee.io,title设置成你喜欢的名字。输入下方命令 hugo 把文件打包到根目录的public文件夹中,如果想把草稿文件也打包进去,则输入 hugo -D 即可。
shell
> hugo
创建一个新的仓库。
设置提交用户信息。
shell
全局设置
> git config --global user.name "用户名"
> git config --global user.email "用户邮箱"
当前项目设置
> git config user.name "用户名"
> git config user.email "用户邮箱"
把所有文件添加到git。
shell
> git add .
把添加的文件提交到本地仓库并携带备注。
shell
> git commit -m "初始化"
设置远程提交地址。
shell
> git remote add origin https://gitee.com/个人空间地址/仓库名称.git
把提交的文件推到远程master分支。
shell
> git push -u origin "master"
进入Gitee Pages部署页面(需要实名认证,提交认证后一般3天左右通过认证)。
选择部署分支,输入部署目录,点击启动。
博客更新后打包上传到git,进入到Gitee Pages服务页面点击更新即可。
6、下载安装PowerShell 7(非必须)
PowerShell 7会记忆历史命令再次输入会有提示,可提高命令输入速度。
有多种方式安装PowerShell 7,选择其中一种进行操作即可。
- 从Microsoft商店安装 (推荐)
- 使用winget安装PowerShell 7 (比较慢)
搜索PowerShell应用程序。
shell
> winget search Microsoft.PowerShell
安装PowerShell。
shell
> winget install --id Microsoft.PowerShell --source winget
或
> winget install PowerShell
- 在 Windows PowerShell 中使用此命令来安装 PowerShell 7 (需要梯子)
shell
> iex "& { $(irm https://aka.ms/install-powershell.ps1) } -UseMSI"
Tip: 部分细节需要自行琢磨 🧐🧐🧐。