Travis CI 加 Hexo 实现自动构建部署 Github Pages 博客

NeoNg
本文已发布于我的博客 Ne0Ng's Blog
Travis CI 加 Hexo 实现自动构建部署 Github Pages 博客 | Ne0Ng's Blog

几天前重新安装 fedora 31, 于是趁着过年在家重新搭建了这个博客,顺便折腾了 Travis CI 来自动构建部署我的博客,然后把我的 Hexo 博客文件放到了 Github 上,终于不用怕我重新安装系统时忘记备份我的博客了。同时也不需要在本地配置系统了。<!-- more -->

预先准备

  • Git
  • npm
  • Travis CI
  • Github

操作

安装 Hexo

npm install -g hexo-cli

配置 Hexo

初始化 Hexo 站点

hexo init username.github.io

username 是你的 Github 用户名,当然也可以把 username.github.io 替换成你想要的任何名字

做一些必要的修改

  1. 用文本编辑器打开站点的 _config.yml
  2. 最主要是修改下面这些
项目 解释 怎么改
title 网站的标题 啥都行,例如我的站点标题叫 Ne0Ng's Blog
author 你的名字 这个填上你的名字
language 网站的语言 都能看我的博客了,那就改成 zh-CN
timezone 网站的时区 国内的地区都填上 Asia/Shanghai
url 网站的链接 如果你没有域名的话,就填 username.github.io
其他的修改可以参考 Hexo 的文档

Configuration | Hexo Doc

修改站点的主题

在本文里面,以 Suka 主题为例子

更多自定义参考 Suka Doc

  1. 安装主题
cd themes
git clone https://github.com/SukkaW/hexo-theme-suka.git suka
cd suka
npm install --production
cp -i _config.example.yml _config.yml
  1. 启用主题
# 回到站点的根目录

cat themes/suka/site_config.yml >> _config.yml

编辑站点的 _config.yml,将 theme: landscape 改为 theme: suka

改好之后,你站点的 _config.yml 大概是这样

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: suka

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ''

# Suka-theme
suka_theme:
  search:
    enable: true
    path: search.json
    field: post # Page | Post | All. Default post
  prism:
    enable: false
    line_number: true
    theme: default

本地调试

hexo s --debug

# 确认站点功能正常

将站点文件夹上传到 Github

在本地初始化 git

由于我是在 CI 阶段从网络直接 clone 整个主题,所以我就将 themes/ 加入了 .gitignore,所以这里你还要将主题的配置文件复制到站点根目录内,之后 CI 阶段再将其放回原位置。(如果你用的主题有其他的配置文件时应该一并复制到站点根目录)

复制一份主题的配置文件

cp themes/suka/_config.yml  _config.theme.yml

初始化 git

git init 

确保 .gitignore 内有下面的内容 (如果没有这个文件的话可以自己创建)

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/

在 Github 创建 repo

新建一个 repo 命名为 username.github.io (username 是你的 Github 账户名称)

# 添加 Github 仓库到本地
git remote add origin https://github.com/username/username.github.io.git

# 新建一个名为 source 的分支
git checkout -b source

# 将所有文件添加到 git
git add .

# 添加 commit
git commit -m "initial"

# 将本地的文件推送到 Github 上的 source 分支
git push -u origin source

如果操作上没有问题你上传之后 repo 里面的文件应该差不多是这样的

.
├── _config.theme.yml
├── _config.yml
├── .gitignore
├── package.json
├── package-lock.json
├── scaffolds
└── source

配置 Travis CI

  1. Travis CI 添加到你的 Github 账户
  2. Applications settings 设置让 Travis CI 能够访问你的 repo
  3. Personal access tokensTravis CI 新建一个 token ( 只需要 repo 这个 scopes ),然后把 token 的值记录下来
  4. Travis CI,在你的 repo 页面下点击 More Options 找到 Settings, 然后找到 Environment Variables,建立一个名(NAME)为 GH_TOKEN, 值( VALUE )为你上一步记录的 token,最后保存
  5. 在你的 Github 的项目 source 分支内新建一个名为 .travis.yml 的文件,参考以下内容进行填入,(我都有注释,不要照抄)
os: linux
language: node_js 
node_js:
  - 10  # 使用 nodejs LTS v10
branches:
  only:
    - source # 只监控 source 的 branch
cache:
  directories:
    - node_modules # 缓存 node_modules 加快构建速度
before_script: ## 根据你所用的主题和自定义的不同,这里会有所不同
  - npm install -g hexo-cli # 在 CI 环境内安装 Hexo
  - mkdir themes # 由于我们没有将 themes/ 上传,所以我们需要新建一个
  - cd themes 
  - git clone https://github.com/SukkaW/hexo-theme-suka.git suka #从 Github 上拉取 Suka 主题
  - cd suka
  - npm install --production # 安装 Suka 主题的依赖
  - cd ../.. # 返回站点根目录
  - cp _config.theme.yml themes/suka/_config.yml # 将主题的配置文件放回原处    
  - npm install # 在根目录安装站点需要的依赖 
script: 
  - hexo generate # generate static files
deploy: # 根据个人情况,这里会有所不同
  provider: pages
  skip_cleanup: true # 构建完成后不清除
  token: $GH_TOKEN # 你刚刚设置的 token
  keep_history: true # 保存历史
  fqdn: blog.ne0ng.page # 自定义域名,使用 username.github.io 可删除
  on:
    branch: source # hexo 站点源文件所在的 branch
  local_dir: public 
  target_branch: master # 存放生成站点文件的 branch,使用 username.github.io 必须是 master
  1. 当你保存之后, Travis CI 便会开始部署, 它完成之后,你就可以在你的 repo 里 master 分支查看到生成的站点文件
  2. 这时你应该就可以访问 https://username.github.io 查看你的站点了
写完之后一直再修改,最近修改将一些步骤写清楚了(为一些内容加了注释),现在我认为应该很清楚了,如果你有看到的话欢迎给我留言(有发现什么错误或我写的不够清楚的话更要给我留言😂。

参考

版权声明

本文作者 : Ne0Ng
本文采用CC BY-NC-SA 4.0许可协议.
本文链接 : https://blog.ne0ng.page/archives/proxy-for-dnf/
阅读 3.7k
0 声望
0 粉丝
0 条评论
0 声望
0 粉丝
文章目录
宣传栏