Alan Tsai 的學習筆記


學而不思則罔,思而不學則殆,不思不學則“網貸” 記錄軟體開發的點點滴滴 著重於微軟技術、網頁開發、DevOps、C#, Asp .net Mvc、Azure、AI、Chatbot、Docker、Data Science

[部落格改版學DevOps][02]Wyam是什麽?

[部落格改版學DevOps][02]Wyam是什麽?.jpg
圖片來源:https://pixabay.com/en/books-spine-colors-pastel-1099067/ 

Wyam是這次改版的核心工具,因爲整個部落格將會使用Wyam來產生出來。

這篇將會介紹什麽是Wyam,爲什麽要用Wyam和如何使用它快速產生出網站。

Wyam是什麽?

Wyam是一個.Net的Static Site Generator (以下簡稱SSG)。SSG通常用作於產生一些不復雜的靜態網站,例如部落格,或者Library API文件網站。

既然Wyam是一個SSG,那麽就要來瞭解什麽是SSG?

Static Site Generator是什麽?

不管是用什麽語言做網站,到最後產生的都是html的内容由browser去render。而產生html的過程,可能用到了一些Server Code,例如在.Net的世界用 C# (邏輯) 加上Razor (模板)來產生出html。

這個過程是動態產生的,因此最差的情況下是每一個request進來,同樣的code要跑一次(當然這個過程可以用cache來加速),這個非常的浪費資源,尤其是每一次產生結果都一樣的情況下。

因此,有一個idea冒出來,有沒有可能一開始我就產生好靜態的内容(html)?這樣host在servr的不再是C#+Razor,而是純html内容。

SSG就是做這個事情的工具,撰寫的時候還是用類似 程式語言+範本,透過SSG“編譯”成爲html,然後host html。

Static Site Generator有什麽好處?

速度相對快
由於已經是html,不需要server 編譯的時間。
任何server都能夠host
基本上不管什麽Server都能夠host html,減少了server的相依性
還擁有傳統的 邏輯+範本 的開發方式
雖然在威力上沒有真正的Server side code强大,但是在建立整個網站的時候,還是可以用習慣的 邏輯+範本的方式開發出最後的html。
可以控制一切
由於一切都是個人撰寫,因此最後html要呈現什麽,完全由自己控制。

總結來説在於速度及兼容性很高。

Static Site Generator有什麽壞處?

攥寫界面不友善
相較於一般使用CMS或者有後臺的Server網站,在新增文章的時候SSG類型的gui會比較偏coder friendly而不是User Friendly
上板比較不容易
由於要把内容產生出html,因此整個的儲存過程會複雜一些。

總結來説,SSG的最大壞處是不太適合一般的User,而對於一般的coder來説,SSG反而是一個很好的機會瞭解整個開發的流程及過程,因爲它其實就是一個簡化版的開發網站工具。

對我自己來説,我覺得從Google Blogger搬出來最大的原因就在於速度以及撰寫容易(xml看起來太累)

一些有名的Static Site Generator

Jekyll

最出名應該是Jekyll。這個是一個用ruby寫的SSG,最出名的原因是github原生有支援,因此只需要把原始碼check in,github就會自動呼叫編譯出html。

因此有段時間很流行用github寫部落格,用的就是Jekyll搭配Github Page。

我沒有選擇jekyll的原因是因爲他是Ruby寫的,而在Windows下面要安裝Jekyll太麻煩了,因此直接被我放棄了。

Hexo

Hexo也蠻出名,原因是因爲主要使用的是NodeJs,因此在安裝及執行上面非常的簡單。

我自己本來也打算用Hexo,不過在我知道有Wyam之後就放棄了。

還有很多SSG,有個網站可以看一下StaticGen,列出了SSG以及其排名。

爲什麽選擇Wyam

使用.Net Framework寫的
因爲是用.Net Framework寫的,因此使用了熟悉的C#做邏輯及Razor做模板。當初還有個考量是如果.Net程式希望embed類似功能,那麽整合起來應該會更加容易級方便
可以使用Razor做文章的撰寫
由於之前在Google Blogspot寫,因此已經習慣用html寫文章。大部分的SSG都只支援Markdown,雖然Markdown有支援HTML,但是有些情況下產生出來還是怪怪的,因此允許使用Razor對我來説是非常方便的一件事情。

安裝Wyam

介紹了這麽多之後,來看看怎麽安裝Wyam。

Wyam小檔案

一樣,建議用chocolatey做安裝,原因是wyam其實就是一個command line工具而已,因此自己手動下載在設定path不如直接使用chocolatey安裝比較快。

在接下來的demo我使用的版本會是1.3.0,就我所知主要是底層有調整,但是api本身沒有變,因此應該沒有差才對。

用Wyam建立部落格

安裝完了之後,就可以用Wyam來建立一個部落格網站。打開powershell或者cmd之後,執行:

wyam new --recipe Blog
wyam --recipe Blog --theme CleanBlog
wyam --preview --recipe Blog --theme CleanBlog
wyam new --recipe Blog

用Blog這個"食譜"產生出對應的設定

執行完了之後會在資料夾下面多出幾個檔案:

  • config.wyam - 設定產生的一些參數
  • input - 這個資料夾裏面包含產生的範本

powershell_2018-05-01_13-51-48.png
產生完的資料夾和檔案結構
wyam --recipe Blog --theme CleanBlog

用Blog這個"食譜"搭配CleanBlog這個"主題"產生出html

執行完了會多出一個資料夾output,裏面會有最後要發佈的html内容:

powershell_2018-05-01_13-57-27.png
最後產生的内容結構
wyam --preview --recipe Blog --theme CleanBlog

這個是起一個server,讓我們更好的看整個結果。

使用網址:http://localhost:5080可以看到實際的結果。

如果要把這個網站停掉,那麽就是在界面直接輸入Ctrl+c


CleanBlog Theme的内容

Recipe和Theme

Recipe其實就是某種產生的組合,而Theme則是不同的模板方式。

官方預設帶了3種Recipe:

  1. Blog
  2. BookSite
  3. Docs

而每一種Recipe有幾個不同的Theme可以搭配嘗試,有興趣的話可以從官網找到有提供的然後產生看看那些適合你: 官方的Recipes

結語

這篇介紹了什麽是Wyam,什麽是Static Site Generator,以及如何使用Wyam的Recipe及Theme建立出一個部落格網站。

在下一篇開始介紹Wyam的運作機制,如何修改設定達到產生出來的内容會不一樣。

comments powered by Disqus