Chan-Chan-Dev 轉眼間也兩個月大了,因爲一些原因開始著手替他做一些調整與升級,這篇是記錄文章,若有興趣的話歡迎一起看看 Chan-Chan-Dev 經歷了哪些調整吧!

HIHI~😍 如果你是第一次來的話,『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。
若你也喜歡用這種方式學習的話,歡迎加入 Chan-Chan-Dev Facebook 的粉絲團,在發佈的時候就有比較多機會收到通知喔!😍

前情提要

轉眼間 chan-chan-dev.com 上線也大概一兩個月了,它是用 Hexo 部落格框架建立的網站。建立的過程有記錄在 《架設部落格第一次就上手 Hexo + Github + 自訂網域》當中。今天則要聊聊這陣子對於 chan-chan-dev.com 的升級調整。

這一篇比較類似記錄過程的性質,不諱言很多技術也是自己第一次摸索接觸,因此若有錯誤的地方都歡迎提出來討論喔 😆

🎯  Chan-Chan-Dev 之前已經完成了些什麼呢?

✅   設定基本的 Hexo 專案!
✅   使用 Butterfly 的主題套件(也就是目前的主題)!
✅   使用 hexo-deployer-git 套件將網站部署在 Github Page 上,用 <github 帳號>.github.io 作爲網址!
✅   去 GoDadday 購買網域 chan-chan-dev.com
✅   因爲 Chan-Chan-Dev 有大量的插畫圖檔,如果都放在 Git 很快就會容量爆炸了,因此額外幫這些圖找個家。目前是放在 AWS 的 S3
✅   在每篇文章最後加上 Liker 的內容!
✅   使用推播通知服務 WebPushr

至於這次做了些哪些升級可以參考目錄,若有興趣的主題可以直接點選直達喔! 🚄

接下來就從為什麼會有升級動機的故事開始吧。

好好的幹嘛要調整?

其實上述的設定基本上已經完成 80% 的基礎設定,應該就可以過著幸福快樂的寫部落格日子?

問題馬上發生就在自己第一次發佈文章的時候遇到了… 😭

文章發佈之後…

因爲使用 hexo-deployer-git 這個套件發佈,它的預設似乎是會指向 <github 帳號>.github.io 的網址,因此每次在新文章完成部署上線的時候,總是會在 Github Page 自動切回<github 帳號>.github.io 的網址,因此每次發佈之後都要到 Github Page 重新設定 Custom domain 的部分,不然 chan-chan-dev.com 這個網址就無法順利使用 😣 😣 😣

這個小困擾一開始對自己似乎也沒有太大的障礙,只是每次發佈的時候都要去 Github Page 調整一下上述的設定。但隨著在四月的時候比較大量發文的時候,這個困擾就開始長大了許多 😬 😬 😬

Github Page 發佈發生錯誤

在發佈上一篇 《瀏覽器學習筆記 Part 2 - 當網址被輸入後,發生了什麼事呢?》的時候發生了我在本機端已經發佈到 Github Page 上,而網站卻依然一直看不到這篇文章的狀況 😭

在本機端上完全正常運作,而在 Github Page 上卻顯示發生錯誤,黑人問號的我就得到一個連結 About Jekyll build errors for GitHub Pages sites

簡單來說就是:叫你自己用 Jekyll 在自己的電腦上跑跑看有什麼問題就對了,但後來在自己亂 try 的之後,消失的那篇文章居然神奇的出現了! 😑(實際上那時候做了什麼已經不可考了…)

那時候突然覺得一直用 Github Page 無法自己完全地控制似乎也不是長久之計,於是開始有了把 chan-chan-dev.com 架在自己的 Server 上的想法。

Digital Ocean

之前在工作中比較常用的是 AWS 的 EC2,只是之前都是用來 Side Projects 的測試,是買在比較遙遠卻相對比較便宜的 US East (N. Virginia) Available Regions,代價就是會有很大的延遲 😆 😆 😆

