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


如今基本任何一個 IT Project 都離不開開源社區中的軟件依賴包( Dependencies )， 在如今越來越注重資訊安全的年代，隨之而來的問題是，誰會能夠保證這些依賴包的安全性？如何監控這些開源軟件包的漏洞？人肉留意最新的漏洞信息，比如關注 [CVE](https://cve.mitre.org/) 網站之餘，有沒有更加自動化的方法？

答案當然是「有」。

## Snyk

Snyk 是一家美國的安全公司，致力於監控開源軟件包中的漏洞。Snyk 以其龐大的漏洞資料庫為基礎（由以色列和倫敦的資安研究專家團隊負責維護該資料庫），持續的監控開源社區中各種軟件包的安全情況，以及給出解決方案。 隨著 Snyk 的不斷發展，它已經可以做到輕鬆掃描，IDE配合，與原碼平台整合 (如 GitHub、BitBucket、GitLab等)、實現 CI/CD 流程。

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

Snyk 雖然是一款商用漏洞掃描工具，但他對開源的項目免費。私有的項目，也可以用每月 200 次的掃描，對於一般的項目，個人感覺免費的計劃已經夠用。

## Snyk 支援的語言
根據[官網的文檔](https://support.snyk.io/hc/en-us/sections/360001087857-Language-package-manager-support)，目前 Snyc 支援以下語言：
- Javascript
- Java
- Python
- Php
- Ruby
- Golang
- Scala
- Swift & Objectiv-C
- .NET
### 對比 npm audit 
`npm audit` 也是一個常用且免費的漏洞掃描工具，snyk 對比 `npm audit` ，檢測能力上要強很多。[可以參考這篇文章](https://www.nearform.com/blog/comparing-npm-audit-with-snyk/)，作者有對兩者進行對比。


## 安裝
Snyk 透過 CLI 方式運行， CLI 的安裝十分簡單， [官網有詳細的介紹](https://support.snyk.io/hc/en-us/articles/360003812538-Install-the-Snyk-CLI)。如果是本地使用，可以透過下列步驟快速安裝：

```bash
npm install -g snyk
```

之後需要進行綁定你的 snyk 賬戶，進行授權

```bash
snyk auth
```

在打開的網頁中授權即可。

## 使用

安裝完成後，便可以使用 snyk 來檢測你的 Project 了。

```bash
cd /my/project/
snyk test
```

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

## IDE 插件
snyk 對於 IDE 有插件 ( Plug-In) 可以使用，以 Intellij IDEA 為例， 可以在 Market Place 中直接搜尋安裝。

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

裝好後就可以在 IDE 中直接查看檢測結果。

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

## 直接掃描 Git 中的項目專案 

Snyk 也可以直接接駁 GitLab， Github 等平台，直接進行掃描。因為我自己一般使用 Gitlab 為主，所以以下便以 Gitlab 舉例：

首先[登入你的 synk 賬戶](https://app.snyk.io/) ， 然後按照指示選擇代碼平台：

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

如果是使用 Gitlab ，則要按 + 來選擇：

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

然後需要你輸入 Gitlab 的 token：

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

這個 token 可以在你的 Gitlab 中新建：

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

之後，就可以選擇 Gitlab 中的 Project 來進行掃描了。

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

完成後就可以查看掃描結果：

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

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

另外值得一提的是，在集成了 Git 之後， snyk 會自動對你的專案進行掃描，並且自動進行 patch。如果你查看 Gitlab 的 CI/CD ， 會看到 snyk 已經默默的幫你 patch 了一些漏洞。

![snyk 自動進行的 patch](/image/blog/twxil.png)

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


## 總結

Snyk 對於開源軟件的安全監控很有幫助，並且能夠非常簡單的使用，乃至整合到 CI/CD的流程中，是一個非常好的安全工具。但需要留意的是， Snyk 是一個依賴漏洞檢測工具，針對的僅僅是已知的軟件漏洞。它並不是一個防病毒工具，不能檢測任何惡意程式， 更不會檢測項目專案中自己寫的代碼。若要掃描自己的代碼，可以使用類似 [SonarQube](https://www.sonarqube.org/)，[Findbug](http://findbugs.sourceforge.net/)等的工具，有時間的話會另文分享。


如今基本任何一個 IT 項目專案都離不開開源社區中的軟件依賴包 ( Dependencies )， 在如今越來越注重資訊安全的年代，誰會能夠保證這些依賴包的安全性？如何監控這些開源軟件包的漏洞？人肉留意最新的漏洞信息，如關注CVE網站之餘，有沒有更加自動化的方法？ Snyk 便是一個很好的解決方案。

使用 Snyk 檢查開源軟件依賴中的漏洞



前不久使用 [Gatsby 將自己網站重寫](https://www.frank.hk/blog/gatsby-website-revamp "用GATSBY 改寫網站，GOOGLE PAGE SPEED INSIGHT 驚現98 的高分")，基本做到了網站靜態化，所有內容都是預先生成，這樣一個顯著的優勢就是讓網站更適合使用 CDN ，藉此提高全球訪問速度。所謂 CDN，就是你的網站資源會緩存一份在 CDN 伺服器，當別人訪問網站時，CDN 伺服器直接返回緩存的資源給用戶，而無需連接本來的原始伺服器。

之前我的網站主要使用的都是 [CloudFlare](https://www.cloudflare.com/)，免費而且有很好的操作界面，功能也很豐富。但唯一的一個問題，也是最關鍵的問題就是 [CloudFlare 國內訪問速度很慢](https://www.google.com/search?q=CloudFlare+%E5%9C%8B%E5%85%A7%E8%A8%AA%E5%95%8F%E9%80%9F%E5%BA%A6%E5%BE%88%E6%85%A2&rlz=1C5CHFA_enHK851HK853&oq=CloudFlare+%E5%9C%8B%E5%85%A7%E8%A8%AA%E5%95%8F%E9%80%9F%E5%BA%A6%E5%BE%88%E6%85%A2&aqs=chrome..69i57.163j0j7&sourceid=chrome&ie=UTF-8)，用了 CDN 反而導致網站打不開。因為中文的原因，我的網誌和網站有大量的內地流量，這個問題導致我最後無奈放棄 CloudFlare。但因為自己的伺服器位於香港，國內訪問速度一般，還是要尋找 CDN 比較好，之後試用了香港的寄存公司 [UDomain](https://www.udomain.hk/en)  的 CDN 服務，感覺發現了新大陸，非常不錯。

用 17CE 測試國內的訪問速度，未經加速的網站資源速度慘不忍睹，數據顯示速度基本都在 「差」和「警告」之間。

![未經CDN加速的訪問速度很一般](/image/blog/irs8o.png)

使用了 CDN 之後，自己也嚇了一跳，竟然一片綠色，全國範圍內都是「好」。

![國內訪問速度測試非常快](/image/blog/4aeqa.png)

原來這個 CDN 是使用了針對國內訪問線路優化的 CN2 網絡，才會有如此優秀的表現。

![CDN使用了 CN2 網絡](/image/blog/njsd5.png)

費用方面，UDomain CDN 提供 [14 日免費試用](https://passport.8338.hk/tc/cdn/signup?actionCode=CDN-TRIAL)，[註冊後立即自動開通服務](https://passport.8338.hk/tc/cdn/signup?actionCode=CDN-TRIAL)。而試用期過後，使用按用量收费的模式，每 GB 流量收費港幣 1.5，像我的網站每月流量不是太多的情況下，這個價錢可謂白菜價 (當然用的越多越便宜)。

功能方面基本的 CDN 功能都很全，控制台界面也很簡單易用。

![設置界面](/image/blog/51m9n.png)

![數據統計](/image/blog/rpftp.png)

另外一個很貼心的設置是，你可以針對非國內用戶設置另外的接入點，這樣的話就可以國內流量走 CDN，其它地區的流量回源或是使用其它的 CDN 服務。

![智能CDN可以設定非國內流量去其它地方](/image/blog/ngfez.png)

傳送門：  

試用鏈接：[按我](https://passport.8338.hk/tc/cdn/signup?actionCode=CDN-TRIAL)

直接開通按用量收費：[按我](https://www.udomain.hk/tc/service/network/china-cdn-content-delivery-network-icp/pricing?cid=8&pcode=CDN-CHINA-ROUTING-PAY-AS-YOU-GO)


網站用 Gatsby 靜態化後，開始尋找 CDN 解決方案，之前使用的 CloudFlare 用了之後國內訪問速度比不用還慢，無奈放棄。 現在使用 UDomain CN2 CDN，速度測試全國一片綠色！感覺發現了新大陸。

超快的中國CN2線路 CDN 推薦 - UDomain CDN


最近換了新的 MacBook，必不可少經歷了將舊電腦的資料轉移到新電腦的過程。蘋果的 Migration Assistant 使用上算是非常方便，幾百GB的資料轉移速度也是在數小時之內完成，並且轉移後新電腦基本和舊電腦無縫過渡，這個非常人性化。

然而，順利之餘，也發現了問題。 我原本一直在使用 iCloud Drive 的 2TB 計劃，有大量的檔案都是儲存在 iCloud Drive 中。Migration Assistant 轉移資料時，也順利將所有檔案轉移過來。然而發現新電腦的 iCloud Drive 中顯示有幾十萬個檔案需要上載，開機一天一夜都沒有太多進展。電腦 CPU 長期高負載，出現 `bird` 和 `cloudd` 的進程揮之不去，佔用大量資源。

![](/image/blog/2wqj5.png)

上網 Google ，各種建議都嘗試過，最後無奈唯有徹底關閉 iCloud，然後再重新開啟。結果這樣一操作，所有桌面以及檔案中的文件全部被清除（並沒有刪除，檔案依舊存在於 iCloud Drive 中）。清除也沒問題，心想重新啟用 iCloud Drive 之後應該可以解決問題，可結果重新啟用後，問題沒有解決，反而還帶來了新問題。首先是檔案不會立即下載，開啟 iCloud Drive 後沒有看到任何動靜。網上有人說 iCloud Drive 需要時間去初始化資料夾，於是等了10小時候終於看到資料開始下載了。然而，經過36小時之後，`bird` 和 `cloudd` 的進程依舊揮之不去，依舊長期佔用大量 CPU 資源， 實在不知究竟在做什麼。於是一氣之下將所有重要資料搬離 iCloud Drive，全部改用 Dropbox 。對比之下，Dropbox 的使用體驗簡直拋離 iCloud Drive 幾條街。

那就不妨數落一下 iCloud Drive 的四宗罪：

## 同步遲鈍，下載龜速

iCloud Drive 的同步，真心不知道什麼情況下才會觸發。很久前就試過使用 iCloud Drive 作為 Ulysses 的同步解決方案，結果發現在手機上寫的文章回到電腦上看竟然要等幾小時之後才出現。在電腦的 iCloud Drive 中放入的資料，手機上也要等或短或长的一段時間後才出現。對比 Dropbox，幾乎是立即就會開始同步。這個問題，是我決定拋棄 iCloud Drive 的最重要原因。

## 同步進度是個迷

直到現在我依然不知道如何查看 iCloud Drive 的同步狀態，哪些檔案已經上載了，上載了多少，完全不知道。雖然可以在 Finder 的狀態欄看到大致的情況，但我很想有好像 Dropbox 那樣清晰的狀態顯示。

## 重新安裝電腦後麻煩不斷

這個也就是我本文開始時遇到的問題，`bird` 和 `cloudd` 的進程長期佔用 CPU 資源，然而你並不知道他在做什麼。 iCloud Drive 中的檔案沒有任何變化，逼著人必須關閉再重新啟用  iCloud Drive。 重新啟用 iCloud Drive 之後，完全不知道為什麼檔案要等36小時才開始下載，為什麼不能快速開始，哪怕只是建立一些空的資料夾？ 

## 分享困難

雖然 iCloud Drive 的確是具有分享功能，但設計的非常不友好。相比 Dropbox 簡易的操作，實在還是有很大的進步空間。

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

Apple雖然精於軟硬整合，他打造的 Apple 生態環境也是無人能及。 但是在雲端應用的穩定度以及經驗來說，和專門從事雲端存儲的 Dropbox 相比水準真是差了一大截。

寫到這，忍不住再看看 CPU 負載，真心想問一句，該死的 bird 什麼時候才能消失？

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


iCloud Drive, 你覺得怎麼樣？ 反正我是不會再用它作為主力工具了。 換了電腦後，簡直被他折磨死。Apple雖然精於軟硬整合，他打造的 Apple 生態環境也是無人能及。 但是在雲端應用的穩定度以及經驗來說，和專門從事雲端存儲的 Dropbox 相比水準真是差了一大截。

數數 iCloud Drive 的四宗罪


## 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 分的高分，雖然不是每次都這麼高，但也足以驚艷我這見慣了幾十甚至十幾分的大腦。

使用 Snyk 檢查開源軟件依賴中的漏洞

超快的中國CN2線路 CDN 推薦 - UDomain CDN

數數 iCloud Drive 的四宗罪

Ghost CMS 快速上手

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