Chris Impey is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/chris-impey).

Chris Impey

Emma Hazel is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/emma-hazel).

Emma Hazel

Frank, 居住在香港, 從事 IT 行業，並為這個行業投身了大半生的精力。 沒事喜歡寫寫程式，看看書，玩 Instagram，玩貓。可他並不是一個『宅男』，他很喜歡旅行，遠的去過約旦，近的去過深水埗，每到一個地方，都讓他對這個世界有不同的認識。他也很喜歡寫網誌，認為寫作不僅能夠加深對知識的積累和認知，亦能夠讓人靜下心，坦誠面對自己。

Frank

Thomas Macaulay is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/thomas-macaulay).

Thomas Macaulay


## Ghost CMS 簡介

Ghost CMS 是一個免費，開源的內容管理系統，截止本文撰寫日期為止在 Github 上有 33.5k 的 Star。Ghost CMS 基於 Node.js ，安裝簡便，自帶一個非常優雅的管理界面，SEO 友好，並且配合強大的API ，非常適合作為 Headless CMS 使用。

![](/image/blog/smqdp.gif)

Ghost CMS 的一大賣點就是他的“可見即可得”編輯器，和大名鼎鼎的 Medium 編輯器非常相似。文字編輯非常輕鬆， 並且可以插入眾多的附加內容，如圖片，相冊，Markdown，影片等等。

![](/image/blog/uhmxu.gif)

除了 Web 版的管理界面，Ghost 還有一些 Native App 可供下載：

![](/image/blog/kyodg.png)

![](/image/blog/zttpz.png)


## Ghost CMS 安裝
### 本地安裝 Development 模式

Development 模式可以很快的安裝好一個本地運行的Ghost CMS， 無需設定任何資料庫, 默認使用 SQLite3 資料庫作為開發使用 。

```bash
# 安裝 ghost-cli 工具程式
npm install ghost-cli -g

# 安裝 ghost CMS
ghost install local

```

