windows系统从0到1hugo加gitee搭建个人博客

Hugo官网 Gitee官网 Markdown官方教程 Markdown菜鸟教程

终端打开方式:win + r 输入 cmd 回车。
配置环境变量:此电脑右键 > 属性 > 高级系统设置 > 环境变量 > 用户变量 > path (提示:找到用户变量path不区分大小写,找不到则新建变量path,找到则点击编辑。把安装路径 (例:C:\Git\cmd) 复制到path变量对应的值里,如果有多个以';'分号分割。关闭所有终端重新打开,就可以使用该命令了)。

1、下载Git

Git下载地址

下载完成后找到浏览器下载内容,找到刚下载的git双击安装,安装时一直next下一步或根据提示按自己需求选择安装,一般一直next下一步即可。

电脑桌面鼠标右键(win11需要点击查看更多选项)出现上方图片红框里这两个选项即为安装成功。

shell 复制代码
> git --version

在终端输入上方命令后出现类似 git version 2.34.1 说明环境变量已经自动配置否则需要自行配置环境变量。

2、下载Go

Go下载地址

下载完成后找到浏览器下载内容,找到刚下载的go双击安装,安装时一直next下一步或根据提示按自己需求选择安装,一般一直next下一步即可。

shell 复制代码
> go version

在终端输入上方命令后出现类似 go version go1.21.5 说明已经安装成功并自动配置了环境变量否则需要自行配置环境变量。

3、下载Hugo

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文档引用

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,选择其中一种进行操作即可。

  1. 从Microsoft商店安装 (推荐)

安装链接

  1. 使用winget安装PowerShell 7 (比较慢)

搜索PowerShell应用程序。

shell 复制代码
> winget search Microsoft.PowerShell

安装PowerShell。

shell 复制代码
> winget install --id Microsoft.PowerShell --source winget
或
> winget install PowerShell
  1. 在 Windows PowerShell 中使用此命令来安装 PowerShell 7 (需要梯子)
shell 复制代码
> iex "& { $(irm https://aka.ms/install-powershell.ps1) } -UseMSI"

Tip: 部分细节需要自行琢磨 🧐🧐🧐。

相关推荐
万叶学编程1 小时前
Day02-JavaScript-Vue
前端·javascript·vue.js
前端李易安3 小时前
Web常见的攻击方式及防御方法
前端
PythonFun3 小时前
Python技巧:如何避免数据输入类型错误
前端·python
知否技术3 小时前
为什么nodejs成为后端开发者的新宠?
前端·后端·node.js
hakesashou3 小时前
python交互式命令时如何清除
java·前端·python
天涯学馆3 小时前
Next.js与NextAuth:身份验证实践
前端·javascript·next.js
HEX9CF4 小时前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
ConardLi4 小时前
Chrome:新的滚动捕捉事件助你实现更丝滑的动画效果!
前端·javascript·浏览器
ConardLi4 小时前
安全赋值运算符,新的 JavaScript 提案让你告别 trycatch !
前端·javascript