免費架站之流－ Hexo + Bitbucket + Netlify

一直希望自己能有一個自己的部落格，來分享一些技術和心得，但又希望一開始能無負擔、零花費的架站，等到未來有越來越多東西時再考慮升級，趁著自己摸索架站的同時，也把架站的過程記錄下來分享。

Hexo

Hexo 是一套靜態部落格的架設工具，所謂靜態是指網站內容是由靜態檔案所構成，不用透過資料庫及後台管理，配合版控能夠輕鬆的管理及備份所有的資料。主要的優點還有能夠透過 Markdown 語法來撰寫文章，以及有許多主題能套用，如此能讓程式碼放在上面美觀一點。

安裝前請先確認電腦有安裝 Git 跟 Node.js

操作步驟非常簡單，透過幾個指令就能建立部落格了：

# 安裝 Hexo 的管理工具
npm install hexo-cli -g
# 創建一個名為 blog 的部落格
hexo init blog
# 切換至 blog 資料夾
cd blog
# 安裝相依套件
npm install
# 啟動預覽伺服器
hexo server

hexo server 後，在瀏覽器開啟 http://localhost:4000 就可以看到網站運作起來了：

預設會有一篇 Hello World 的文章，存放路徑為 source\_posts\hello-world.md ，開啟檔案修改一下文章，再回到瀏覽器重新整理，就能及時預覽網站的變化。若要新增文章可以直接在 _posts 底下建立 .md 的檔案，或透過 hexo new 文章標題 指令來達成。

本機運行沒問題後，接下來就要看看怎麼把網站發佈到網路上，不過先來設定一下版本控制，因為 Netlify 要使用 Git 來發佈。

Bitbucket

跟 GitHub 相比， Bitbucket 最大的不同就是可以免費擁有多個 private repository ，而且也有滿多的相關應用，對於想省錢的人是不二首選。

建立本機版控

首先，要先為目前的 blog 建立版控機制，在 blog 的資料夾打開命令提示字元，然後透過 git init 來建立本機的 repository ：

然後把所有檔案都加入版控 git add *，並做第一次 commit git commit -m '訊息'：

推送到 Bitbucket

再來到 Bitbucket 註冊一個帳號，登入後可以看到以下畫面，並點選左邊的 + 號來建立倉庫 ( repository ) ：

輸入倉庫名後，按創建倉庫，即可建立 repository ，倉庫主畫面如下：

選擇下方的 我有一個已經存在的項目 ：

回到命令提示字元，透過步驟二的兩條指令來將本機的 repository 推送上來：

回到網頁上重新整理一下，就能看到檔案都成功放到 Bitbucket 了。

之後撰寫文章就是 建立 .md 檔 -> git add -> git commit -> git push 。也不一定要一氣呵成把文章一次寫完，能透過分次 commit 來更新文章。
Git 熟一點的話還能用分支來操作，等寫完再合併至 master。

Netlify

Netlify 真的是一個很強大的服務，有提供 SSL 、 CDN ，以及能設定指令來發佈程式，提供自動建置 & 自動發行，並透過 Git 來觸發。
而且在佈署方面，還會保留每一次佈署的紀錄，能直接查看當時的網頁狀態，還能指定哪一次為目前發行，可以輕鬆地回到過去的版本。
這樣的服務居然免費，真的是太佛心了。

再來就要準備發佈網站了，先到 Netlify 註冊帳號 (也可以用 Bitbucket 帳號登入) ，
登入後應該會看到站台列表的畫面，然後點選右上方的 New site from Git ：