上回寫過了直接使用 forestry.io 提供的 jekyll 主題模版/文章結構,以體驗它的靜態網頁內容管理系統,而本文則是要介紹如何把自己利用 jekyll 製作的網頁整合入 forestry CSM。

jekyll 靜態網頁建置

jekyll 在電腦端的安裝方法、如何快速建置網站、找尋資源更換主題外觀等步驟本文就不多介紹,互聯網上可以找到許多中文資源。以本人目前所維護的數個網站多依賴 hugo、jekyll 建置,故早已安裝好該程式軟體(作業環境:linux mint 19.1),為了這次試驗,第一步就是先從網路新到找符合眼緣的網站主題 theme. jekyll theme

本回使用 FullIt theme作示範,先下載它完整的主題包壓縮檔,解壓後開啟 terminal/bash 確定當前工作目錄已在在所下載的主題包資料夾。 在使用 jekyll 主題包通常要注意二件事:1)原資料夾中是否有”Gemfile” 這支檔案,如果少了它,就無法順利執行 bundle 指令,而我的作法就是從自己電腦中其它的 jekyll 網站資料夾中複製這支檔案過去,即可順利啟動(bundle exec jekyll serve)。2)即便順利啟動本地端的靜態網站即時示範,有時候卻會發現網頁外觀並不如示範圖像的模樣,整個版形都亂掉了。這大半是因為 _config.yml 這支檔案中的 “baseurl” 出了問題,請記得修改成符合自己環境下的目錄名稱,或是保留其雙引號空白的狀態。

如下圖所示,這就是目前在文字指令環境下執行這行 bundle exec jekyll serve 指令後,瀏覧器即會在指令的本地端網址出現 FullIt 主題外觀的 jekyll 靜態網站。

jekyll post/article 文件檔案結構

jekyll 的文件規格有 page/post 二種格式,後者就為了滿足把 jekyll 當作部落格網誌使用,以時間搓記為區隔,但每一份文件樣式都差不多,相較之下 page 格式樣式的自由度就高大許多。如果熟悉 wordpress, blogger 二款最主流的部落格寫作平台,大概就是它們底下的 article/post 二者的區別。

把 jeykll 當成一般的網誌部落格使用,在新網站下自動生成的 _posts 檔案夾下即放了以日期為發佈順序的 markdonw 檔案,從其命名方式,如:2018-05-02-welcome-to-jekyll.markdonw 推知其為 2018 年 5 月 16 日發表的文章,副檔名則完全揭示它為 markdown 語法寫成。post 文件由前 front matter, content 組成,大略如下:

---

layout: post
title:  "Welcome to Jekyll!"
date:   2018-05-02 20:36:11 +0800
categories: jekyll update
---

從這裏開始就是文件本體的內容了,就有點像 html 文件被 <body></body>包夾的部份,而 jekyll 可支援 markdown 語法,再代為自動轉而生成 html 檔案。

第一部份由”—“前後所包夾的即是所謂的 front matter, 有點像 html 文件表頭之間所標註的基本資訊,如標題、時間、作者、分類、標籤等基本資訊,其中最重要的是layout,明示了它的模式是依照 _layouts 目錄底下的“post.html”來把 MD文件轉換成該 html 樣式。front matter之後,也就是第二 — 以後的內容,則是文章的本體內容。如果預設的 html 檔案中有{% %},這個語法是是網頁前端設計中所講的「template」,也就是在文件中指定叫出某個已預設好的模版,這些 html 模版的存放目錄即是“_includes”,可以自行打開底下的文件檔案稍研究一番。網頁中插入 template 是為了執行某些程式變數與功能,它涉及較複雜的技術,本文本人無法著墨大多,總之就是對於 jekyll 的文件結構與相互關係先有一點最基本的概念。

forestry + repo 授權設定

確定本地端的靜態網站如己意地稱稍作調整,且已更新相關基本資訊後,就可以把這網站資料夾推上遠端的代碼代管服務商(forestry 支援github/ gitlab/ bitbucket/ MS azure developer 四大家)。

在 forestry.io 新增網站,然後指定新網站所存放的服務商與 repo 名稱,使其進行同步串連。接下來的步驟手續就和之前使用 forestry 提供的內建 jekyll template 差不多。

已順利完成 repo 串接與文件設定

在 deploy 底下設定 storage provider/ repo branch(請記得要把最下方 git : deploy on git push 打開,這樣才能把內容變動與 git repo 完成同步)

原 jekyll 網站的文章(article)與貼文(post 整合在 forestry CMS 管理後台的模樣。

前端在瀏覽器看到的網站模樣,網址是 github pages 提供,也可以設定自有域名。完工

相對於 post 格式的單純(通常文件內不會放入太多的模版),artile 的自由與複雜即是讓用戶可以視需求新增模版或在文件內交換引入已寫好的模版,但不管如何,它的 front matter 還是需要提供必要的 layout 指定,然後用戶在”_layouts”目錄下新增一個檔名完全相符對應的 html 文件。這點在前一篇文章曾稍微提及在 forestry 靜態CMS已能支援讓用戶從瀏覽器的圖形介面端,透過新增欄位、指定欄位性質的文件 article 屬性設定,自組搭造符合用戶需求的文章樣式。

好了,這麼辛苦把本地端、依靠文字指令與前端開發環境製作的靜態網站掛上 forestry CMS,最主要就是可以滿足多人管理共筆網站,尤其當多名作者中可能有人並不熟悉 jekyll/ hugo, git….等大量依賴透過 CLE 操作的方式,forestry CMS 為這些人提供了更為直覺方便的瀏覽器寫作環境。原管理者可在 setting 選單下新增協作者。

協作者可以專心在內容的創作、發佈或編輯修正等任務,就好像別人已代為建置好了一個 wordpress 網站,作者只需要發文貼文即可。forestry.io 免費版可支援最多三名協作者,再超過則每月收取 9 美元費用。

寫了老半天,為何不乾脆使用 wordpress(通常要付錢)或是 blogger(免費)就好了嘛,幹嘛這樣愛折騰自己啊……。下回再來介紹另一家也想走靜態網頁內容管理服務 netlify static CMS 吧。