wordpress迁移至hugo及其自动化发布文章全记录

迁移的辛酸泪

早在几年前的时候，使用wordpress来写文章，虽说文章质量一般般，但食之无味，弃之可惜，所以还是将其迁移过来吧，在这期间，自己也重新看了下之前写的文章，嗯，不忍直视，哈哈哈哈，虽然现在也没啥长进，但不管好坏，这种精神总归是好的，值得表扬下！！！

wordpress可以说是世界上占有最高的一个开源博客框架了吧，基于lnmp或者lamp架构，是一种动态的，可以说你想要什么，它就会有什么，但也意味着它很重，向我这种日渐愈发喜欢白嫖的人来说，需要在机器上部署一个php、MySQL、nginx，甚至可能还会部署memcache或者redis等，总之太过繁琐。

而这时，hugo的出现，让我不禁感叹这人世间的美好，与wordpress相比，可以说是非常之清爽，采用go语言开发，几乎不占用系统资源，纯静态资源，只需在机器上部署一个Nginx代理下就好了，非常之简单。

东西好是好，但是wordpress —》hugo ？？？该如何去做呢？？？

下面进入正题。

安装hugo

由于我这里购买的是腾讯与的云主机，装的是ubuntu16.04的操作系统，在安装hugo时，选择用brew来安装的，直接参考的官方文档，当然首先得先安装brew，安装方法如下

wordpress安装插件

WordPress to Hugo Exporter

安装完成后，直接选择Export to Hugo即可，如下图所示

image-20200728001823993

点击后，就会弹出一个下载框，下载完成后是一个压缩包，目录结构如下：

posts目录就是你的所有文章，全都导出md格式的文件了

wp-content放的是所有的静态文件，例如图片

其他的两个不用管，我这边就没有用到。

需要注意的是：我用的插件是Even，目录名应该是post，所以我这里改了下名

到这里就已经把所有的文章搞过来了，这一步省去了90%的工作量！！！牛逼！！！

基于腾讯云COS的图床配置

有一个问题，关于一些静态资源该如何存放，之前使用wordpress时，直接截图后，使用ctrl + c 来进行粘贴复制，直接保存在服务器上的，但是现在做网站迁移，之前的静态文件，例如图片，全都给打包到了wp-content目录下，虽然图片一张不少，但是在访问的时候，才发现，所有的文章的图片都不显示，打开文章，发现图片地址引用的都是之前博客的地址加上之前的目录结构，现在肯定是不行的，所以之前的图片都要去修改图片地址，但是又有一些问题：

• 新建文章时，新增图片需要先截图、保存、上传、配置图片地址
• 以后再迁移时，如果目录结构发生变化，还需要再次手动修改

基于以上的种种问题，考虑使用腾讯云的对象存储来做图床

Typora配置

参考文档：https://cloud.tencent.com/edu/learning/course-1825-24632

参照此文档，可以配置好COS，使用腾讯云子账号，来进行图片的上传。

通过上面的参考文档，你已经差不多弄完了，但是会有一些问题，例如，我的Typora版本是0.9.92，而文档中，或者官方推荐的版本是：0.9.68

https://github.com/Thobian/typora-plugins-win-img

显然，对于我来说，是不行的，需要修改以下地方

• resources/app/plugins/image/upload.js

在此文件的最下面
$.image.init({
    // 只有下面这里需要设置，上面不需要进行设置
    target:'tencent',
    tencent : {
        // 必须参数，如果你有自己的腾讯云COS改成自己的配置
        // Bucket获取：对象存储->存储桶列表(存储桶名称就是Bucket)
        Bucket: '桶名称',
        // SecretId获取：访问控制->用户->用户列表->用户详情->API密钥
        SecretId: '写成自己的',  
        // SecretKey获取：访问控制->用户->用户列表->用户详情->API密钥
        SecretKey: '写成自己的',
        // Region获取：对象存储->存储桶列表(所属地域中的英文就是Region)
        Region: '地域',
        // Folder获取：对象存储->存储桶列表->存储桶文件夹
        Folder: '要上传的路径',
        // 可选参数
        FileParallelLimit: 3,        // 控制文件上传并发数
        ChunkParallelLimit: 3,       // 控制单个文件下分片上传并发数
        ProgressInterval: 1,         // 控制 onProgress 回调的间隔
        ChunkRetryTimes: 3,          // 控制文件切片后单片上传失败后重试次数
        UploadCheckContentMd5: true, // 上传过程计算 Content-MD5
    },
});

修改完此处，就可以正常的使用了。

Vscode配置

vscode比较简单，可参考此文档：https://eachwang.com/archives/j001html

设置好自己的COS配置信息后，即可上传，快捷键如下：

自动发布文章的流水线

