本篇要解決的問題
之前寫過幾篇免費製作一個網站的筆記文，最近看到一個 Primo，官方文件也說使用它們的專案，就可以免費用 CMS 製作出自己的網站。
官方的教學文件主要是使用 Vercel，而且只寫到把 Primo 安裝完就結束了，沒有後面實際將製作出的網站 Deploy 到 GitHub 的部份寫出來，偏偏，這一段是會踩坑的。
本篇是筆記如何把 Primo 安裝在 Netlify 上，並且 Deploy 到 GitHub，最後用 GitHub Pages 的功能讓網站可以真的對外使用。
相關免費製作網站的筆記文：
建立帳號
要免費使用 Primo 安裝 CMS，要先在以下網站註冊帳號：
後面二個可以直接用 GitHub 的帳號來註冊，很方便。
雖然說是免費，但其實是指這三個網站都有提供免費方案，在一定額度內是可以免費的，如果額度超過了就會需要收費。
三個站的額度就請大家自行上各自的官網看囉。
Supabase 建立 schema
進到 Supabase 的後台，點擊 New Project：
填寫好 Project 的基本資訊後，按下 Create new project：
Project 建立好後，左側選單點擊 SQL Editor：
在 SQL Editor 的頁面上，點擊 New query -> New blank query，右側會出現要填寫 Schema 的空白欄位，點擊 Primo 官方給的這個連結：primo_schema.sql，把頁面呈現的程式碼全選，然後貼到空白地方，再按下右下角的 Run，Result 的地方一定要看到回傳的是「Success. No rows returned」這個訊息才行，如果顯示的是錯誤訊息，那就過一下再點，或是先點擊別頁逛逛後再回來點，總之 Result 一定要有 Success。
Fork Primo 專案
進到 Primo 的 GitHub 專案：Primo。
接著點擊 Fork，讓我們在 GitHub 的專案上也有 Primo 的程式碼。
Netlify 安裝 Primo
進到 Netlify 後台：Netlify。
頁面上會看到可以選擇從哪邊的檔案建立專案，點擊 Delpoy with GitHub：
確認完授權後，就可以點擊我們剛剛在 Primo 上 Fork 的專案：
點擊專案名稱後，會確認 Deploy 的一些資訊，都可以不用改，但最下面有一個「Environment variables」，我們需要加上三個 variables：
- PUBLIC_SUPABASE_URL
- PUBLIC_SUPABASE_PUBLIC_KEY
- PRIVATE_SUPABASE_PRIVATE_KEY
加完後會像這樣：
這三個值要怎麼取得呢？
進到 Supabase 的後台，左側選單點擊一個齒輪 Icon 的 Project Settings，接著點擊 API，就可以看到這三個值了，如下圖：
PRIVATE_SUPABASE_PRIVATE_KEY 的值要先點擊 Reveal 後，才會有 Copy 按鈕可以按。
三個值都貼上後，Netlify 的部份就可以點擊 Deploy 讓它開始佈署。
Netlify 預設會是給個亂碼當網站網址，可以在後台的「Site configration」裡自行修改，或是使用自己的網域。
Netlify Deploy 完後，就會提供網址，比方像這樣：silver-cactus-ace72a.netlify.app，點擊網址，會先要求建立一組帳號：
Email 跟密碼都確認後，就會自動登入到 Primo 後台，代表安裝成功：
Primo 操作上蠻直覺的了，這邊就不介紹怎麼操作。
Deploy 到 GitHub
要部署到 GitHub 上，首先要先建立一個 Token。
點擊 Github settings > Generate new token，就會進入新增 GitHub Access Token 的頁面：
如上圖，填寫好 Note 後，Expiration 選擇 No expiration，Select scpoes 勾選 repo，然後頁面滑到最下面，點擊 Generate token。
Token 建立完，請點擊複製按鈕，將 Token 複製下來，下一步在 Primo Deploy 時會用到。
進到 Prmio 後台，假設我們今天網站完成，準備要發佈，當按下 Deploy 後，有二種選擇：
點 Download 的話，就會下載整個網站的靜態檔，再看自己想把檔案放到哪。
這邊我們要進行的是「Connect to Github」，將檔案直接放到 GitHub 的專案上，然後再藉由 GitHub Page 的功能將網站架起來。
點擊 Connect to Github 後，第一次會需要輸入 GitHub 的 Token：
輸入我們剛剛從 GitHub 取得的 Access Token，再按下 Connect，就完成了，接著會看到一樣有二個選項：
選擇哪一種都可以，但通常新製作出的網站，會是用 Create new repo 的方式，一個網站就存在一個專案裡。
一個 Deploy 的 bug
如果有人跟 August 一樣，選好 GitHub 的專案後，就一直看到轉圈圈的畫面：
基本上就是踩中了目前 Primo 的 bug，轉一個小時他還會在轉。
造成這個的原因很簡單，GitHub 的主要分支名稱不叫「main」，而是叫「master」或是其它，就會遇到這種狀況。
所以只需要把專案的主分支名稱改成「main」就可以了。
可以先自己新增一個專案，確定分支叫「main」以後，Primo 上要 Deploy 時，再選擇發佈到這個新增的專案就行。
用 GitHub Pages 建立網站
從 Primo Deploy 到 GitHub 上後，GitHub 的專案上就會看到所有的檔案已經有了：
點擊右上角的 Settings，然後點擊左側選單的 Pages：
接著如上圖，Branch 的地方選擇 main，再按下 Save，GitHub 就會開始將檔案部署成為網站。
要怎麼看到部署成功後網站的網址呢？
點擊上方導覽列的 Actions，會看到剛剛 Deploy 的 Workflow：
再點進去 Workflow 就可以看到網址了：
August 最後用 Primo 製作出來的網址在這：
https://letswritetw.github.io/letswrite-primo-cms-demo/
選了一個最最簡單的版型，所以就一頁，主要是拿來示範用的。
Primo 目前的 V2 版還在 Beta 階段，之後正式發佈時，Theme 會更多，也會修正分支一定要叫 main 的 bug 吧？讓我們繼續看下去。
Top comments (0)