開源免費,在 Netlify 上安裝 Primo CMS,輕鬆製作網頁

開源免費,在 Netlify 上安裝 Primo CMS,輕鬆製作網頁
開源免費,在 Netlify 上安裝 Primo CMS,輕鬆製作網頁

本篇要解決的問題

之前寫過幾篇免費製作一個網站的筆記文,最近看到一個 Primo,官方文件也說使用它們的專案,就可以免費用 CMS 製作出自己的網站。

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

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

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


建立帳號

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

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

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

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


Supabase 建立 schema

進到 Supabase 的後台,點擊 New Project

點擊 New Project
點擊 New Project

填寫好 Project 的基本資訊後,按下 Create new project

填寫 Project 基本資訊
填寫 Project 基本資訊

Project 建立好後,左側選單點擊 SQL Editor

點擊 SQL Editor
點擊 SQL Editor

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

SQL Editor
SQL Editor

Fork Primo 專案

進到 Primo 的 GitHub 專案:Primo

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

Fork Primo
Fork Primo

Netlify 安裝 Primo

進到 Netlify 後台:Netlify

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

點擊 Delpoy with GitHub
點擊 Delpoy with GitHub

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

選擇 Fork 的 Primo 專案
選擇 Fork 的 Primo 專案

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

  • PUBLIC_SUPABASE_URL
  • PUBLIC_SUPABASE_PUBLIC_KEY
  • PRIVATE_SUPABASE_PRIVATE_KEY

加完後會像這樣:

加上 Environment variables
加上 Environment variables

這三個值要怎麼取得呢?

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

取得 Environment variables 的三個值
取得 Environment variables 的三個值

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

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

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

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

建立帳號
建立帳號

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

Primo 後台
Primo 後台

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


Deploy 到 GitHub

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

點擊 Github settings > Generate new token,就會進入新增 GitHub Access Token 的頁面:

新增 GitHub Access Token
新增 GitHub Access Token

如上圖,填寫好 Note 後,Expiration 選擇 No expirationSelect scpoes 勾選 repo,然後頁面滑到最下面,點擊 Generate token

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

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

Deploy 的二種選擇
Deploy 的二種選擇

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

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

點擊 Connect to Github 後,第一次會需要輸入 GitHub 的 Token:

輸入 GitHub Token
輸入 GitHub Token

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

Deploy 到 GitHub 的二種選擇
Deploy 到 GitHub 的二種選擇

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

一個 Deploy 的 bug

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

一直轉圈圈
一直轉圈圈

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

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

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

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

用 GitHub Pages 建立網站

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

GitHub 上存好了 Primo 生成的檔案
GitHub 上存好了 Primo 生成的檔案

點擊右上角的 Settings,然後點擊左側選單的 Pages

設定 GitHub Pages
設定 GitHub Pages

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

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

點擊上方導覽列的 Actions,會看到剛剛 Deploy 的 Workflow:

Workflow
Workflow

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

GitHub Pages 產生的網址
GitHub Pages 產生的網址

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

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

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

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

Summary
開源免費,在 Netlify 上安裝 Primo CMS,輕鬆製作網頁
Article Name
開源免費,在 Netlify 上安裝 Primo CMS,輕鬆製作網頁
Description
這篇文章教你如何在 Netlify 上安裝開源免費的 Primo CMS 來輕鬆製作網頁。內容包括建立帳號、使用 Supabase 建立 schema、Fork Primo 專案、在 Netlify 上安裝 Primo,以及將其部署到 GitHub 的完整步驟。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言