Buildblog

Wed, 23 Aug 2023 20:16:25 +0800

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

准备工作

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

Hugo安装

安装文档介绍 https://www.gohugo.org/（推荐使用二进制安装）
windows安装示例
1. 下载二进制文件 https://github.com/gohugoio/hugo/releases (注意下载的是扩展版本)
1. 添加环境变量
在用户变量的path变量中添加hugo二进制文件的放置目录
1. 测试hugo是否安装成功
- windows下需要使用PowerShell, cmd无效
  - winget安装powershell
    1. 使用管理员打开cmd
    2. 输入命令查看powershell安装版本
    1
    
    winget search Microsoft.PowerShell
    1. 通过 id 下载稳定版的 PowerShell
    1
    
    winget install --id Microsoft.Powershell --source winget
    1. 打开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/ ，进入下载链接并下载
1. 下载的zip解压至 blog/themes下
1. 将 blog/themes/hugo-theme-stack-master/exampleSite/content 中的内容复制到 blog/content中
1. 将 blog/themes/hugo-theme-stack-master/exampleSite/config.yaml 复制到 blog项目根目录下，并把 hugo.toml删除(最新版hugo生成的配置文件是 hugo.toml 其他版本可能是 config.yaml 或者 config.toml)
1. 打开复制过来的 config.yaml 确保 theme 的值是刚才下载主题文件夹的名字,其他配置请根据需要更改

`1`	`theme: hugo-theme-stack-master`

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

`1`	`hugo server --buildDrafts --watch`

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

3.写一篇文章测试

`1`	`hugo new post/test/index.md`

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

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

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

4.博客的语言设置

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

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的配置面板并保存。即时通知就配置好了。

Blog on kellehod的博客