前言

兩年前曾經用 GitHub Page 的靜態網站搭建一個部落格，當時沒有想太多，只希望能快速有個部落格來寫寫文章記錄碰到的各種坑，但因為 GitHub 上的內容都是公開的(畢竟是開源的)，又可以讓人隨意下載，想了一下決定重新搭建部落格，也就有了這篇文章的誕生。

部落格選擇

開始搭建部落格之前有做了一點研究，整理網路上大家對部落格的看法如下:

Medium

這個大家都知道，甚至平常看到很多技術文章都是寫在 Medium 上，但好像因為付費牆的一些因素，導致滿多技術寫手紛紛出走，想了一下，我覺得想要有一個客製化的部落格，不想被綁定在某個平台上，所以果斷放棄 Medium 這個選項。

Wordpress

Wordpress 我沒有用過，但一直以來都知道他聲勢浩大，尤其是在 CMS 的生態系中更是霸主，算是很成熟且市占率很高的軟體，甚至很多接案的人都會用 Wordpress 快速做出不錯的網站，但對於只是想要寫寫文章的我來說，Wordpress 還是稍嫌複雜了一點。

GitHub Page

GitHub Page 是我第一次建立部落格使用的選項，這是 GitHub 推出的靜態網站代管服務，對於簡單的網站如: 履歷、介紹…等等算是不錯的選擇。而且 Github Page 不需要租 server 和買 domain name，碰不太到環境建置，只要會用 git push 上去，就會有一個 GitHub 提供的 https://<name>.github..io 的 url，例如我之前的部落格: https://dysonma.github.io

一切看似美好，但其實 GitHub Pages 也有一些 限制:

  • 資源空間只有 1GB 上限
  • 每月的流量限制是 100GB
  • 每小時只能 build 10 次

另外，有一些靜態網站產生器提供快速建立一個靜態網站，還含有很多主題可以選擇，例如: Hugo, Hexo, jekll，這些都是用 markdown 語法就可以寫文章。對我來說，主題看起來很不錯，使用上也很方便，所以納入考量。

談談 Jamstack

看了這麼多選擇後，查到這十年間的前端生態演變出一種叫 Jamstack 的名詞。

Jamstack 指的是一種建構網站的方式(architectual approach)，將傳統的資料(data)、商業邏輯(business logic)分離(decouple)，提高擴展性與效能。

節錄 jamstack.org 首頁斗大的文宣

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.

Jamstack removes the need for business logic to dictate the web experience.

It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs.

我的理解是 jamstack 重新定義網頁前端的塑形，不再需要依賴 server 建置或是依據商業邏輯產生的 UI 產物，而是透過 web API 的溝通方式重新組合商業邏輯，讓前端有了自己的生命周期。

可以見 WTF is Jamstack

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup” — Mathias Biilmann (CEO & Co-founder of Netlify).

其中，Jamstack 的 Stack 指的是一個技術集合，包含:

jamstack

  • JavaScript

    一切的動態功能(Dynamic functionality)都取決於 JavaScript，不論用什麼 library 或 framework 都歸於此類, 所以不管用 React, Vue, Next.js…都算(畢竟最後都被 build 成 native 的 JavaScript)

  • API

    前端世界中指的是 Web API，將傳統 server 的 operation 抽象化成應用 HTTP 協定的 web api，而這些 API 可由自定義的函式或第三方服務來構建

  • Markup

    透過 prebuilt 的 markup 語言來提供網頁前端的 HTML，不再只有撰寫 HTML 的唯一方式，可以透過 SSG(Static Site Generator)方式來將其他標記語言(如: Markdown)生成網頁前端的 HTML。

由於前陣子剛好接觸到 Netlify，覺得這類的託管服務用起來體感非常好，不光是結合 code repo action 的 CI/CD 很方便，也解決了憑證與 domain name 的問題。看到 Jamstack 的介紹直覺地就想到 Netlify，順手查了一下，果然在 2015 年 Netlify 就提出 Jamstack 的介紹 Netlify-Blog: What is the JAMstack?

依照 Netlify 的介紹所說，如果你是 deploy 程式到 Netlify，你就是 Jamstack 工程師了。可見這類的託管服務，也算是遵循 Jamstack 的理念打造的服務，理所當然也在現今前後端分離的的軟體生態下獲得廣大迴響。

Jamstackthemes

決定要用 Jamstack 之後，就順手找到 jamstackthemes 這個網站，上面提供各式主題可以選擇，包含 CMS, Blog, SSG…等等種類，因為我覺得像是 Hugo 這類的靜態網站生成器相當方便，所以就找了 Hugo-PaperMod 作為新版部落格的主題，順便附上該主題的 GitHub repo: https://github.com/adityatelange/hugo-PaperMod

選定主題後，就開始動手安裝 Hugo 來搭建新版部落格

安裝 Hugo

先到 官網安裝連結 找到目前 OS 系統的安裝方式，以我目前這台電腦是 Windows，就照文件方式安裝

# 安裝Hugo
choco install hugo-extended

# 建立新hugo專案
hugo new site <name of site> -f yml

# clone主題
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

# 啟動blog
hugo server

啟動後，預設 blog 運行在 http://localhost:1313 。附上我有用到的一些 Hugo 指令

# Help查指令
hugo help

# 印出所有config.yaml
hugo config

# hugo new [file path]，hugo會自動判斷該路徑是什麼archetypes
hugo new posts/my-first-post.md

# 在 local run 一個 server，而 -D 則是包含草稿，也就是設定 draft 屬性為 true 的內容
hugo server -D

如何附上圖片

另外，寫文章的時候不免會需要附上圖片，可以在content資料夾內建立一個空資料夾，然後把文章的 markdown 檔丟進去，改名成index.md，接著在這個資料夾內再建立一個存放圖片的資料夾，我取名為images，這篇文章有關連到的圖片都可以放進去，然後使用 ![test-pic](images/<imageName>.png)就可以正確引入圖片了。 (須注意 images 前面沒有斜線)

/content
  /content1
    index.md
    /images
      image1.png
      ...

如何附上影片

做法跟圖片一樣，把影片檔附在 images 資料夾內 (或是要另外新增資料夾來存在也行)，寫一個video的html，放進 hugo 的 template 語法 {{ < rawhtml > }} 中

  <video width="100%" height="500" controls>
    <source src="images/video.mp4" type="video/mp4">
  </video>

Deploy 部署

Local 測試好之後，接下來要部署上線，我找到Render這家 Paas 的雲端服務。

只要提供程式碼 repo 連結(ex: GitHub, Gitlab…)，透過 Render 的 UI 介面點選按鈕，就可以部署上線，算是簡單易用，背後 Linux、firewall、nginx 都交給 Render 幫我們處理好，對於只要輕易部署靜態網頁的人來說，算是一大福音。

此外，SSL 憑證 Render 也會幫我們處理好，不需要再去 Let’s Encrypt 上申請，還會提供 domain name，預設是 https://<your-site-name>.onrender.com/。當然如果已經有自己的 domain name，也可以將 domain name 指到你在 Render 的網址。

整體操作起來和 Netlify 很相似，但 build time, bandwith 這些限制就各有優劣，除了網站部署之外，Render 還可以提供如 PostgreSQL 的資料庫，但就需要 費用，更細節的介紹請看 官網。簡單研究之後，感覺 Render 不錯，身邊也有朋友推薦，就姑且暫時用看看惹，所以把剛剛的 blog 程式碼推到 GitLab 上，再將連結提供給 Render，按下部署後，網站就部署上去惹。

唯一需要注意的是 Render 後台的設定，build Hugo 的指令如下:

render-built-with-hugo