hexo使用jenkins自動部署到阿里雲

nothing-everything發表於2018-04-21
HexoJenkins阿里

hexo使用jenkins自動部署到阿里雲

本地安裝hexo

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
複製程式碼

使用github pages服務部署hexo

我們用來託管部落格的服務叫做 Github Pages，它是 Github 用來提供給個人/組織或者專案的網頁服務，只需要部署到你的 Github Repository，推送程式碼，便可以實時呈現。

首先，你需要有一個 Github 的賬號。然後建立一個名稱為 .github.io 的倉庫來託管網頁即可。

以我的 Github 為例，我的使用者名稱是 dumingcode，所以建立一個名為 dumingcode.github.io 的倉庫，建立的倉庫地址便是：https://github.com/dumingcode/dumingcode.github.io.git 建立完後，我們可以暫時不用管它，不需要往倉庫裡面 push 任何的東西。

hexo部署配置

接著，我們來配置一下本地的 Hexo。

在部落格的根目錄下有一個名為 _config.yml 的檔案，這是部落格的主配置檔案。前面的其他部分我們先不理會，後文再談，我們先看最後的 Deployment 配置項：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:
複製程式碼

根據官方的文件顯示，現在 Hexo 支援 Git、Heroku、Rsync、OpenShift、FTPSync 等部署方式，我們選擇 Git 來部署的話，需要首先安裝 hexo-deployer-git 外掛： cnpm install hexo-deployer-git --save然後編輯上面的配置檔案：

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]
複製程式碼

我們需要把剛才建立的倉庫地址新增進來，branch 和 message 項可以不填，預設情況下推送到 master 分支，這裡我建議使用 SSH 加密的倉庫地址（參看 Github 官方文件配置 SSH 免密操作）。

儲存配置檔案之後，我們在部落格的跟目錄鍵入： hexo g -d便可以把部落格部署到 Github 了。現在，所有人都可以通過 http://.github.io 來訪問自己的部落格。

hexo使用第三方模板

找了半天發現hexo-theme-BlueLake主題很簡潔，於是使用下面的命令安裝（進入blog根目錄執行）。

git clone https://github.com/chaooo/hexo-theme-BlueLake.git themes/BlueLake
cnpm install hexo-renderer-jade@0.3.0 --save
cnpm install hexo-renderer-stylus --save
複製程式碼

本人搭建好的github個人主頁:dumingcode.github.io/，歡迎訪問。

hexo部署到阿里雲

雖說利用github pages服務能夠對外發布部落格，但是作為一個碼農還是希望有自己的域名部落格，但是我比較懶，不想手動釋出部落格。我想自動化地既釋出到github也能同時釋出到個人網站。所以決定採用CICD的方法，CICD工具使用開源的jenkins，jenkins也搭建在阿里雲個人伺服器上。

下載並執行jenkins

注意埠使用的是8081

mkdir /usr/local/jenkins
wget http://mirrors.jenkins.io/war-stable/latest/jenkins.war
nohup java -jar jenkins.war --ajp13Port=-1 --httpPort=8081 &
複製程式碼

安裝nginx

  1. 安裝nginx依賴
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
wget http://nginx.org/download/nginx-1.13.10.tar.gz
tar xvf nginx-1.13.10.tar.gz
./configure --prefix=/usr/local/nginx
make
make install
cd /usr/local/nginx/sbin
./nginx -s reload
nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or direc
需要設定nginx.conf
./nginx -c /usr/local/nginx/conf/nginx.conf
複製程式碼
  1. nginx.conf配置
upstream jenkins {
    server 127.0.0.1:8081;
    keepalive 64;
}
server {
       listen       80;
       server_name  jenkins.buyasset.com;
       client_max_body_size 60M;
       client_body_buffer_size 512k;
       location / {
              port_in_redirect on;
              proxy_pass              http://jenkins/;
              proxy_set_header        Host $host:$server_port;
              proxy_set_header        X-Real-IP $remote_addr;
              proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header        X-Forwarded-Proto $scheme;
      }

    }

複製程式碼

以上通過nginx 反向代理jenkins，在瀏覽器輸入jenkins.buyasset.club就能夠進入jenkins管理後臺。

配置jenkins

在jenkins頁面提示目錄中找到預設密碼，輸入jenkis域名，登陸jenkins。

image

安裝jenkins社群推薦的外掛

image

image

配置github

獲取sercret text

登陸github網站，進入 github->Settings->Developer settings-> Generate new token，點選生成完畢一定記錄下下面的secret text。 secret text一定要記住，忘記的話只能重新生成。

GitHub webhooks 設定

進入GitHub上指定的專案（hexo 倉庫） --> setting --> WebHooks&Services --> add webhook --> 輸入剛剛部署jenkins的伺服器的IP

webhook
圖片中標紅區域是變化的，字尾都是一樣的為github-webhook。

jenkins中的github配置

配置GitHub Plugin

系統管理 --> 系統設定 --> GitHub --> Add GitHub Sever

github server
API URL 輸入 https://api.github.com，Credentials點選Add新增，Kind選擇Secret Text,具體如下圖所示。
image
設定完成後，點選TestConnection,提示Credentials verified for user UUserName, rate limit: xxx,則表明有效。

建立一個freestyle任務

  1. General 設定
    填寫GitHub project URL, 也就是你的專案主頁 eg. https://github.com/your_name/your_repo_name
    general
  2. 配置原始碼管理
    原始碼管理
  3. 構建觸發器，構建環境
    image
  4. 構建
    構建
  5. 構建指令碼 將上圖的構建指令碼替換如下：
cd /var/www/blog（hexo目錄）
git pull
hexo clean
hexo g -d
複製程式碼

  1. 構建後操作

    構建後操作

  2. 構建前clone hexo
    將hexo初始程式碼拉取到/var/www/blog目錄中，以後jenkins會監控github的push操作，一旦發現push會自動更新。 cd /var/www git clone https://github.com/dumingcode/dumingcode.github.io.git blog

nginx反向代理hexo

hexo為靜態網站，所以直接用nginx反向代理即可,nginx指令碼如下：注意root指向的是hexo部署目錄。

server
{
    listen 80;
    server_name blog.buyasset.club;
    index index.html index.htm index.php default.html default.htm default.php;
    root  /var/www/blog;  

    #error_page   404   /404.html;
    location ~ .*\.(ico|gif|jpg|jpeg|png|bmp|swf)$
    {
        access_log   off;
        expires      1d;
    }

    location ~ .*\.(js|css|txt|xml)?$
    {
        access_log   off;
        expires      12h;
    }

    location / {
        try_files $uri $uri/ =404;
    }

}

複製程式碼

測試CICD效果

進入本地hexo目錄，修改釋出的部落格，然後執行hexo g -d，登陸jenkins發現jenkins已經獲取到了push操作，並且執行了自動構建任務。以下為jenkins的變更記錄

Site updated: 2018-04-21 13:35:51 (commit: 76f3c53) (details)
Commit 76f3c530d077782fd66a8ca375afaa17cd188286 by duming
Site updated: 2018-04-21 13:35:51
 (commit: 76f3c53)
複製程式碼

參考連結

手把手教你搭建Jenkins+Github持續整合環境
Jenkins+Github持續整合
Jenkins最佳實踐 hexo自動部署
基於 Hexo 的全自動部落格構建部署系統

相關文章