Digital Ocean 是因爲強者我同事的分享,所以才試試看的。

目前 chan-chan-dev.com 使用最基本的 Basic Plan 放在 Singapore 的區域,相較於 US East (N. Virginia),操作 Singapore 主機的速度就快的跟光速一樣(廢話! 😆)

如果之前沒有使用過 Digital Ocean 的話,它很貼心地提供免費使用 60 天 的額度扣打。

有興趣也可以點擊這裏玩玩看囉!

只是記得若不玩了要把 Droplet 『砍掉』喔,不然超過 60 天『還是會被扣款』的!!!

至於 Server 上的設置就是很簡單地把 Hexo Build 完的檔案上傳上去,設定靜態網站的 Nginx Configure,爲了網址前面的小小鎖頭 🔒 ,不免俗地要 Let’s Encrypt 一下。

因爲平常在工作中不常設定上述的伺服器環境,因此中間也花了不少的時間呢 😅,不過多做一次就多一次的經驗值囉!加油!

Github Actions

alt

因爲前陣子處理到了 JenkinsCI/CD 相關任務。也耳聞了 Github Actions 好長一段時間,只是工作上似乎都沒有機會碰到。於是想說就拿 chan-chan-dev.com 來玩玩看簡單的 Github Actions 吧 😍

Github Actions 小小目標

希望寫完文章後,Git Merge 到 Master 之後就自動幫我完成 Build 並且上傳到 Digital Ocean 的 Server 上完成發佈的動作!

以下是希望設定 Github Acton 完成的事情:

當有 commit push 到 master 的時候,完成以下的事情:

  • npm install 下載套件
  • npm run build 執行 hexo generate build 網站的檔案內容
  • 把 build 出來的內容用 ssh 的方式上傳到 server 上

從專案裡可以找到 Actions 的分頁

從專案裡可以找到 Actions 的分頁,點擊 set up a workflow yourself 之後就會跳到了可以讓我們輸入 workflowyml 檔的地方。

以下是 chan-chan-dev.com 目前的設定:

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
name: CI

# Controls when the action will run.
on:
# Triggers the workflow on push
push:
branches: [ master ]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "build"
build:
# The type of runner that the job will run on
runs-on: ubuntu-latest

# Steps represent a sequence of tasks that will be executed as part of the job
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/[email protected]

- name: Build Hexo Asset
run: |
npm install
npm run build

- name: Deploy to Server
uses: easingthemes/[email protected]
env:
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
SOURCE: "public/"
REMOTE_PORT: ${{secrets.PORT }}
REMOTE_HOST: ${{ secrets.HOST }}
REMOTE_USER: ${{ secrets.USERNAME }}
TARGET: ${{ secrets.REMOTE_TARGET }}
EXCLUDE: "/public/, /node_modules/"

因爲上傳檔案時需要 Server 登入帳號與 ssh key 相關的敏感資料,對於這些類型的資料可以放在專案 Settings 的 Secrets 裡,之後就可以用 ${{ secrets.YOUR_SECRET }} 的形式在執行的時候取得囉!

另外自己也是剛在摸索 github action,因此這裏就不講解裏面的指令用途,附上那時候參考的更有相關教學囉!

中間遇到的問題點

那個。。。事情當然不會是一帆風順的 😅

Github 專案內的 themes/butterfly 消失

在 Github Actions 中遇到的第一個錯誤就是在上面執行 hexo generate,因爲它不認識 Butterfly 用的 note 語法,因此在編譯的過程中頻頻發生錯誤 😵‍💫 😵‍💫 😵‍💫

1
2
3
{% note success simple %}
Type something else ~
{% endnote %}

安裝 Butterfly 的時候,相關的套件檔案應該是要放在 themes/butterfly 的目錄下,但在 chan-chan-dev.com 的 github 專案的 themes/butterfly 卻沒有任何檔案。

