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

因爲前陣子處理到了 Jenkins 的 CI/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 的分頁，點擊 set up a workflow yourself 之後就會跳到了可以讓我們輸入 workflow 的 yml 檔的地方。

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

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/checkout@v2

      - name: Build Hexo Asset
        run: |
          npm install
          npm run build
      
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@main
        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

它裡面提到三個解法，分別是：

直接刪掉套件內的 .git 資料夾
使用 subtree
使用 submodules

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 ～ 🚀

圈圈工程師

ChanChanDev 升級記錄！一起用 Github Actions 潮一下吧！