最近寫了 publii 的桌面版離線 Static CMS 介紹,想說就乾脆折騰到底,把之前未完成的 forestry.io 使用介紹給寫完吧。

進入 forestry.io

要使用 forestry.io 當然得先在上頭註冊一個免費帳號。順利完成註冊後登入看到的畫面大概是如下的樣子,第一道步驟就是按右上方的「Add Site」以新建網站,隨即出現下圖,用戶可挑選使用的是 hugo/ jekyll/VuePress/ Gatsby 作為forestry.io 新網站的建置工具。有關 hugo 或 jekyll 這兩個目前網路上最大宗的靜態網頁産生器,可以參考本人所寫的介紹,或是自行搜尋網路上其它資源。至於後二個,我並未接觸過,有時間再來研究一下。

不過這裏不管是 hugo 或 jekyll,都是使用者已在自己電腦端安裝了hugo 或 jekyll 軟體、弄好了一個網站,並將之於到網際網路上某一個代碼拖管的服務平台上了。如果你還未完成以上工作,或者並不知道該怎麼做,只是想試試 Static CMS,則請選取視窗中左下角「Don’t have a site yet?Try our Jekyll starter template!」這兩二行字,以使用 forestry 以 jekyll 打造的網頁內容管理器。本文接下來的重點,就是走一遍左下角的使用 forestry 站方提供的 jekyll 模版為示範,並摸索相關功能設定。

按下「Don’t have a site yet?Try our Jekyll starter template!」這二行文字後,視窗出現的訊息是請用戶挑選要把代碼資源庫存放在哪一個拖管服務商。目前 forestry.io 提供的選項有: github/ gitlab/bitbucket/microsoft azure。本文姑且繼續其中之市佔最大的 github 為示範,再此挑選 github 為此 CMS 的 git repo 拖管服務商後,隨之會彈出瀏覽器新視窗,以授權 forestry.io 可以讀取或修改用戶存放在 github 上頭 repo 的權限。

同意授權後,新視窗即會自動消失,回到原本的作業畫面則看到 forestry.io 將要代為在使用者的 github 帳戶底下新建一個 repo, 姑且使用其預設的名字「forestry-demo」好了。然後 forestry.io 就會開始自動地在 github 上建立好一個名為「forestry-demo」repo,此時瀏覽器畫面會呈現新站正在建置的系統訊息。

過了十來秒後,即會看到瀏覽器畫面變成了一個「很像 CMS」後台管理的地方(嗯,如果使用過 wordpress/blogger 應該可以明白我的意思)

在自己的 github 帳戶底下,的確多了一個 forestry-demo 的 jekyll 網站代碼資源庫。這個 repo 就是 forestry 用來存放新網站原始代碼資料,也就是與 CMS /網站前端內容連動的重要來源。

CMS github 網頁自動佈署

看起來到目前為止,已經順利地利用 forestry.io 提供的 jeykll template 快速地連結 github 底下新的repo,建立了一個靜態網站,那麼到底這個網站前台長得什麼樣子,它的網址又在哪呢? 要能看此網站的樣貌,我們得先做完其佈署設定。

setting/ deployment 首先在 github repo 底下,請多建一個 gh-pages 分支,並切換到該分支操作。再回到 forestry.io app底下,請在使用中的 CMS setting處,找到 deployment 分頁進行修改。在deployment有一個下拉式選單,可以看到 forestry.io 提供了多樣的選項讓使用者來布署其靜態網頁來源一,例如除了上頭 git repo 代管之外,也可以透過 ftp/ Amazon S3。當然因為在這個示範操作中,使用的是 github page,故請在此處設定為該 repo gitpage 的佈署連動,改好之後進行存檔。

這時回到在此 github repo setting 頁當中的 GitHub Pages, 看到此處出現了一個網址,也就是我們透過 forestory.io jekyll template 弄出來的一個以 jekyll 打造的新網站

https://jxtsai.github.io/forestry-demo/

所以說,利用 forestry.io 預設的 jekyll 模版來建置 CMS真的越級簡單的,下面會再進一步介紹 CMS 的後台一些操作細節。目前 github 已支援自定域名的 https TLS/SSL(by Let’s encrypt),若手上有私人 DN 域名,可以順便作一下設定,讓新網站的域名更具個性品牌獨特性,而非只是共同的 github.io 子域名,例如我已將上頭 url https://jxtsai.github.io/forestry-demo/ 映射到 https://demo.jxtsai.info 

jekyll 可以用來快速建站,也可以用來作為個人的網誌.最簡單來說,一個全新的 jekyll 網站會預設產生二種文章類型,一為 page, 另一種叫做 post. post 的特色是以發佈時間為排序,而page 的自由度則更為,但這二支檔案都對應依在 layouts/ 底下的 page.html,post.html 來把 markdonw 的 post 或 page 檔案自動轉成符合 page.html 或是 post.html 樣式的html

進一步地看 forestry CMS 後台設置

除了上述 jekyll 預設會生成的 page/ post 文件格式外,forestry 現也支援讓用戶在 CMS 上自定其它的文件格式,方法是透過左側欄 Front matter 來建立模版。

在建立文件模版時,它會提供不同的功能欄位樣式借借使用者挑選,例如有:文字、數字、日期、區塊…..等欄位,使用者可以想像一下,假如是製作一個”教學課程使用”或”活動宣傳性質”的模版,這樣的文章有哪些固定必有資訊,透過文件模版的制式欄位提供,不但讓作者在填寫資料時方便,呈現的內容樣式也能一致完整。

作好文件模版後,還要有一道手續來新增內容樣式,如此它才能被套用。請到 settings / sidebar 來新增內容樣式,例如在官網內建的 jekyll 站台底下,還另有”people/projects” 二類內容樣式,若要新增其它內容樣式(template),

則按”Add Section”,挑選其中的 DIRECTORY(可新增多份文件, 另一種”DOCUMENT”則只能有一篇),其路徑、資料夾命名、文件檔案格式等設置,可參考已有”people”,“projects”的寫法再作修改,而在最下方的 template 則可挑選自己剛才新建的文件模版,如此一來,此類新文件的欄位格式即會都套用此模版,作者只須按要求應提供的資訊填入即可。

因為此次示範使用的是 forestry 所建的主題外觀,在現有的 CMS 後台找不到修改或安裝新主題外觀的設定。除了放在 pages/ posts / templates/ media 的東西可以修改外,其它細節的安排(例如更換上方表頭的 logo, 頁面最下方的版權宣告資訊等)與主題外觀,恐怕要在 repo 上作修改。

下回來寫一篇如何在已建制好 jekyll/hugo repo, 連接 forestry.io Static CMS 設置,或者更能符合網站原作者希望量身打造,以及同時滿足多人利用 forestry CMS 協作內容的需求。