NGO網站建置-git pages/網頁產生器

在NGO網站建置系列文章中,分別相繼整理了:利用免費部落格平台與自定網域名功能;提供自定網域名的免費線上編輯工具來架網站後,本系列關於網站建置的第三篇本文則是介紹的是相對近兩三年來繼部落格CMS等須資料庫軟體支援外(動態網頁),另一種新興的方法:「靜態網頁產生器 」以及代碼資源寄存庫提供的靜態網頁存放與網頁範本利用。


話說不是電腦處理能力越來越強,各類CMS安裝架設方式越來越簡便容易,怎麼最近反而出現靜態網頁回歸流行的走勢呢?從總體效率節能的觀點來看,有人分析:因為靜態網站效能更好,維護比較單純,不需要太多的設定,只要有 Web Server 就可存放,整個網架前後台的呈現與支援都更為輕盈和輕爽,因此有不少個人網頁或組織型的網站轉而選擇跳台改用靜態網頁架𦣓構呈現。NGO/NPO在決定要採用何種方式架設自家網站,管理發佈訊息之前,不妨先評估一下:組織的訊息頻率、人員的網站架設管理知識與可投入時間等要素。鄙人最大的希望是讀過本系列文章的介紹後,即便是沒什麼電腦技術能力的社運工作者,也可以輕鬆地為組織找出其符合使用需求與條件限制下,發揮最佳效益與友善近用、安全私密又易於維護運行的NGO/NPO網站網頁建置方式。


一、利用代碼寄存網站的靜態網頁

git是一個分散式版本控制軟體,它是由linux最早的開發者Linus Torvalds為能解決Linux作業系統內核開發版本管理,所開發的一套工具。因為其功能強大,很快受到許多開發者的青睞,許多提供git的源碼存取服務的網路平台也紛紛問市,其中知名度最高、註冊用戶最多、開發專案數最多無疑當屬GitHub。其實除了GitHub,另有一些更優的替代選項如bitbucket(免費註冊用戶也可以將其碼源專案資源庫設定為私人不公開,這點功能在github得要付費才能使用), gitlab更是把整個網站源碼開放讓人可自由下載安裝在自家的機器上。這三大git源碼存取平台也都有提供靜態網頁存放服務,本文仍以台灣用戶較熟悉的GitHub為主要介紹,雖然這三大家代碼存放平台目前都尚未提供中文介面支持,不過因市場與社群影響力最大的github中文教學資源比較豐富,故先以它為示範案例,或許當NGO稍熟悉了其操作環境後,可再考慮其它另類選項。

教學文:如何在GitHub建立靜態網站

不管是github/ gitlab還是bitbucket,其提供的靜態網頁寄放服務都可以讓用戶自行設定網域名轉址(通常在repository Settings 底下可找到相關訊息指引),例如以下是twngo簡單利用github 範本所作的一張入口網頁(看看就好,懶得作它的DNS/Cname設定了)

https://twngo.github.io/

二、認識md, static page generator

利用github網站上現成的靜態網頁範本,其實與前一篇文章:利用website builder服務操作比較類似,差不多都是利用現成的線上範本直覺式的調整操作,不過因為github主要服務的社群客層以開發者為對像,故使用者最好需可稍微了解一點基本的MarkDown/ html語法。說到這裏,也稍微插入另一個話題,介紹一下所謂的markdown文本。

Markdown 是一種輕量級標記語言,也就是在文件中使用一些標記(markup)來表示原始文本中的某些次序結構和信息,其特色是格式簡單,源文件容易閱讀和編輯,使作者的注意力集中於撰寫內容而非形式;且純文本格式具強大的跨平台特性,因此廣受開發者社群的愛用。我自己這兩三個月來,也逐漸習慣使用簡單的文字編輯器把文件存成markdown 格式,而很少需要開啟office等肥大又操作麻煩的文書編輯軟體。學習一些基本的markdown,可以在利用上文github pages或是接下來談的靜態網頁生成器的使用上,發揮不少效用。因為大部份的靜態網頁生成器都支持markdown文本,可自動地把markdown文件轉換成為html網頁檔案。

要利用開源靜態網頁生成器來作為網站架構後台,則使用者得要有點信心可以在純文字指令環境下安裝相關軟體,並能操作簡單的git 指令來更新網頁資源庫。

雖然這兩年來,台灣出現議題性的網站偶會使用靜態網頁或利用靜態網頁生成器來製作(如推動同志平權的婚姻平權大平台),但我很少看到台灣NGO長期維護的官網使用這種方式來架設管理(例外是民間司改會,不過人家是算是「台灣大聯盟」等級的NGO,非一般人力資源較窘迫的NGO能望其項背)。故我個人是不太建議資源與數位能力有限的台灣NGO,在此階段完全跳入使用靜態網頁產生器工具來維護管理自家的網頁訊息內容,畢竟其學習曲線可能處在前初期要投入大量時間人力成本而回收有限的狀況。但我們多少要知道一下這個世界與外面的世界走到什麼境地,若有興趣了解學習「靜態網頁產生器」,或可參考一下我過去寫了一些流行的靜態網頁產生器安裝與部署的部落格記錄文章。

開源靜態網頁生成器網站


jekyll最多人使用的spg : jekyll 使用(本機安裝筆記); 如何更換jekyll 主題

hugo: 本機安裝篇; 網路佈署篇

Pelican: 另一個靜態網頁生成器


最後再分享一下,以本站首頁https://twngo.xyz 為例,我分別利用了:

  1. codepen.io:它是一個提供給網頁前端開發者用在瀏覧器環境下的開發工具,其上有許多網站設計的開源專案,用戶可以fork到自己的codepen project再作修改(轉用時最好能保留或提及原作者的貢獻)
  2. 在codepen上修改好的網頁,可以自動上傳到gitlab.com,或是下載後再push到github/gitlab免費提供靜態網頁佈署的代碼拖管服務平台。基於風險分散與支持開源精神,twngo.xyz的首頁代碼是存放在gitlab底下。
  3. netlify.com:gitlab/github雖也有提供「html類型專案」的免費網頁存放空間(以及自定網域轉址),不過放在github比較麻煩的是,其自定網域者並不提供SSL網頁瀏覧時的通訊加密(這點跟google blogger/ yahoo tumblr一樣令我不爽,尤其是在chrome的url地址列會看到超級醜紅色三角型危險警告)。因此我會再多花一道工序,把html代碼佈署在netlify.com,其上可代為免費安裝let’s encrypt SSL。

以上就是twngo.xzy的首頁製作過程。