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: 部分细节需要自行琢磨 🧐🧐🧐。

相关推荐
bpmf_fff9 分钟前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
泰山小张只吃荷园22 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
悦涵仙子1 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树1 小时前
分布式在线评测系统
前端·c++·后端·负载均衡
haima951 小时前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐2 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲2 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲2 小时前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人2 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站2 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html