許多網站頁面是動態的。這意味著一個頁面的內容可以在不同的時段發生變化,這取決於誰在載入它,他們是否登入或退出,以及其他一些因素。
如果你的網站不這樣做,那麼你處理的就是靜態頁面。
靜態網站沒有任何動態內容。在很多情況下,這可以轉化為更快的載入時間和更好的整體網站效能。瞭解動態網站和頁面的優點和缺點將有助於你決定何時使用它們是有意義的。
本文將介紹什麼是靜態網站生成器,以及何時應該使用它們。我們還將討論靜態網站的優點和缺點,並向你介紹五個你今天可以使用的頂級生成器。
什麼是靜態網站生成器?
從技術上講,你不需要使用 “生成器” 或任何內容管理系統(CMS)來建立一個靜態頁面。如果你對HTML和CSS有所瞭解,你可以使用你最喜歡的文字編輯器建立一個頁面,而不需要太多麻煩:
一個文字編輯器中的HTML文件
另外,你可以依靠像Bootstrap這樣的網路框架來訪問先進的HTML、CSS和JavaScript庫,你可以用它來建立靜態和動態網站:
Bootstrap主頁
靜態網站生成器提供了第三個更精簡的選擇。它們通常包括各種工具,使之能夠輕鬆地啟動一個網站,為其設計風格,建立內容,釋出它,並根據需要更新頁面。
如果你不熟悉網站開發,那麼你可能需要像靜態網站生成器這樣的工具來幫助實現你的願景。
總的來說,大多數流行的生成器提供了廣泛的功能,使你的工作更容易,包括:
- 支援Markdown語言:大多數生成器不包括完整的文字編輯器。相反,它們使用Markdown語言,有時甚至包括額外的自定義Markdown語法。
- 內建的佈局和模板選項:設計和樣式化一個網站往往是最具挑戰性的建設過程。這就是為什麼生成器往往包括內建的模板和佈局選項。
- 支援多種型別的內容:根據你使用的生成器,它應該支援各種型別的內容,如部落格文章、頁面、畫廊等。
- 內建SEO功能:沒有適當的搜尋引擎優化(SEO),任何現代網站都是不完善的。如果你正在考慮–或已經在使用–一個不提供SEO功能或附加功能的生成器,你最好轉到一個新的工具。
值得注意的是,大多數靜態網站生成器假定你已經有一個基本的網站開發背景。一些選項對初學者相對友好,但它們仍然要求你熟悉一些概念,如命令列、Markdown語言等等。
為什麼使用靜態網站生成器(優點和缺點)?
你可能會想,既然有WordPress這樣的工具,為什麼還有人要使用複雜的靜態網站生成器呢?
這一切都歸結為逐案使用、個人偏好和效能。
在絕大多數情況下,靜態網站的載入速度會比動態網站快得多。這是因為你的伺服器要處理的請求要少得多,而且不涉及資料庫。每個訪問者都會看到相同的頁面,而所有的資料都是在你的靜態網站生成器的程式碼中烘烤出來的。
一些開發者也更喜歡與靜態網站生成器打交道,而不是與包含太多功能的複雜CMS打交道。網站生成器往往是精簡的,而且在某些情況下,它們是高度模組化的。這意味著需要處理的臃腫問題較少,需要掌握的功能也較少,尤其是當你只對建立特定頁面感興趣時。
靜態網站與動態網站
當然,不是所有的網站都應該是靜態的。那麼,你怎麼知道什麼時候這才是符合你需求的正確方法呢?
下面是一些不一定需要動態的網站的例子:
雖然靜態網站的想法可能聽起來很有侷限性,但在不引入任何動態元素的情況下,你可以做很多事情。
然而,任何需要資料庫的網站都是不可能的。這意味著你不能使用靜態網站生成器來建立線上商店、帶有評論區的部落格文章、帶有使用者註冊的網站等等。
如果你不需要動態功能,使用靜態網站生成器將使你的網站效能遠遠好於大多數CMS的開箱即用。
我們說 “開箱即用 “是因為你可以做很多事情來優化像WordPress這樣的CMS。根據我們的經驗,一個優化良好的WordPress網站可以和一個靜態的網站一樣快(前提是你也有很棒的主機)。
如果你僅僅是因為效能問題而選擇使用靜態網站生成器,那麼考慮一些CMS選項可能是值得你去做的。
另一方面,如果你確信你的網站不需要動態功能,剩下的就是找到合適的工具。
5個最好的靜態網站生成器
在我們討論具體的靜態網站生成器之前,值得一提的是,所有這些工具都是自我託管的。要使用它們,你需要找到一個可以為你設定它們或讓你訪問命令列的主機供應商。
考慮到這一點,讓我們來看看我們對2023年靜態網站生成器的一些首選。
1. Jekyll
Jekyll主頁
Jekyll是最受歡迎的開源靜態網站生成器之一–這是有原因的。它是支援GitHub Pages的軟體,為靜態網站提供免費託管。
在其核心,Jekyll是一個對部落格友好的生成器。這個靜態軟體支援Markdown,有一個全面的分類系統,並支援Liquid模板語言。
一些使用Jekyll的最受歡迎的網站包括Ruby on Rails、Sketch和Spotify for Developers。
如果你想推出一個免費的靜態網站,Jekyll和Github Pages可能是你的一個奇妙組合。
2. Hugo
Hugo主頁
Hugo是一個開源的靜態網站生成器,它自稱是一個 “通用 “的框架。這是一種優雅的說法,即你可以使用Hugo來建立廣泛的網站,遠遠超出了簡單的部落格和宣傳冊頁面。
使用Hugo,你可以以極快的速度生成網頁,構建時間通常在一秒鐘以內。該軟體使你能夠在使用LiveReload時預覽你的頁面的變化,並提供強大的主題設計功能。
Hugo使用一個模組化系統來幫助你建立靜態網站。你有幾個模組可以選擇,包括內容、佈局和資料。
一些使用Hugo的流行網站包括1Password的文件頁面、Linode的文件部分和KeyCDN。
使用Hugo,你可以在任何頁面上組合多個模組,以獲得你需要的確切功能。
3. Gridsome
Gridsome靜態網站生成器
Gridsome是一個強大的靜態網站生成器。你可以用它來建立諸如Vue.js和GraphQL等現代工具的頁面。
你也可以用Gridsome來為CMS建立一個 “頭”。例如,您可以使用國雙使用從WordPress中提取的資料來生成靜態頁面,這是一種 “無頭” CMS設定。
無頭設定的好處是,你可以得到使用靜態頁面的所有優點,同時也可以利用CMS的全部功能。換句話說,你可以訪問資料庫、高階分類法,甚至是全面的文字編輯器。
還值得注意的是,Gridsome提供了一個廣泛的外掛集合,你可以用它來擴充套件生成器的功能。如果該框架沒有提供開箱即用的功能,那麼很可能就會有相應的外掛。
Gridsome仍然是一個比較新的靜態網站生成器。然而,已經使用該軟體的網站的兩個很好的例子是亞特蘭大智慧城市博覽會和Format。
正如你可能想象的那樣,Gridsome並不像本列表中的其他工具那樣對初學者友好。你需要一些網路開發經驗,才能最大限度地利用這個軟體。
如果你已經對Vue.js有所瞭解,Gridsome是你可以使用的最好的靜態網站生成器之一。
4. Eleventy
Eleventy靜態網站生成器
Eleventy是靜態網站生成器領域的一個相對新成員。這個特殊的軟體依賴於JavaScript和Node.js。這意味著你需要對JavaScript語言有一定程度的熟悉才能有效使用它。
如果你能熟練使用JavaScript,Eleventy會給你帶來一些靜態網站生成器中最好的效能。
這個工具支援多種模板語言,但在其核心部分,Eleventy依賴於Liquid,這使得它在這方面類似於Jekyll。除了Liquid,Eleventy還可以為你的靜態頁面解析其他幾種語言,包括Markdown和JavaScript。
更重要的是,隨著Chrome Developers和Netlify等網站使用Eleventy,它已經越來越受歡迎了。
根據我們的經驗,開始使用Eleventy可能有點困難,因為它的文件還在編寫中。然而,如果你正在尋找一個精簡的靜態網站生成器,這些努力是非常值得的。
5. Pelican
Pelican靜態網站生成器
Pelican是一個鮮為人知的靜態網站生成器,它的核心是Python。如果你熟悉Python,你可以使用該軟體使用Markdown和reStructuredText來建立靜態網頁。
這個軟體帶有一套你可以定製的主題,它包括多語言支援。此外,Pelican使你能夠從WordPress、RSS訂閱和其他幾個第三方來源匯入資料,使它成為無頭設定的一個很好的選擇。
Pelican提供了一套強大的外掛,你可以通過設定來擴充套件生成器的功能。總的來說,它是我們名單上最精簡的靜態網站生成器之一,但如果你已經知道或想學習Python,它是一個了不起的選擇。
選擇靜態網站生成器時需要考慮的問題
你對靜態網站生成器的選擇將主要歸結於三個因素。讓我們來分析一下它們是什麼:
- 生成器使用哪種語言:一些靜態網站生成器在很大程度上依賴於JavaScript和其他庫。根據你使用的生成器,你可能需要對其程式語言有一些熟悉。
- 易用性:如果你是一個有經驗的網路開發人員,你應該能夠相對容易地掌握任何靜態網站生成器。然而,如果你正在做你的第一個專案,你會想選擇一個初學者友好的生成器。
- 它支援的內容型別:大多數流行的靜態網站生成器將使你能夠建立所有型別的頁面。然而,其他的則專注於特定型別的內容,如部落格文章。
- 現有的軟體社羣:總的來說,我們建議你使用具有完善的使用者社羣的工具。這樣,你會更容易排除故障和得到問題的答案。
我們在這裡看到的大多數靜態網站生成器都要求你至少在某種程度上熟悉網頁開發的基本原理。如果這聽起來太多,你可能最好選擇一個使用者友好的CMS,如WordPress。
一個有管理的WordPress網站可以和一個靜態網站一樣快。此外,CMS是直接使用的(即使你是在做你的第一個專案)。
小結
很多人認為靜態網站是舊網際網路的殘留物。然而,靜態頁面對任何網站來說都是一個福音,因為它們通常比它們的動態對應物提供更好的效能。根據你選擇的生成器,你甚至可以用靜態頁面輸出建立一個無頭的WordPress網站。
如果你正在考慮使用一個靜態網站生成器,這是我們的五大推薦:
- Jekyll:一個對部落格友好的靜態網站生成器,你可以和Github Pages一起使用。
- Hugo: 一個基於模組的靜態網站生成器,具有極快的效能。
- Gridsome:這個可擴充套件的生成器使用Vue.js來幫助你建立靜態頁面。
- Eleventy: 如果你是一個JavaScript和Node.js的粉絲,這個生成器是完美的。
- Pelican: 一個精簡的、基於Python的靜態網站生成器。
你是否在考慮為你的下一個網路專案嘗試使用靜態網站生成器?請在下面的評論區告訴我們吧
評論留言