简单创建和部署个人博客

背景

近期有人问我 yhz.me 这个博客是怎么弄的，这篇文章来简单阐述一下。

说明

• 博客一般来讲，流量会比较少，推荐使用Vercel的Hobby这个免费的版本，方便部署，而且自带https证书就可以，Vercel的网址是：https://vercel.com 这个。
• 博客网站使用静态网站生成器，可以将编辑好的Markdown文件生成好静态的HTML进行渲染。推荐使用Go语言的Hugo框架：https://gohugo.io 这个。
• 代码仓库用Github就好，创建个私有仓库用于提交相关的文件或代码就行。

步骤

1. 在Vercel上注册个账号

这里自行去网站上注册好就行了。

2. 在Github上创建个私有仓库

建议仓库命名为：GitHub账号名称.github.io

这里我重新创建了个 https://github.com/hwsdien/yhz.github.io 这个仓库。

3. Hugo

3.1. 安装

可以参考官网的文档：https://gohugo.io/getting-started/quick-start/

我这里是macOS系统，直接用brew install hugo 进行安装了。

3.2. 查看版本

执行 hugo version 即可获取版本号。 我这里的版本号是：

hugo v0.113.0+extended darwin/arm64 BuildDate=unknown

3.3. Clone仓库

git clone https://github.com/hwsdien/yhz.github.io.git

3.4. 创建网站

cd yhz.github.io

hugo new site . --force

3.5. 选择主题

可以在 https://themes.gohugo.io 这里挑选一个自己喜欢的主题，根据主题的说明文档进行安装。 这里我选了一个 hello-friend-ng 的主题。

git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng 执行上面这条命令就行。

3.6. 修改配置文件

vim hugo.toml

复制主题的示例配置文件内容到 hugo.toml ，然后根据自行修改，比如修改博客的网站名称，网址等等。 这里需要注意的是，一定要修改正确的baseurl，不然页面的主题渲染不出来。

3.7. 本地查看

hugo server

浏览器上查看 http://localhost:1313/ 是否正常显示。

3.8. 提交代码

git add .

git commit -am "Init commit"

git push -u origin main

4. 在Vercel上进行部署

根据仓库名称进行导入。 增加指定Hugo的版本号进行部署。

5. 查看博客

访问 https://yhz-github-io.vercel.app/ 查看。