这篇文章介绍的个人博客搭建是使用Hugo框架 + vercel部署 + twikoo评论系统

准备工作

• 最好有一个域名（腾讯云、阿里云均有新人特惠首年1元的域名）
• github账号

Hugo安装

• 安装文档介绍 https://www.gohugo.org/（推荐使用二进制安装）

• windows安装示例

  1. 下载二进制文件 https://github.com/gohugoio/hugo/releases (注意下载的是扩展版本)

  

  2. 添加环境变量

  

  在用户变量的path变量中添加hugo二进制文件的放置目录

  3. 测试hugo是否安装成功
  • windows下需要使用PowerShell, cmd无效

    • winget安装powershell

      1. 使用管理员打开cmd
      2. 输入命令查看powershell安装版本

      1	winget search Microsoft.PowerShell

      3. 通过 id 下载稳定版的 PowerShell

      1	winget install --id Microsoft.Powershell --source winget

      4. 打开powershell，输入hugo version

      1	hugo version

此时表示hugo正确安装

Hugo使用

1.创建个人博客

在powershell中输入,<sitename>为自定义站名

1

hugo new site <sitename>

输入 hugo new site blog 后，生成了blog文件夹

2.下载主题并设置

• 1. 进入hugo主题库 https://themes.gohugo.io/ 挑选合适的主题，并下载。这里以 stack主题为例， https://themes.gohugo.io/themes/hugo-theme-stack/ ，进入下载链接并下载

  

• 2. 下载的zip解压至 blog/themes下

  

• 3. 将 blog/themes/hugo-theme-stack-master/exampleSite/content 中的内容复制到 blog/content中
• 4. 将 blog/themes/hugo-theme-stack-master/exampleSite/config.yaml 复制到 blog项目根目录下，并把 hugo.toml删除(最新版hugo生成的配置文件是 hugo.toml 其他版本可能是 config.yaml 或者 config.toml)
• 5. 打开复制过来的 config.yaml 确保 theme 的值是刚才下载主题文件夹的名字,其他配置请根据需要更改

1

theme: hugo-theme-stack-master

• 6. 切换到项目的根目录，运行hugo项目

1

hugo server --buildDrafts --watch

• 7. 访问 http://localhost:1313 ，查看项目

3.写一篇文章测试

• 1.切换到根目录下，输入下面的命令

1

hugo new post/test/index.md

这个命令会在 blog/content/post 目录下生成test目录，其中包含 index.md ，用vscode或者其他markdown编辑器打开index.md编辑内容，并查看效果

1
2
3
4
5

---
title: "Test"
date: 2023-08-23T23:55:44+08:00
draft: true
---

这是初始index.md的内容，此时应该将 draft: true 改为 draft: false

4.博客的语言设置

博客的语言在根目录下的config.yaml中设置。比如这个设置可选英文和中文。则config.yaml中的languages设置如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

languages:
    en:
        languageName: English
        title: aiden's blog
        weight: 1
        params:
            description: Example description
    zh-cn:
        languageName: 中文
        title: aiden的博客
        weight: 2
        params:
            description: 演示说明

博客的默认语言设置，也是在配置文件中设置，默认进到博客就是英语。

1

DefaultContentLanguage: en

发布博客时，index.md是在默认语言下能看到的，当切换到中文的时候，显示的内容是index.zh-cn.md中的内容。

所以当你需要修改博文的不同语言表示时，请到相应的.md文件下。同理，博客左侧的菜单栏的不同的语言表示也是在/content/page相应的md文件中修改title。

5.分类的创建

当你点进archives中时，能看到各种分类的归档。

分类的创建是在/content/categories下创建类似于post的发布，注意文件夹需要与分类名同名。

vercel部署

上传代码到github仓库

• 在github上创建一个新的仓库，开源、私有均可以

• 在项目的根目录创建一个文件 vercel.json,比如我这个项目就是创建 blog/vercel.json 来指定部署使用的hugo版本，因为vercel使用的hugo版本比较旧

  1 2 3 4 5 6 7 8 9 10

  { "github": { "silent": true }, "build": { "env": { "HUGO_VERSION": "0.117.0" } } }

  • 将代码推送到新建的仓库中

    

使用vercel部署

• 打开vercel地址 https://vercel.com/

  

• 使用github登录

• 点击右上角的添加新的项目(project)

  

• 导入仓库代码

  

• 选择部署项目的框架为Hugo，然后点击开始部署

  

• 下面则是部署成功的例子

  

绑定域名

• 点击右上角的Domains

  

• 在输入框内输入你的域名，点击add它会提示你应该在你的域名下添加哪些解析记录，例如，我输入 test.kellehod.top后

按照提示添加解析记录,并开启解析(这里使用的是腾讯云的 dnspod https://www.dnspod.cn/)

• vercel域名完成绑定，自动生成SSL证书,

完成绑定后，注意将根目录中 config.yaml中的 baseurl改为你绑定的域名，例如这个是:

• 1	baseurl: https://test.kellehod.top

  现在便开始使用你的项目吧！

  
  

嵌入评论系统

配置过程

vercel部署方式的链接 https://twikoo.js.org/quick-start.html#vercel-%E9%83%A8%E7%BD%B2

详细视频介绍 https://www.bilibili.com/video/BV1Fh411e7ZH/

上述工作做完后，修改项目根目录下的配置文件 config.yaml

• 1.将comment的 provider改为twikoo

1
2
3

comments:
        enabled: true
        provider: twikoo

• 2.配置twikoo,其中 envid是上述部署twikoo的地址，建议使用绑定的域名，使用vercel提供的*.vercel.app地址在国内网络访问下评论系统可能会显示不出。

  1 2 3 4 5

  twikoo: envId: https://twikoo.kellehod.top/ region: path: lang:

设置博客消息通知

当有人在我们的博客下面留言时，我们希望及时的收到提示消息，这个时候我们就可以通过配置评论系统的通知功能来实现这一目标。twikoo支持即时通知和邮件通知两种不同的方式，当然也可以混合使用。因为个人觉得即时通知比较方便，所以这里我采用的是即时通知的方式。

• 首先打开twikoo的配置面板，找到即时通知参数填写的地方。

• 打开https://pushoo.js.org网址，查看各个消息推送平台的设置方式。这里我采用的是飞书平台， https://www.feishu.cn/hc/zh-CN/articles/360024984973-%E5%A6%82%E4%BD%95%E5%9C%A8%E7%BE%A4%E7%BB%84%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%9C%BA%E5%99%A8%E4%BA%BA，按照这个文档的指示创建自定义机器人(需要在PC端配置)，将生成的地址填写到twikoo的配置面板并保存。即时通知就配置好了。