Wercker+Hugo+Github Pages 搭建並自動部署博客

The Wercker CLI can be used to execute pipelines locally for both local development and easy introspection. http://wercker.com

由於是第一次接觸 Wercker 所以先搭建個博客嘗試一下。

預覽地址: https://axionl.github.io/

倉庫地址: https://github.com/axionl/blog

安裝

其他依賴:

  • git
  • go (可選)
  • govendor (可選)

由於不同發行版有不同的安裝方式,這裏僅以我本地環境(Arch Linux)爲舉例。

安裝可以選擇從社區源開始安裝,或者手動安裝,這裏偷懶從社區源安裝了。

1
$ sudo pacman -S hugo

配置

本地配置

首先建立一個本地倉庫,將 $repo_path 替換成你自己的路徑。

1
$ hugo new site $repo_path

添加主題文件,這裏選擇 Mainroad 主題。

1
2
3
$ cd $repo_path/themes
$ git clone https://github.com/vimux/mainroad
$ rm mainroad/.git -rf # 刪除原本倉庫下的 git 文件

返回目錄,更改配置文件 config.toml,添加theme = "mainroad",其他配置示例如下,個性化定製就不再此多言。

config.toml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
baseurl = "/"
title = "Mainroad"
languageCode = "en-us"
paginate = "10" # Number of posts per page
theme = "mainroad"
disqusShortname = "" # Enable comments by entering your Disqus shortname
googleAnalytics = "" # Enable Google Analytics by entering your tracking id

[Author] # Used in authorbox
name = "John Doe"
bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it."
avatar = "img/avatar.png"

[Params]
subtitle = "Just another site" # Subtitle of your site. Used in site header
description = " John Doe's Personal blog about everything" # Description of your site. Used in meta description
opengraph = true # Enable OpenGraph if true
readmore = false # Show "Read more" button in list if true
leftsidebar = false # Move sidebar to the left side if true
authorbox = true # Show authorbox at bottom of pages if true
post_navigation = true # Show post navigation at bottom of pages if true
postSections = ["post"] # the section pages to show on home page and the "Recent articles" widget
#postSections = ["blog", "news"] # alternative that shows more than one section's pages
#dateformat = "2006-01-02" # change the format of dates

[Params.widgets]
search = true # Enable "Search" widget
recent_articles = true # Enable "Recent articles" widget
recent_articles_num = 5 # Set the number of articles in the "Recent articles" widget
categories = true # Enable "Categories" widget
tags = true # Enable "Tags" widget
tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)

# Enable "Social" widget, if any of "social_*" set a value
social_facebook = "username"
social_twitter = "username"
social_linkedin = "username"
social_github = "username"
social_email = "[email protected]"
social_google_plus = "profileid"

配置成功之後可以在本地先運行一下。

1
$ hugo server

Github 配置

首先在 Github 註冊帳號並創建兩個空倉庫,*.github.io(Github 用戶名替換*)和博客存放倉庫。

image

初始化本地倉庫。

1
2
3
4
5
$ cd $repo_path
$ git init
$ git remote add origin [博客存放倉庫URL]
$ git add ./
$ git push -u origin master

在個人設置頁面生成一個用於部署的 TOKEN

具體需要哪些權限本人沒有測試,只是勾選上repoadmin:repo_hook的全部權限就好,切記將生成的TOKEN保存好。

Wercker 配置

登陸 Wercker,建議直接使用 Github 帳號登陸。

wercker 主頁

添加應用並且選擇你之前創建的項目倉庫,其他的配置基本默認一把梭。

在本地倉庫創建wercker.yml配置文件,將username替換成自己的Github UsernameGITHUB_TOKEN會在隨後的設置中以環境變量的形式填入,請勿在配置文件中硬編碼,隨後提交到 Github.

wercker.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
box: debian
build:
steps:
- arjen/[email protected]
deploy:
steps:
- install-packages:
packages: git ssh-client
- lukevivier/[email protected]:
token: $GITHUB_TOKEN
domain: username.github.io
basedir: public
repo: username/username.github.io

點擊已經創建好的應用,如果build成功的話會在這裏顯示。默認的 Workflows 只有build一項,它會完成生成靜態頁面的工作。

我們需要手動創建一個新的Pipelines,其YML Pipeline name設置爲deploy

創建成功後設置環境變量,添加你開始生成的TOKEN

編輯工作流程,添加deploy即可,這裏可以指定分支,也可以選擇默認全部分支。

最後在選項設置中打開Support,允許 wercker 提供編譯和部署。

其他

除了以上基本服務之外還可以配置其他服務,比如telegram_bot 通知服務或者郵件通知服務,同樣是在wercker.yml文件中配置。