专栏首页TencentOS-tinyHexo博客进阶教程(二)| 使用Appveyor备份并持续集成博客

Hexo博客进阶教程(二)| 使用Appveyor备份并持续集成博客

1. 待优化问题

使用hexo d命令部署Hexo博客时,在Github仓库上传的只是 public 文件夹中生成的页面内容,这样就带来了一些问题:

  • 本地博客文章的md源文件没有备份,哪天硬盘挂了可咋整?
  • 博客是在家里的电脑上更新发布的,换到公司的电脑上想发布一篇,咋整?

别慌,小问题,用持续集成服务就可以解决这些问题,先放上一张使用持续集成服务之后的整体架构图:

看不懂不要紧,这篇文章的目的就是让你看懂这张图!

2.什么是持续集成服务

持续集成服务的全名叫做Continuous Integration,简称 CI,它其实是一个云端自动化构建(编译)代码的服务。

它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。

C语言的源文件是.c文件,使用gcc命令编译出.out可执行文件,这个过程称为编译构建。

同样可以类比一下,Hexo博客的源文件是.md文件,使用hexo g命令即可生成html页面,这个过程也可以叫做编译构建。

那么,这样的一个云端自动化构建服务,为什么称为持续集成呢?

因为Github仓库中的代码只要有一点点变更,该服务就会自动运行构建和测试,反馈运行结果,确保符合预期以后,再将新代码"集成"到主干,所以该服务称为“持续”“集成”。提供持续集成服务的工具非常多,因为大多数用户都是在Windows下,所以在本文中我们使用持续集成服务工具appveyor。

接下来进行一个简单的分析,如何将持续集成服务应用到Hexo博客上?

首先分析一下本地Hexo的目录:

可以在Github新建一个仓库,作为Hexo源文件的备份仓库,将上图中标示出需要备份的文件上传,这样就达到了备份的目的。

然后对该仓库编写脚本进行持续集成:

在云端建立环境的脚本代码

  • 在windows下安装nodejs环境;
  • 安装hexo博客框架;
  • 安装nodejs依赖模块;
  • 安装hexo插件(如果有的话,比如abbrlink插件);

在云端进行构建的脚本代码

  • 执行hexo d命令生成HTML页面,即public文件夹;

在云端部署HTML页面

  • 将public文件夹部署到Hexo站点仓库;

3. 上传Hexo博客源码到备份仓库

在Github上新建一个远程仓库:

然后在站点根目录初始化本地仓库,并且与远程仓库关联起来

git init
git remote add origin https://github.com/Mculover666/Hexo-Blog-Source.git

因为不需要备份所有文件,所以修改.gitignore文件来说明忽略的文件和文件夹,通常需要备份的文件有:

  • source文件夹的所有内容
  • scaffolds文件夹的所有内容
  • 站点配置文件:_config.yml
  • themes文件夹的所有内容

综上,.gitignore文件的内容如下:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
public/
package-lock.json

然后执行如下git命令开始推送:

git add .
git commit -m "hexo source"
git push origin master

4. 使用AppVeyor建立CI

访问AppVeyor登陆页面,使用GitHub账号登陆即可:

https://ci.appveyor.com/login

然后创建新的项目:

选择需要绑定的Github仓库:

5.新建Access Token并加密

因为Appveyor需要向Github上的仓库提交文件,所以需要在Github生成一个token给appveyor,可是该脚本是公开的,肯定不能直接把token写进去,所以appveyor提供了一个加密的功能,可以将加密后的token放到脚本里公开。

首先到Github生成Access Token,生成方法可以参考:

  • Creating a personal access token for the command line。

https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line

在GitHub生成好Access Token之后,在AppVeyor加密页面把Access Token加密之后再替换Your GitHub Access Token

https://ci.appveyor.com/tools/encrypt

6. 添加自动化构建文件

创建appveyor项目的时候绑定了GIthub仓库,所以需要在该仓库中存放appveyor.yml脚本文件,一旦该仓库有变化,就会执行该脚本的内容:

在源文件中手动添加appveyor.yml文件:

该文件的内容如下:

建议直接复制过去,这些文件内容中只需要替换Your GitHub Access Token为第4步中生成并加密的token即可,不需要搞懂!

clone_depth: 5
environment:
access_token:
    secure: [Your GitHub Access Token]
install:
    - node --version
    - npm --version
    - npm install
    - npm install hexo-cli -g
build_script:
    - hexo generate
artifacts:
    - path: public