突然才想到當初是使用 npm 的方法安裝:

1
npm i hexo-theme-butterfly

而在 Butterfly 的安裝文件裡也有提到以下這段:

此方法只支持 Hexo 5.0.0 以上版本
通過 npm 安裝並不會在 themes 裏生成主題文件夾,而是在 node_modules 裏生成

於是從這篇文章找到解法,裏面的大大提到說:

最後發現在上傳源碼到 blog 時,NexT主題檔由於本身是一個專案,有自己的 git 紀錄,因此 push 時沒有跟著傳到 github

它裡面提到三個解法,分別是:

subtree 與 submodules 到底有啥不同呢?

這篇文章寫的很棒棒,有興趣可以參考囉!

我後來自己選擇第二個方案,使用 subtree 的方式。原因如下:

  • 想要繼續可以跟上 butterfly 的新版本
  • 自己有調整 butterfly 裏面的內容,例如在 post.pug 加入 Liker 的內容

實際處理方式

在 Github 上 Fork 一份 Butterfly 的專案到自己的帳號底下,因爲有把原本的 Butterfly 專案作爲 upstream,到時候也比較容易更新,並且調整上述自己想要加入 Liker 的內容,並且 subtree 自己的 Fork 出來的 Butterfly 專案。

經過上述的調整就可以順利地在 github actions 上執行 hexo generate 的指令囉!!🚀 🚀 🚀

因此,若你有順利看到這篇文章的話,那就已經是用 github actions 部署上去的囉~ 💪 💪 💪

GoDaddy 調整網域主機 IP

因爲之前的版本是放在 Github 上,因此之前的在 GoDaddy 設定都是指向 Github:

等到 Digital Ocean 的伺服器設定好了之後,就可以把 chan-chan-dev.com 指向伺服器的 IP 啦!😍

新申請網域 chanchandev.com

因爲自己在 Server 上設定 Nginx Configure 的時候,一直要輸入 chan-chan-dev.com 這個域名,才覺得當初自己爲啥要用 chan-chan-dev.com 而不用 chanchandev.com 就好…?😱 😱 😱

對,我就是那麼三心二意的人 🤣 🤣 🤣

因此,我又去 GoDaddy 申請了 chanchandev.com 的網域,並且也在 Server 調整了 Nginx 的設定,因此現在點擊 chanchandev.com 的網址的話,會看到一模一樣的網站。只是考慮到先前的網址都是使用 chan-chan-dev.com的網域,因此這兩個網址可能會並存好一陣子囉!😆 😆 😆

Cloudflare

其實到上面的調整就差不多可以打完收工了,上述已經完成了:

  • 設定新的 Server 專案環境
  • 將 GoDaddy 指向新的 Server IP
  • 設定 Github Actions 讓 push 到 master 即完成部署上線動作

強者我同事之前也跟我分享 Cloudflare 讓他用的很開心,於是自己也忍不住玩玩看。

Cloudflare 是一種 內容傳遞網路(CDN) 的服務。CDN 是指一組分佈在不同地理位置的伺服器,協同工作以提供網際網路內容的快速交付。

至於為什麼要使用 CDN 呢?Cloudflare 也有準備了一篇很好理解的文章,在這邊分享給大家囉。

操作其實不會太困難,跟著 Cloudflare 上的指引操作,就可以順利地將 chan-chan-dev.com 順利地託管在 Cloudflare 上囉 😍

後記

呼~經過了一番努力終於把網站告一段落了 😭 😭 😭 ,在過程中也接觸到之前很多沒有碰過的新服務,感覺是很棒的學習經驗。

這篇文章的記錄的成分居多,如果你居然有看到這裡的話,真的是十分感謝你的捧場!

若文章的內容有錯誤的地方,也歡迎隨時一起討論交流。😘

最後感謝你的閱讀囉,我們下次見!Bye ~ 🚀