安裝完成後就可開啟瀏覽器 [http://localhost:2368/ghost](http://localhost:2368/ghost) 來訪問了。

![](/image/blog/55r5l.png)

注意這個模式下的 Ghost CMS 僅為開發使用，並不適合在伺服器上安裝（即便安裝後也會因為 IP binding 的問題無法遠程訪問）。

### 安裝 Production 模式

若要安裝 Production 模式的 Ghost CMS ， 可以透過以下指令進行：

```bash
ghost install
```

在安裝過程中需要指定資料庫 URL等重要參數，具體可以參考官方詳細的 [安裝指引](https://ghost.org/docs/api/v3/ghost-cli/install/) ，這裡不再贅述。

### 使用 docker & docker-compose 來安裝

使用 docker 來安裝則更加快捷，任何已經安裝 docker & docker-compose 的機器都可快速完成。

我建立了一個已經寫好的 docker-compose 供大家參考， 可以直接 clone 下來再做修改：

```bash
# Clone the template project
git clone https://gitlab.com/frannnnk/docker-compose-ghost-cms-quick-start.git
```

主要需要更改以下檔案中的設定

- `docker-compose.yml`  包含 docker 的設定
- `ghost/config.production.json` 包含 Ghost 的設定
- `ghost/config.development.json` 包含 Ghost 的設定

之後就可以啟動 Ghost CMS 

```bash
docker-compose up
```

## Ghost CMS Admin 界面

啟動 Ghost CMS 後，便可以透過 `http://domain:port/ghost/#/site` 來訪問管理界面。 

Ghost CMS 管理界面的操作都非常簡單，很容易上手。


<video width="100%" controls style={{outline: "none"}}>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/v1588584396/ghost-article_bzth93.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>


值得一提的是 Ghost CMS 的每篇文章都可以設定針對不同平台的 Meta，例如 meta:description, meta:title, og:description, og:image 等等。這對於 SEO 以及 Marketing 來說非常重要。

![](/image/blog/fv7pj.png)

## Ghost CMS API

Ghost CMS 的 API 針對不同的 Frontend 都有相對應的 starter template，具體可以 [參閱官網](https://ghost.org/docs/api/v3/)。

![](/image/blog/tllxd.gif)

這裡重點介紹一下 Rest API。 Rest API 分為 Content API 和 Admin API， Content API 是以只讀模式獲取 Ghost CMS 的內容， 而Admin API 則可以更改 CMS 的內容。 

要使用API，首先要在管理界面中增加一個 integration：

![](/image/blog/bmrtf.gif)

然後就可以使用  Content API Key / Admin API Key 來調用 Rest API 了。

```bash
curl http://{domain}/ghost/api/v3/content/posts?key={apikey}
```

![](/image/blog/go1fb.png)

API 的具體 Endpoint，可以在 [官網](https://ghost.org/docs/api/v3/content/) 查閱。

以上便是 Ghost CMS 的快速上手，當然 Ghost 的功能還有很多，例如 Theme， eCommerce 等等，如果有興趣，大家不妨仔細閱讀 [官網教學](https://ghost.org/docs/) ，來更深入地了解Ghost CMS 。 



Ghost CMS 是一個免費，開源的內容管理系統，截止本文撰寫日期為止在 Github 上有 33.5k 的 Star。Ghost CMS 基於 Node.js ，安裝簡便，自帶一個非常優雅的管理界面，SEO 友好，並且配合強大的API ，非常適合作為 Headless CMS 使用。本文將介紹 Ghost CMS 的快速安裝以及基本功能，供大家快速上手。

Ghost CMS 快速上手


首先先 Show Off 一下，用Gatsby 改寫網站後，Google Page Speed Insight  一度見到 98 分的高分。儘管這個分數對於普通用戶來說並沒有什麼感覺，但這代表著 Google 大神的肯定！自己那不知所謂的虛榮心瞬間得到滿足。真的要從內心呼喚：

> 了不起的 Gatsby！

![](/image/blog/sw37a.png)

言歸正傳。

其實我自己的網站，已經很久沒有更新。上一次改版已經是2017年的事，年齡增長，工作重心轉移，生活中也被各種瑣事纏繞，之前用心經營的網絡世界，已經慢慢封塵。2017 版的網站，完全是用 JSP 完成，一直以來運行順暢，沒有任何問題，所以自然沒有動力去改寫。直至近段時間，公司有前端愛好者介紹了 Gatsby 這個聽起來像是護髮用品的「東西」，才花時間去研究了一下，沒想到正因為如此，就陷入了 Gatsby 的泥潭無法自拔，趁著放長假把自己的網站改寫，把原本的伺服器大換血，也算是學到了不少新知識。

## Gatsby 是什麼

> Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

對，Gatsby就是一个基于React 的工具，用於生成網站或者應用程式，並且兼具以下優點：

- 生成靜態的網頁： 非常利於SEO；
- 使用現代化的前端技術： React、Webpack、Graphql 等等；
- 支援眾多的數據源：filesystem，API，database，headless CMS 等等；
- PWA(漸進式網頁應用程式): 按需加載需要的數據，達到快速呈現內容；
- 生成的網頁默認已經進行了優化，比如圖片會生成各種不同尺寸的副本，因應不同裝置選擇顯示不同的圖片，慢加载，等等；
- 眾多的 Plugin 支持：很多你能想象到的功能，都有相應的Plugin 幫你解決；
- 維護相對簡單：因為Gatsby主打靜態化，沒有後端程式，而且使用 React 的 Component 模式開發，維護上相較傳統模式的 app 要簡單。
 
## Gatsby 是怎麼工作的

官網的這張圖，應該能夠比較好的解釋。
![](/image/blog/dnx8a.png)

Gatsby 的工作流程，大約分為幾個大階段：

1. 獲取網站必須的數據。這個數據可以是存儲在文件中，比如 Markdown File，可以是來自 CMS，也或者是 API ；
2. 利用上一步獲取到的數據填充到事先定義好的模板中，並生成所有的靜態頁面，數據文件等；
3. 之後，一個完全可以獨立運作的 App 就誕生了，你可以把 /public 中的文件發佈到任何支持靜態文件 hosting 的地方；

## 用 Gatsby 建立網站具體的流程

用我的網站為例，我這次主要經歷了幾個步驟：

1. 下載  gatsby-starter-blog ；
2. 將我所有的網誌文章都轉換成 MD 文件；
3. 指定 GraphQL 獲取數據的方式；
4. 根據網站的樣式建立 React 的 Component，並在合適的位置填入 GraphQL 獲取到的數據；
5. 後續的優化，分頁，Tag，評論，統計，Client side API 等等 （這一部分也是最花時間的）

有興趣嘗試的話，只需下面幾個步驟，你便可以在你的電腦中運行起一個簡單的[網誌網站](https://gatsbyjs.github.io/gatsby-starter-blog/)了。

```bash
# 安裝 gatsby-cli 工具
npm i -g gatsby-cli

# 根據 gatsby-starter-blog 建立一個新 project
gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

# 進入新建的 project
cd gatsby-blog

# 啟動開發伺服器，之後就可以透過 http://localhost:8000/ 訪問網誌網站了
gatsby develop
```

如果想要添加新文章，只需在pages 目錄中添加 .md 的 Markdown 文件，就可以自動生成新的頁面。 

當然，上面的例子僅僅是一個開始，諸如分頁，tag，評論等等的功能都沒有實現。這篇文章並不是一個 step by step 的教學，網路上關於 Gatsby 的教學資源非常的豐富，我這裡就不再贅述。

## Gatsby 網站的發佈

用 Gatsby 生成網站之後，發佈其實非常容易。你完全不需要購買任何寄存空間，就可以將你的網站發佈到互聯網。

### 使用 Gatsby Cloud

![](/image/blog/4ergq.png)

Gatsby Cloud 是 Gatsby 官方推出的平台， 官方形容為 “The best way to build and maintain Gatsby sites”。免費版提供免費 build 和發佈，但有一定的限制，具體可以參考[官網的價格說明](https://www.gatsbyjs.com/pricing)。

要使用 Gatsby Cloud 發佈 Gatsby 網站，首先你要有一個 Github 賬戶，因為 Gatsby Cloud 要使用 Github 登入。然後，你需要把你的 Gatsby Project 提交到 Github 中，公開或者私有都可以。然後，你就可以登入 [Gatsby Cloud](https://www.gatsbyjs.com/)， 然後通過幾個簡單步驟就可以將你的網站發佈在互聯網上。

 
<video width="100%" controls style={{outline: "none"}}>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,q_85,w_742/v1588509617/GatsbyCloud_hmpueg.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,q_85,w_742/v1588509617/GatsbyCloud_hmpueg.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
 

### 使用 Netlify

![](/image/blog/8akfh.png)

[Netlify](https://www.netlify.com/) 則是一個更為出名的全功能 Web 平台，同樣 Netlify 也是提供了免費的靜態網站寄存服務，並且自動集成了CICD， 可以無縫接駁Github、Gitlab裡的Project，需要更新時只要push到 Git 就可以觸發自動更新發佈。免費版每月可以使用300分鐘的 build time 以及 100GB 的網路流量， 具體的價目表可以參考[其官網的介紹](https://www.netlify.com/pricing/#features)。

在 [Netlify](https://www.netlify.com/) 上發佈，同樣非常簡單，一樣的你要有一個 Github 或者 Gitlab 賬戶，然後，你需要把你的 Gatsby Project 提交到 Github 中，公開或者私有都可以。然後，你就可以登入[Netlify](https://www.netlify.com/) ， 然後通過幾個簡單步驟就可以將你的網站發佈在互聯網上。

 
<video width="100%" controls style={{outline: "none"}}>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,w_742/v1588514109/Netlify_qcqzxz.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,w_742/v1588514109/Netlify_qcqzxz.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
 

如今發佈網站竟然如此簡單， 建立網站也早已不再是早些年必須要購買寄存空間的時代。Serverless (即無伺服器運算)當下正大行其道。公司或開發者不用過多考慮伺服器的問題，伺服器資源僅作為一種被簡化的服務而不再以物理硬體的形式出現。

這篇文章寫到這裡應該差不多了，當然在整個網站重構的過程中還遇到了其它很多的問題，我會在之後的文章中再具體分享。 











最近學習了下 Gatsby ，借這個機會將自己網站徹底用    Gatsby 和 React 重寫，過程中學到不少新東西，也經歷不少 WTF 的時刻，完成後用 Google Page Speed Insight 測試，竟然試過出現 98 分的高分，雖然不是每次都這麼高，但也足以驚艷我這見慣了幾十甚至十幾分的大腦。

Ghost CMS 快速上手

用Gatsby 改寫網站，Google Page Speed Insight 驚現98 的高分

免費訂閱網誌文章