on_success:
    - git config --global credential.helper store
    - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x-oauth-basic@github.com`n"
    - git config --global user.email "%GIT_USER_EMAIL%"
    - git config --global user.name "%GIT_USER_NAME%"
    - git clone --depth 5 -q --branch=%TARGET_BRANCH% %STATIC_SITE_REPO% %TEMP%\static-site
    - cd %TEMP%\static-site
    - del * /f /q
    - for /d %%p IN (*) do rmdir "%%p" /s /q
    - SETLOCAL EnableDelayedExpansion & robocopy "%APPVEYOR_BUILD_FOLDER%\public" "%TEMP%\static-site" /e & IF !ERRORLEVEL! EQU 1 (exit 0) ELSE (IF !ERRORLEVEL! EQU 3 (exit 0) ELSE (exit 1))
    - git add -A
    - if "%APPVEYOR_REPO_BRANCH%"=="master" if not defined APPVEYOR_PULL_REQUEST_NUMBER (git diff --quiet --exit-code --cached || git commit -m "Update Static Site" && git push origin %TARGET_BRANCH% && appveyor AddMessage "Static Site Updated")

如果有安装了插件,比如abbrlink,可以在install部分中现有的命令之后继续添加,如下是我的配置(举个例子,说明如何添加):

7. 设置Appveyor环境变量

添加好appveyor.yml之后,再到Appveyor portal添加以下四个变量:

  • STATIC_SITE_REPO:博客站点Github仓库地址;
  • TARGET_BRANCH:博客站点仓库的branch(默认是master)
  • GIT_USER_EMAIL:GitHub账号的邮箱;
  • GIT_USER_NAME:GitHub账号的用户名;

8. 大功告成

至此配置完成,以后只需要执行:git push将源代码上传到仓库后,Appveyor就会检测到变化,然后自动完成推送和部署。

执行推送

首先暂存所有更改并提交:

git add -A
git commit -m "first"

然后推送到远程仓库:

git push origin master

观察自动化脚本运行情况

登录Appveyor网站,在current build中即可看到当前构建情况:

可以看到自动化脚本运行成功,站点部署成功,可以再去看看博客站点仓库是否更新。

9. 关于更换电脑的操作

使用自动构建服务后,Hexo站点仓库(mculover666.github.io)和我们没关系了,我们只需要管理Hexo源码仓库(Hexo-Blog-Source)即可

在写好一篇文章或者做了任何修改之后,不需要进行任何操作,只需git push到源码仓库,自动构建服务会自动检测到修改,然后生成页面,部署页面到站点仓库,是不是很方便呢?

所以,更换电脑之后,首先将Hexo源码仓库拉取下来,然后修改或者添加新的文章进去,最后git push到源码仓库,ok!剩下的一堆事情,交由自动构建服务去做吧~

整个系统的架构可以调整为:

这篇Hexo优化教程过程有点复杂,但是不难,教程是经过我验证的,跟着教程一步一步做,就可以的!另外可以学到持续集成服务CI的使用,这个在公司里的代码时肯定会用的,快去试试吧~

本文分享自微信公众号 - Mculover666(Mculover666),作者:mculover666

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MSP430F5529时钟系统深究

    时钟系统是一个数字器件的命脉,对于普通的51单片机来说,它的时钟来源只有外部晶振,然后每12个振荡周期完成一个基本操作,所以也叫做12T单片机,但对于...

    Mculover666
  • CoAP协议详细讲解+服务器搭建测试+数据抓包分析

    在IoT项目架构中,除了基于TCP的MQTT协议,使用最多的就是基于UDP的CoAP协议,两者可以说是平分秋色,各有优势。

    Mculover666
  • Node-RED | 无需一行代码,快速在浏览器中构建你的可视化 IoT Web App

    Node-RED是一种编程工具,通过在浏览器中拖拽的方式将硬件设备、API和在线服务连接在一起,构成数据流,使用户可以快速的创建出自己的Web应用。

    Mculover666
  • iOS 逻辑自动化测试实践

    在本文中,以iOS手机管家为例子,逻辑自动化测试的范围选定为 ObjectController 文件夹中的类,此文件夹中的类文件均为与 UI 无关的业务逻辑类。

    腾讯移动品质中心TMQ
  • Github进行fork后如何与原仓库同步

    实在是……有太多人同时在帮忙修订错别字或优化 xiaolai 的 the-craft-of-selfteaching 了。如果你提交的 pull request...

    刘娟娟PRESSone
  • 五、开始Github和码云之旅,新手如何上路

    我:Git是一个跟踪代码更改的版本控制系统,而GitHub是一个基于Web的Git版本控制存储库托管服务。它提供了Git的所有分布式版本控制和源代码管理(SCM...

    润森
  • JVM的String Pool到底是个什么鬼?

    摘要:有关string,你一定看了不少的内容。你可能以前也看到过类似“new String(“xxx”)和String s2 = “Cat" 有什么区别?”之类...

    ImportSource
  • python趣味玩法

    Always make a total effort, even when the odds are against you.

    小闫同学啊
  • woocommerce如何隐藏SKU

      有时我们不想在woocommerce网站前台显示SKU,如下图所示,因为sku一多整个排版可能会乱,那么要如何隐藏sku呢?随ytkah一起来看看

    ytkah
  • 推荐好玩一些的GitHub项目27天成为Java大神c语言220个经典案例sublime text 优秀插件推荐为Linux一键安装好看的字体树莓派网易云音乐

    快速配置vim ? 快速配置vim 打开终端,执行下面的命令就自动安装好了: wget -qO- https://raw.github.com/...

    zhaoolee

扫码关注云+社区

领取腾讯云代金券