博客建设记

0. 前记

一直想要建设一个属于自己的博客，一开始用python写过一个简单的，可以做到富文本编辑、发布、更新、评论等功能，但那个不是一个单纯的博客，并且界面也不是太友好，因此后来废弃了。后来又用了一段时间的jupyter notebook，很强大，尤其让我喜欢的是可以直接运行代码，曾经有一段时间想过可否把jupyter notebook直接作为我的博客页面，或者是嵌入我的页面内，于是看了看其源代码。。。遂放弃。后来又用了为知笔记，印象笔记，Notion等，但感觉都没jupyter notebook好用。在用jupyter notebook记了有了一定的数目之后，就想将其发布出来，考虑过CSDN，但感觉上面广告好多，不太喜欢，因此没有使用。后来买了域名和服务器，用wordpress搞了一个，但是不是太满意，也没发布。后来用go语言写了一个，因为某些原因，中间的一些数据通路没有搞通（主要是从jupyter到md再到网站的自动发布），再加上后来考研，所以这个项目也没活到"成站"。终于，用hugo搞了一个。之所以用hugo，一是因为最近研究go语言，对go语言的项目具有一定的好感，第二是因为看了网上的一些介绍并且发现了一些使用hugo的个人博客。 2021/2/28，记之。

1. 使用hugo开始自己的网站

1.1 开始

hugo的使用炒鸡简单，你只需要使用

hugo new site MySite

即可新建一个名为MySite的网站

1.2 为你的网站选择一个theme

进入到我们刚才建立的网站目录

cd Mysite/

从GitHub导入你想应用的主题

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

待下载完成后，还需要修改你的配置文件

echo 'theme = "ananke" ' >> config.toml

1.3 为你的网站添加一些内容

hugo使用我们上传的md文件来自动生成静态网页，而我们上传的md文件的位置在MySite/content/posts/*, 我们可以直接复制已经编辑好的md文件到这个目录，或者使用如下命令：

hugo new posts/my-first-post.md

需要注意的一点：为了让hugo知道更多的信息，我们上传的md文件一般会有一个"standand header", 如下：

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

这里的头部并不是一成不变的，你可以根据需要自行配置。

1.4 开始让你的网站服务

使用如下命令让你的网站开始服务吧！

hugo server -D

注意，这个命令只会让你的hugo服务器监听本地访问，也就是127.0.0.1 如果你想要你的hugo服务器为整个网络服务，可以这样：

hugo server --bind='0.0.0.0'

这样，你的网站就可以全网访问了。

2. 使用webhook

简单的说，webhook是一个触发器，当我们做出某个特定的的动作后，webhook可以自动完成特定任务。

2.1 服务端配置

首先，我们使用https://github.com/adnanh/webhook.git来配置我们的服务器端，使其可监听webhook请求。

安装adnanh/webhook
```
go build github.com/adnanh/webhook
```

编辑hooks.json

 [
     {
         "id": "redeploy-webhook",  
         "execute-command": "/var/scripts/redeploy.sh",  //脚本的位置
         "command-working-directory": "/var/webhook"   // 脚本的工作目录
     }
 ]

如果你想要你的脚本返回一些值作为提醒，可以这样设置：

"response-message":"hooks,hooks"

编辑你要运行的自动部署脚本

# 你的脚本，根据你所要执行的任务自行编写

✦✦你需要注意你的脚本权限，确保其可以运行

2.2 GitHub的webhook

在服务端配置完成后，开始配置GitHub。 Github为我们提供了webhook功能，可以方便的应用在我们的代码仓库中。 webhook 在github上配置你的webhook，content type选择application/json,Payload URL为你想要webhook监听的端口与路径，其中路径中的最后一部分与hooks.json中的id是对应的。 config webhook

2.3 测试通路

测试你的webhook是否设置成功。

开启服务端监听

/path/to/webhook -hooks hooks.json -verbose  # 默认端口9000
# 你可以使用-port参数指定监听端口

在GitHub上发送请求 GitHub webhook配置完成后会自动发送请求查看是否有回应，若Recent Deliveries中是红色的感叹号，代表测试失败。你可以点击Redeliver按钮重新测试。若出现绿色的对号，则代表测试成功。 ![redeliver]{}

2.4 将webhook设置为systemctl

为了让webhook能一直监听请求，我们需要使webhook保持运行。新建/etc/systemed/system/webhook.service 其内容如下：

[Unit]
Description=Webhooks

[Service]
ExecStart=/usr/bin/webhook -port 12345 -hooks /path/to/hooks.json -hotreload


[Install]
WantedBy=multi-user.target

保存并关闭。运行以下命令

sudo systemctl daemon-reload   # 重载配置文件
sudo systemctl start webhook.service  # 启动webhook.service
sudo systemctl status webhook.service   # 查看webhook的状态

3. 使用nginx作为服务器

安装nginx：

sudo apt-get install nginx

使用hugo生成静态文件

# cd Mysite
hugo

hugo生成的静态文件存储在public文件夹中。将public文件夹中的所有文件复制到nginx指定的root文件夹中。访问你的服务器ip地址或域名。页面正常！ ✦✦如果你的nginx显示404，那么请检查你的nginx的root文件夹配置以及你的文件位置；如果显示403，可能是你服务端权限配置错误。

4. 数据通路

本地编辑md文件 → 上传GitHub → webhook发送请求 → 服务器接收请求，拉取GitHub文件，重新生成静态文件 → 复制静态文件到nginx指定的root目录。更新完成

博客建设记#

0. 前记#

1. 使用hugo开始自己的网站#

1.1 开始#

1.2 为你的网站选择一个theme#

1.3 为你的网站添加一些内容#

1.4 开始让你的网站服务#

2. 使用webhook#

2.1 服务端配置#

2.2 GitHub的webhook#

2.3 测试通路#

2.4 将webhook设置为systemctl#

3. 使用nginx作为服务器#

4. 数据通路#