效果展示
https://blog.lijiext.vercel.app/
前期准备
- github账号
- vercel账号
- git客户端
- Visual Studio Code
步骤
1. 配置Hugo
首先需要下载Hugo，这里大部分人使用的是64位Windows系统，我将下载Hugo的64位Windows版本。打开：https://github.com/gohugoio/hugo/releases，找到最新的Releases的附件部分，点击下载适合自己的版本
下载完成后，将文件解压得到如下文件：
在这里我将此文件复制到D盘的hugo文件夹下（我的软件一般都安装在D盘）完成后如图所示：
下面需要配置系统环境变量，以便让hugo程序能够在系统任意位置运行：
配置好环境变量之后验证一下：
Win+R 输入cmd打开命令提示符输入hugo version，出现如下内容说明安装成功
2. 生成网站
在自己想要保存博客的位置打开命令行工具，输入hugo new site myblog，myblog即为文件夹的名称
下面用Visual Studio Code打开刚刚新建的文件夹：
使用git init初始化git仓库：
添加自己喜欢的主题：git submodule add https://github.com/varkai/hugo-theme-zozo.git themes/zozo
我这里使用的是zozo，在https://themes.gohugo.io/可以找到更多好看的主题：
下面需要在配置文件config.toml添加一行theme = "zozo"：
下面需要添加一篇文章，在命令行即Terminal中执行如下命令：
hugo new posts/10001.md
现在我们可以在content/posts下的10001.md文件中开始使用markdown编写我们的博客了：
文章写完后保存，然后在Terminal中执行：
hugo server -D -w -p 80 --disableFastRender
下面我们将能够在本地的80端口访问刚刚生成的网站：
到现在，网站可以在本地运行了，下面我们需要将我们的博客托管在线上，这里使用github+vercel作为托管平台：
- 新建一个github仓库
- 将本地文件上传到该git仓库
git add *
git commit -m "add 10001.md"
git remote add origin https://github.com/lijiext/blog.git
git branch -M main
git push -u origin main
- 部署网站
在https://vercel.com/dashboard上New Project：
一步步来然后选择：
请注意，当部署完成后，会显示完成页面：
但是需要注意图中的预览图和我们本地的网站并不一样，这是由于网站的资源文件无法找到所致，因为vercel在部署网站时会给我们随机分配域名，所以我们需要手动配置一下站点的URL：
在项目的overview页面可以看到分配的随机域名：
复制它，更改config.toml文件的baseURL为随机域名：
然后再次提交，等待半分钟后网站就会重新部署，此时在浏览器中访问域名就会正常了：
git add *
git commit -m "change baseURL"
git push
结果展示
下面就是我们刚刚弄好的博客了：
京公网安备 11010502036488号