開源免費，在 Netlify 上安裝 Primo CMS，輕鬆製作網頁筆記
Tags: netlify, primo, cms, tutorial
Published: 2023-08-03 00:30:41

## 本篇要解決的問題

之前寫過幾篇免費製作一個網站的筆記文，最近看到一個 [Primo](https://primocms.org/)，官方文件也說使用它們的專案，就可以免費用 CMS 製作出自己的網站。

官方的教學文件主要是使用 Vercel，而且只寫到把 Primo 安裝完就結束了，沒有後面實際將製作出的網站 Deploy 到 GitHub 的部份寫出來，偏偏，這一段是會踩坑的。

本篇是筆記如何把 Primo 安裝在 Netlify 上，並且 Deploy 到 GitHub，最後用 GitHub Pages 的功能讓網站可以真的對外使用。

相關免費製作網站的筆記文：

- [WordPress + Cloudflare Pages](https://www.letswrite.tw/wordpress-cloudflare/)
- [Netlify + GitLab](https://www.letswrite.tw/netlify-gitlab/)
- [GitLab Pages](https://www.letswrite.tw/gitlab-pages/)

---

## 建立帳號

要免費使用 Primo 安裝 CMS，要先在以下網站註冊帳號：

- [GitHub](https://github.com/)
- [Supabase](https://supabase.com/)
- [Netlify](https://netlify.com/)

後面二個可以直接用 GitHub 的帳號來註冊，很方便。

雖然說是免費，但其實是指這三個網站都有提供免費方案，在一定額度內是可以免費的，如果額度超過了就會需要收費。

三個站的額度就請大家自行上各自的官網看囉。

---

## Supabase 建立 schema

進到 Supabase 的後台，點擊 **New Project**：

![點擊 New Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmrlfg11d9ox54g8itn8.png)

填寫好 Project 的基本資訊後，按下 **Create new project**：

![填寫 Project 基本資訊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skn0trziknclbv8hcfwm.png)

Project 建立好後，左側選單點擊 **SQL Editor**：

![點擊 SQL Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq4ecg4q1tmnbd0pcle4.png)

在 SQL Editor 的頁面上，點擊 **New query** -> **New blank query**，右側會出現要填寫 Schema 的空白欄位，點擊 Primo 官方給的這個連結：[primo_schema.sql](https://raw.githubusercontent.com/mateomorris/primo/master/primo_schema.sql)，把頁面呈現的程式碼全選，然後貼到空白地方，再按下右下角的 **Run**，Result 的地方一定要看到回傳的是「**Success. No rows returned**」這個訊息才行，如果顯示的是錯誤訊息，那就過一下再點，或是先點擊別頁逛逛後再回來點，總之 Result 一定要有 Success。

![SQL Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxkfvovxmwfamzjceh0h.png)

---

## Fork Primo 專案

進到 Primo 的 GitHub 專案：[Primo](https://github.com/primocms/primo)。

接著點擊 **Fork**，讓我們在 GitHub 的專案上也有 Primo 的程式碼。

![Fork Primo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwu8g8mfauwdd1656b31.png)

---

## Netlify 安裝 Primo

進到 Netlify 後台：[Netlify](https://app.netlify.com/start)。

頁面上會看到可以選擇從哪邊的檔案建立專案，點擊 **Delpoy with GitHub**：

![點擊 Delpoy with GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i3h7wos5qjmtzp5551s.png)

確認完授權後，就可以點擊我們剛剛在 Primo 上 Fork 的專案：

![選擇 Fork 的 Primo 專案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgi4ltpw4knk1nstanre.png)

點擊專案名稱後，會確認 Deploy 的一些資訊，都可以不用改，但最下面有一個「Environment variables」，我們需要加上三個 variables：

- PUBLIC_SUPABASE_URL
- PUBLIC_SUPABASE_PUBLIC_KEY
- PRIVATE_SUPABASE_PRIVATE_KEY

加完後會像這樣：

![加上 Environment variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4s7x6epv1wwsdlxlp6j.png)

這三個值要怎麼取得呢？

進到 Supabase 的後台，左側選單點擊一個齒輪 Icon 的 **Project Settings**，接著點擊 **API**，就可以看到這三個值了，如下圖：

![取得 Environment variables 的三個值](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w5t9eucajh8j5opdhgo.png)

PRIVATE_SUPABASE_PRIVATE_KEY 的值要先點擊 **Reveal** 後，才會有 Copy 按鈕可以按。

三個值都貼上後，Netlify 的部份就可以點擊 **Deploy** 讓它開始佈署。

Netlify 預設會是給個亂碼當網站網址，可以在後台的「Site configration」裡自行修改，或是使用自己的網域。

Netlify Deploy 完後，就會提供網址，比方像這樣：silver-cactus-ace72a.netlify.app，點擊網址，會先要求建立一組帳號：

![建立帳號](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea4sus2sumauqose5bht.png)

Email 跟密碼都確認後，就會自動登入到 Primo 後台，代表安裝成功：

![Primo 後台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hu8i0zr69izmix8kd9m.png)

Primo 操作上蠻直覺的了，這邊就不介紹怎麼操作。

---

## Deploy 到 GitHub

要部署到 GitHub 上，首先要先建立一個 Token。

點擊 [Github settings > Generate new token](https://github.com/settings/tokens/new)，就會進入新增 GitHub Access Token 的頁面：

![新增 GitHub Access Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip12jsdhu4igltillbb7.png)

如上圖，填寫好 Note 後，**Expiration** 選擇 **No expiration**，**Select scpoes** 勾選 **repo**，然後頁面滑到最下面，點擊 **Generate token**。

Token 建立完，請點擊複製按鈕，將 Token 複製下來，下一步在 Primo Deploy 時會用到。

進到 Prmio 後台，假設我們今天網站完成，準備要發佈，當按下 Deploy 後，有二種選擇：

![Deploy 的二種選擇](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh0j8tkx1x7vtkkjn1mo.png)

點 **Download** 的話，就會下載整個網站的靜態檔，再看自己想把檔案放到哪。

這邊我們要進行的是「Connect to Github」，將檔案直接放到 GitHub 的專案上，然後再藉由 GitHub Page 的功能將網站架起來。

點擊 **Connect to Github** 後，第一次會需要輸入 GitHub 的 Token：

![輸入 GitHub Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1k59pkg1bzg8qaov7gs.png)

輸入我們剛剛從 GitHub 取得的 Access Token，再按下 **Connect**，就完成了，接著會看到一樣有二個選項：

![Deploy 到 GitHub 的二種選擇](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dq4713ddpredzow6b80.png)

選擇哪一種都可以，但通常新製作出的網站，會是用 Create new repo 的方式，一個網站就存在一個專案裡。

### 一個 Deploy 的 bug

如果有人跟 August 一樣，選好 GitHub 的專案後，就一直看到轉圈圈的畫面：

![一直轉圈圈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4usxktuob1k72v6649k.png)

基本上就是踩中了目前 Primo 的 bug，轉一個小時他還會在轉。

造成這個的原因很簡單，GitHub 的主要分支名稱不叫「main」，而是叫「master」或是其它，就會遇到這種狀況。

所以只需要把專案的主分支名稱改成「main」就可以了。

可以先自己新增一個專案，確定分支叫「main」以後，Primo 上要 Deploy 時，再選擇發佈到這個新增的專案就行。

### 用 GitHub Pages 建立網站

從 Primo Deploy 到 GitHub 上後，GitHub 的專案上就會看到所有的檔案已經有了：

![GitHub 上存好了 Primo 生成的檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t032sy8d2fbafinlet2d.png)

點擊右上角的 **Settings**，然後點擊左側選單的 **Pages**：

![設定 GitHub Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jagavpptuwmyaja9b216.png)

接著如上圖，**Branch** 的地方選擇 **main**，再按下 **Save**，GitHub 就會開始將檔案部署成為網站。

要怎麼看到部署成功後網站的網址呢？

點擊上方導覽列的 **Actions**，會看到剛剛 Deploy 的 Workflow：

![Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btjfqgg9bdjvj2n86ykh.png)

再點進去 Workflow 就可以看到網址了：

![GitHub Pages 產生的網址](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx8xpjepr108gpzlwup9.png)

August 最後用 Primo 製作出來的網址在這：

<https://letswritetw.github.io/letswrite-primo-cms-demo/>

選了一個最最簡單的版型，所以就一頁，主要是拿來示範用的。

Primo 目前的 V2 版還在 Beta 階段，之後正式發佈時，Theme 會更多，也會修正分支一定要叫 main 的 bug 吧？讓我們繼續看下去。