# 使用 iPad 與 Hexo 開發個人部落格!

※本文章同步刊登於[個人部落格](https://austin9109.github.io)

## 前言

在去年底我入手了 ipad pro 第五代，一直想利用他來做點新鮮事，加上陸陸續續都有在寫些技術類型的小筆記，可以將自己的一些學習經驗或是其他跟工程相關的知識統整起來分享其實是一件很酷的事情，在訓練自己統整知識能力的同時順道練習寫作文筆(甚至可以裝逼 XD)，因此近期一直有想要撰寫個人部落格的念頭，

在研究有什麼好用的架站平台時，意外發現 [**Hexo**](https://hexo.io/zh-tw/) 這個部落格框架，仔細研究一下發現居然還是台灣人寫的！當然二話不說選了很符合工程師口味的他來當部落格平台。但是由於框架的限制，在平板電腦上並不能很直接的在這個平台上開發，為了完成 **在平板上也能透過 Hexo 來進行部落格開發**這個願景，陸陸續續查了很多相關資料，但很多資料其實已經過時，導致走了很多歪路，也才有了這篇文章誕生的契機，將它獻給我的部落格作為第一篇文章再適合不過了。因此**這篇文章會完全照著下述的流程撰寫並部屬完成**。雖然說步驟有點繁瑣，但在過程中學習到很多新的知識，以下廢話不多說，快來看看怎麼辦到的！

<!--more-->

## 事前準備

要完成在平板上從撰寫到部屬在**Hexo**上一條龍流程，需要準備以下東西來打造開發環境：

1. 一個 Github 帳號，如果對 github 有一定程度了解會更好。
2. Google 雲端平台 (GCP) 帳戶申請
3. 平板電腦。(其實要使用一般手機也是行，但是會打字打的很想死)

另外提及的是我們可能會用到 [**Markdown**](https://markdown.tw/) 語法來撰寫文章，已經懂得語法的人能夠更快上手，此外在架設 GCP 伺服器的時候會需要輸入一點指令，對 linux 系統指令有一定的了解會較好。

## 流程

如果將完整步驟用圖像的方式畫出來，大概會長這樣:

</br>

<center>

<img src="https://i.imgur.com/iQhVD7N.png" width = "500" height = "200" alt="Working Flow"/>

</center>

</br>
</br>

這裡我們會用到的工具主要有幾個: **GCP**、**Github**、**Hexo**、**Code Server**，這邊簡單說明一下在整個流程中上面提到的那些工具所扮演的角色:

#### 1. Github

部落格需要有個網路空間掛載撰寫好的文章，別人才能夠透過網址看見他們，前面提到的 Hexo 在這當中扮演的角色比較像是一個框架，他幫你把打好了的文章變成可以載網頁上顯示的語言內容，並且推送到網路空間去。自從 Github 推出 [**Github Page**](https://pages.github.com/) 服務後很顯然這是一個作為網路空間的好選擇。

此外，Hexo 在產出部落格的途中會產生很多網頁檔案，這些檔案相當於搭建起部落格的骨架，一旦這些檔案遺失了相當於部落格直接死去，因此最好找個方法能夠備份他們。而對工程師來說，最好用的源碼備份工具是什麼？沒錯～當然是 Github ！因此使用 **Github** 能夠幫我們完成**建立網路空間與存放部落格檔案**兩大目標。

#### 2. GCP

Hexo 大部分的內容是用 **Node.js** 撰寫，要使用它必須要有能夠運行 **Node** 的環境，但在平板上辦不到這件事，加上我們需要能在平板上使用 Github 相關功能(推送網頁到 Page 上)，平版上支援這類型功能的程式大多要錢，因此最後想到的解決辦法是透過架設 **VM** (虛擬機)來處理這些平板辦不到的事。**GCP** 在這部分很友善的推出**滿足某些條件下免費**的方案，因此最後就選擇他了。

#### 3. Code Server

在 VM 上開發固然可以解決針對平板的那些痛點，但是由於虛擬機沒有圖形化介面，想要臨時在虛擬上修正網頁內容或是 Hexo 設定只能打開 `vim`去修改。[**VS-Code**](https://code.visualstudio.com/) 是微軟推出的一款強大的程式碼編輯工具，在找資料的過程中偶然發現有 **Code-server** 這個神奇的東西，能夠將 VS 架設在虛擬機上，我們可以很方便的透過外部 IP 連進我們架好的 Server ，快速修改 Hexo 中的文件。

##### 補充: 後來想了一下應該可以嘗試在 VM 上安裝 Hexo 後台管理工具，直接將 Hexo 的文檔透過後台工具直接貼到文章中應該也是可行的做法，而且也可以較貼近的顯示文章最後顯示內容，不過目前還沒做較多涉略，之後有空再來研究，使用 VSCode 的體驗還是不錯的。

因此就上述內容，整體思路具體為 **將 Hexo 架設在 VM 上，使用平板撰寫好 Markdown 的文章，並將打好的文章透過 Code-Server 複製進 VM 中，最後再透過 Hexo 指令將生成好的靜態網頁部屬到 Github Page 上，順便養成好習慣將 Hexo 備份**。(浩大工程)

## 將 Hexo 架設在 GCP 上

Hexo 的基本觀念這邊就不多說，網路上有很多實用的文章，我自己是參考[Mario](https://ed521.github.io/2019/07/hexo-install/)大的文章，裡面都講解得很清楚，這邊重點著重在如何將 Hexo 部署在 GCP 上以及過程中會遇到的問題。

### 1. 申辦 GCP 以及 VM

首先利用手邊有的 Google 帳號去[申請開發人員](https://cloud.google.com/gcp/?hl=zh-tw&utm_source=google&utm_medium=cpc&utm_campaign=japac-TW-all-zh-dr-bkws-all-all-trial-e-dr-1009882&utm_content=text-ad-none-none-DEV_c-CRE_540744604695-ADGP_Hybrid%20%7C%20BKWS%20-%20EXA%20%7C%20Txt%20~%20GCP%20~%20General_cloud%20-%20platform-KWID_43700061092164566-aud-1644542956068%3Akwd-87853815&userloc_9040380-network_g&utm_term=KW_gcp&gclid=Cj0KCQjwmuiTBhDoARIsAPiv6L98_IYHQHdI-RUuFZjWzllcjbrDXfpYFK52CmHfSWCAhHqp53u8MYQaAqhYEALw_wcB&gclsrc=aw.ds)，申請好之後會送幾千塊，基本上是用不完的。接著我們前往 Google 免費計畫頁面，可以看到免費方案的申請規則如下(文章撰寫時間為20220507):

- 在以下其中一個美國地區每月 1 個非先佔 e2-micro VM 執行個體：
- 奧勒岡州：us-west1
- 愛荷華州：us-central1
- 南卡羅來納州：us-east1
- 每月 30 GB 的標準永久磁碟
- 在以下地區每個月可使用 5 GB 的快照儲存空間：
- 奧勒岡州：us-west1
- 愛荷華州：us-central1
- 南卡羅來納州：us-east1
- 台灣：asia-east1
- 比利時：europe-west1

*(sources: GCP)*

</br>

接著從選單中找到 Computer Engine -> VM 執行個體，進入頁面後點擊建立 VM 個體。

<center>

<img src="https://i.imgur.com/TiEDk03.png" width = "300" height = "300" alt=""/>

</center>

<br>

往下瀏覽，找到機器設定與開機磁碟兩個區域，依照前面提到的規格選填裡面的內容，作業系統這邊我們選擇 **Ubuntu 18.04**。

<center>

<img src="https://i.imgur.com/Z6zi5ep.png" width = "500" height = "300" alt=""/>

</center>

<br>
<br>

<center>

<img src="https://i.imgur.com/owkrjTn.png" width = "600" height = "260" alt=""/>

</center>

<br>

**最後特別注意，防火牆的兩個選項都要打開，後面才能夠透過外部 IP 連進我們的 Server**，到這邊為止我們已經成功建立好 VM 了。

<center>

<img src="https://i.imgur.com/rg2ZSct.png" width = "500" height = "160" alt="防火牆設定選項"/>

</center>

### 2. 開通防火牆序列埠以及外部靜止 IP

架設好 VM 後，我們還需要做幾點設定才能夠從外部設備透過網路的方式連進我們的伺服器，一是**建立防火牆規則**，二是**新增靜止 IP**。

#### A. 建立防火牆規則

VM 預設的幾個序列埠都有使用對象，若有新的連線需求需要自己新增才可以連線。打開防火牆設定 -> 選擇建立防火牆規則，來源選擇 `IPV4`，序列埠選擇 `TCP` 並打上自己的埠碼(這裡使用 `8080` 為例)。

<center>

<img src="https://i.imgur.com/BddPdhd.png" width = "700" height = "500" alt=""/>

</center>

<br>
<br>

<center>

<img src="https://i.imgur.com/uQQwWN7.png" width = "500" height = "500" alt=""/>

</center>

#### B. 建立防火牆規則

當我們想透過遠端連進架設好的伺服器時需要 `固定式 IP` 才能夠從外部設備找到伺服器。設定方法為前往網路設定 -> 選擇保留外部靜止位址，並將剛建立好的 VM 連接到 此靜止 IP 上。(注意 IP 區域需與 VM 區域一致才連接的到)

<center>

<img src="https://i.imgur.com/QaWMLw1.png" width = "500" height = "135" alt=""/>

</center>

<br>
<br>

<center>

<img src="https://i.imgur.com/IxX1u5n.png" width = "400" height = "550" alt="IP區域需與先前新增VM區域一致"/>

</center>

到此完成 GCP 所需的基本設定。

### 3. 架設 Hexo 與 GCP 上

這邊其實是最沒有問題的部分，照著大大的文章應該可以順利地安裝，不過我在 `GCP` 平台上安裝 `node` 時出現許多相依性問題，後來嘗試改用 `nvm` 套件來管理 `node` 版本，有興趣的朋友可以參考這篇文章: [nvm：安裝、切換不同 Node.js 版本的管理器](https://titangene.github.io/article/nvm.html)。

另外提及的是有些人可能會遇到 `SSH` 連線斷掉 `node` 版本每次都要重設的麻煩，後來搜了一些資料發現是沒有設定預設使用 `node` 的版本，使用以下指令鍵入預設版本後，下次重連打上 `node -v` 應該就不會再出現找不到 `node` 的問題了。

nvm alias default <Your_Version>

</br>

## 在 GCP 上架設 Coder-Server 並貼入寫好的文章

架設好 `VM` 後，我們可以透過幾種方法連到我們的 `VM` 中，比較快速的做法為直接從 `GCP` 中的 `SSH連線` 選項透過小視窗操作，另外也可以在平板上下載如 [**Terminus**](https://termius.com/) 的 `SSH` 連線工具來協助操作。這裡示範直接從 `GCP` 中連線的方式，回到 `VM` 檢視頁面，點選剛建立好的 `VM` 並選擇透過 `SSH` 連線:

<center>

<img src="https://i.imgur.com/bgd1H9A.png" width = "350" height = "150" alt=""/>

</center>

<br>

進入 `VM` 後，使用以下指令安裝 `Code-Server`:

curl -fsSL https://code-server.dev/install.sh | sh

為了確保他人沒辦法任意進入到我們的 Server 當中，我們可以在啟動 Server 的時候開啟密碼服務選項，這個密碼會存放在 `Code-Server` 的設定檔中。先進入到設定檔的資料夾底下，並用 `vim` 指令開啟檔案:

// 進入含有 config 檔案的資料夾
cd ~/.config/code-server

// 使用 sudo + vim 開啟設定黨，可先用 ls 確認檔案確實在資料夾中
sudo vim cnofig.yaml

在 `vim` 畫面中，按下 `i` 開始修改密碼，修改完後按下 `ESC` 退出編輯，在按下 `:wq` 保存變更設定。

<center>

<img src="https://i.imgur.com/1eT71zY.jpg" width = "300" height = "100" alt="修改連進 Server 所需的密碼"/>

</center>

<br>
<br>

現在我們即可開始運行 `Code-Server`。為了使 `Server` 在 `VM` 視窗關閉後不會自動被終止運行，使用以下指令並在後方加上 `&` 使之運行在背景中:

// 指定剛建立好的 port，host 對應防火牆指定 0.0.0.0 並加上 &
code-server --port 8080 --host 0.0.0.0 &

若建立成功，即可回到一般瀏覽器頁面，在網址輸入: `http://{your_ip}:8080`，並輸入剛設定好的密碼，沒問題的話就可以看到以下頁面，代表 `Code-Server` 已架設完成。

<center>

<img src="https://i.imgur.com/dvVdSfI.jpg" width = "450" height = "350" alt="Code 首次進入畫面"/>

</center>

<br>

## 將寫完的文章部署到個人網頁上

使用平板撰寫完文章後，這邊假設 `Hexo` 都已經建立好的情況下，我們透過先前建立好的 `Code` 打開 `Hexo` 所在資料夾，將剛打完的文章直接拷貝進黨中，若是沒有檔案也可以直接在 `Code` 中新增一份，接著照著馬力歐大的文章鍵入以下三劍客指令:

hexo cl
hexo g
hexo d

都沒有問題的話前往個人網頁就可以看到美美的網站囉~

※已經初始化完 `Hexo` 的話小心不要打到 `hexo init` 指令，否則先前設定好的檔案會被洗掉。

## 將 Hexo 部屬檔案備份至 Github 上

仔細觀看 `Hexo` 預設生成的檔案中，有 `.git` 資料夾與 `.gitignore` 文件，其目的就是讓我們可以同時備份檔案至 `Github` 上，這樣一來想要部署網站就不限於一定要在原本的開發平台上了，就算今天不是用 `GCP` 架站同樣也推薦將部屬檔案備份到 `Git` 上。

在 `GCP` 中想要認證與 `Github` 的連線需要設置 `Token` 或著是 `設定SSH Key` 的方式，可以參考這篇文章:[Git 使用 SSH 金鑰與 GitHub 連線](https://cynthiachuang.github.io/Generating-a-Ssh-Key-and-Adding-It-to-the-Github/)

設定完後一樣鍵入三劍客指令:

git add .
git commit -m "your commit"
git push

至此完成在平板上實現 **文章撰寫與部落格架設部屬一條龍流程** ~!!

## 後記

自己在嘗試整個流程的時候說實在遇到蠻多問題的，先前沒什麼碰過 `SSH`、`VM`、`node.js` 等等工具或觀念，看文章常常覺得到底在寫三小....， 不過通常越是這樣只要不懼怕的去嘗試，邁出第一步之後就會覺得東西開始漸漸上手，將摸索完的東西統整起來吸收後才能夠變成自己的技能包，最後再透過寫文章的方式將理解呈現出來，看看有沒有認知盲點的同時也幫自己再複習一遍~~

## 注意事項

1. 請先安裝完 Hexo 後再開始運行 VScode，否則會出現權限問題。

## TODO

- 平板打完文章一件上傳與部屬(Git action?)
- 新增 Hexo 圖床
- 修改 Hexo 主題
- 新增 Hexo 瀏覽人數功能

## 參考資料

- [如何建立遠端VScode環境](https://medium.com/%E5%B7%A5%E7%A8%8B%E9%9A%A8%E5%AF%AB%E7%AD%86%E8%A8%98/%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%E9%81%A0%E7%AB%AFvscode%E7%92%B0%E5%A2%83-8294c813b453)
- [Use Coder to Run VS Code on Google Cloud](https://fireship.io/lessons/vscode-cloud-coder-tensorflow/)
- [Code Server](https://coder.com/)
- [使用 GitHub Pages + Hexo 來架設個人部落格](https://ed521.github.io/2019/07/hexo-install/)