Travis CI 加 Hexo 實現自動構建部署 Github Pages 博客

時間 2020-06-10

標籤 travis hexo 實現自動構建部署 github pages 博客欄目 Git 简体版

原文原文鏈接

本文已發佈於個人博客 Ne0Ng's Blog
Travis CI 加 Hexo 實現自動構建部署 Github Pages 博客 | Ne0Ng's Blog

幾天前從新安裝 fedora 31, 因而趁着過年在家從新搭建了這個博客，順便折騰了 Travis CI 來自動構建部署個人博客，而後把個人 Hexo 博客文件放到了 Github 上，終於不用怕我從新安裝系統時忘記備份個人博客了。同時也不須要在本地配置系統了。html

預先準備

Git
npm
Travis CI
Github

操做

安裝 Hexo

npm install -g hexo-cli

配置 Hexo

初始化 Hexo 站點

hexo init username.github.io

username 是你的 Github 用戶名，固然也能夠把 username.github.io 替換成你想要的任何名字node

作一些必要的修改

用文本編輯器打開站點的 _config.yml
最主要是修改下面這些

項目	解釋	怎麼改
`title`	網站的標題	啥都行，例如個人站點標題叫 `Ne0Ng's Blog`
`author`	你的名字	這個填上你的名字
`language`	網站的語言	都能看個人博客了，那就改爲 `zh-CN`
`timezone`	網站的時區	國內的地區都填上 `Asia/Shanghai`
`url`	網站的連接	若是你沒有域名的話，就填 `username.github.io`

其餘的修改能夠參考 Hexo 的文檔
Configuration | Hexo Doclinux

修改站點的主題

在本文裏面，以 Suka 主題爲例子
更多自定義參考 Suka Docgit

安裝主題

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

啓用主題

# 回到站點的根目錄

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

編輯站點的 _config.yml，將 theme: landscape 改成 theme: sukagithub

改好以後，你站點的 _config.yml 大概是這樣npm

# 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 階段再將其放回原位置。(若是你用的主題有其餘的配置文件時應該一併複製到站點根目錄)json

複製一份主題的配置文件緩存

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

初始化 gitbash

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

將 Travis CI 添加到你的 Github 帳戶
去 Applications settings 設置讓 Travis CI 可以訪問你的 repo
去 Personal access tokens 爲 Travis CI 新建一個 token ( 只須要 repo 這個 scopes )，而後把 token 的值記錄下來
去 Travis CI，在你的 repo 頁面下點擊 More Options 找到 Settings，而後找到 Environment Variables，創建一個名(NAME)爲 GH_TOKEN, 值( VALUE )爲你上一步記錄的 token，最後保存
在你的 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