最关键的一步来了，这是关于如何写文章，如何优雅的写文章，目前我是这样做的

• 新建github仓库，用来保存所有文章
• 使用github actions，来完成整个CICD过程
• 编写文章提交脚本，方便提交文章，自动触发webhook，触发github actions 创建一个仓库，比如我这里，仓库名就叫posts

20200731021718

我这里直接在电脑本地新建了一个目录，然后通过git gui 工具克隆了刚创建的仓库地址

20200731022245

接下来就是把从wordpress迁移过来的文章全都放到这个仓库里，为了方便，我把wp-content也给放过来了，不过后面肯定会删掉，所以整个仓库，只存放post目录即可

20200731022841

然后，就是结合github actions来完成整个CICD流程了 1）首先需要在仓库的根目录创建.github\workflows目录

2）随后编写一个yaml文件，文件名随意，如下：

name: Deploy blog
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - name: Execute command
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        script: |
          cd /blog/github/posts
          git pull origin
          rm -rf /blog/blog/content/*
          cp -f -r * /blog/blog/content/
          cd /blog/blog
          bash deploy.sh

我这里使用的是github里的公共的actions

20200731023316

使用方法可参考文档：https://github.com/marketplace/actions/ssh-remote-commands

然后就是在github中设置一些变量，把服务器的秘钥拷到github上，如下：

20200731023528

20200731023555

20200731023615

需要注意的是，需要把服务器上的~/.ssh/id_rsa拷到github上，对应KEY这个变量。

然后，编写一个用于提交文章的脚本，这样就不用每次都手动执行git的命令了，脚本如下：

import os
import datetime
import subprocess
import cdn_flush

class checkNum:
    def __init__(self, filepath):
        self.filepath = filepath

    def get_num(self):
        try:
            with open(self.filepath, 'r', encoding='utf-8') as fr:
                data = fr.read()
                return data.split('=')[1].strip()
        except:
            raise


def exec_git():
    try:
        cur_time = datetime.datetime.now().strftime("%Y%m%d%H%M")
        cur_dir = os.getcwd()
        dst_dir = r"G:\个人博客\文章\blog\posts"
        if cur_dir != dst_dir:
            os.chdir(dst_dir)
            subprocess.call("git pull origin master", shell=True)
            subprocess.call("git add .", shell=True)
            subprocess.call("git commit -m '%s' ."%(cur_time), shell=True)
            subprocess.call("git push origin master", shell=True)
    except:
        raise



if __name__ == '__main__':
    exec_git()
    # 用于刷新CDN缓存
    cdn_flush.flushAll()

可以把这个脚本放到仓库的根目录下。写完文章直接运行就可以了，点一下就完成了。

20200731024110

因为我使用的是Vscode来写文章，所以使用vscode打开此目录，就像现在似的

20200731022549

真是非常的舒服。

完成以上的操作后，我们可以去github上看下github actions的执行结果

20200731024214

我这里都设置好了，随便点开一个可以看下执行结果

20200731024304

需要注意的是，github actions中有一个脚本deploy.sh，内容如下：

#!/bin/bash

cd /blog/blog

/home/linuxbrew/.linuxbrew/bin/hugo -D
/home/linuxbrew/.linuxbrew/bin/npm install
/home/linuxbrew/.linuxbrew/bin/npm run algolia

额，没啥好说的。在这里只需要关注/home/linuxbrew/.linuxbrew/bin/hugo -D这一步就行了。剩下的两行后面的内容会讲到是做什么用的。

至此，整个文章就发布了。其实就一步操作：

• 写文章
• 点击运行python脚本
• 等待…….

博客优化

目前这一块，我能做到的只有这些

• 全站CDN加速
• 对象存储COS 图片CDN加速
• HTTPS安全加密

其他的，随着对这个hugo的熟悉加深后，应该会有一些奇淫技巧吧！

添加评论功能

对于Even这个主题插件来说，添加评论真的太简单了。需要用到utterances ，在使用之前，需要先创建一个仓库，用来专门存放issue的，也就是存放评论的。这个仓库必须是public的

20200731025242

参考文档如下：https://utteranc.es/?installation_id=10183344&setup_action=install

在github上注册完成后，即可使用了。接下来就是配置hugo的config.toml了

[params.utterances]       # https://utteranc.es/
    owner = "dogfei"              # Your GitHub ID
    repo = "blog-comment"

这样就可以了，看下效果

20200731025453

添加搜索功能

搜索功能这里使用的是algolia，参考文档：https://edward852.github.io/post/hugo%E6%B7%BB%E5%8A%A0algolia%E6%90%9C%E7%B4%A2%E6%94%AF%E6%8C%81/

需要去algolia官方网站上去注册下，有免费的，最后的效果如下

20200731025833

先这么仓促的写一下吧。