
一個靈活且易於使用的小型靜態網站產生器。它很靈活,因為沒有必需的網站結構,也沒有任何特定於部落格的概念。它很容易使用,因為我們可以從一個標準的 HTML 網站開始,逐步引入tinystatic。
tinystatic 的概念很簡單:從輸入目錄中的每個文件,在輸出目錄中建立一個文件,然後我們可以將其用作網路伺服器的公共目錄。 tinystatic 如何產生輸出檔案取決於輸入檔案副檔名:Markdown 被轉換為 HTML,而 CSS、JS 和圖片則被簡單地複製。對於 Markdown 和 HTML 文件,您可以在文件頂部指定元資料。透過在此文件元資料中指定模板,並在單獨的目錄中提供模板,您可以使用 Go 的 HTML 模板引擎。這裡是典型部落格網站的範例以及快速入門指南,請參見下文。
下載適合您的作業系統的tinystatic 二進位檔案:
(可選)將二進位檔案新增至 shell 路徑,方法是將二進位檔案放入現有目錄(如/usr/bin或將二進位檔案的父目錄新增至路徑變數。
如果您將tinystatic新增至路徑中,您應該能夠調用
tinystatic -help否則,您需要在呼叫時指定tinystatic二進位檔案的路徑
/path/to/tinystatic -help如果您不想使用預先建置的二進位文件,則需要安裝 Golang 編譯器來編譯tinystatic。然後,您可以透過執行安裝tinystatic
go install -u github.com/julvo/tinystatic或透過複製儲存庫並在此儲存庫的根目錄中執行go install或go build 。
這是一個 10 分鐘的教程,我們建立一個小型博客,從單一 HTML 頁面開始,一一介紹tinystatic 的功能。
首先,我們建立一個名為routes的資料夾。在此資料夾中,我們建立一個 HTML 檔案index.html其中包含以下內容:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > Welcome to our blog </ h1 >
</ body >
</ html >現在,我們可以第一次運行tinystatic 。預設情況下,tinystatic 期望在包含routes目錄的目錄中調用,但您可以使用-routes參數來變更它。運行命令後,您應該會看到routes資料夾旁邊出現一個資料夾output 。我們的文件結構現在如下所示:
my-blog/
routes/
index.html
output/
index.html
我們現在可以在輸出目錄中執行一個網頁伺服器,例如使用Python的內建伺服器在http://localhost:8000上開啟我們的網站:
cd output
python3 -m http.server
到目前為止,tinystatic 所做的只是將index.html從routes複製到output - 並不是那麼有用,但請堅持...
讓我們為routes新增第二個HTML文件,例如about.html :
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > About us </ h1 >
</ body >
</ html >再次運行tinystatic並且我們的網頁伺服器仍在運行後,我們現在可以導航到http://localhost:8000/about 。請注意,此路由中不再有.html ,因為tinystatic 建立了一個about單一index.html資料夾,如下所示:
output/
index.html
about/
index.html
我們不喜歡目前頁面的地方是所有基本 HTML 結構的重複。對index.html和about.html使用共用模板不是更好嗎?為此,我們在routes資料夾旁邊建立一個名為templates的資料夾,並在其中放置一個 HTML 檔案default.html :
my-blog/
routes/
index.html
about.html
templates/
default.html
default.html的內容應該是:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html >另外,我們將routes/index.html的內容改為
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}以及routes/about.html的內容
---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}再次運行tinystatic時,輸出與先前的輸出相同,但我們將HTML框架合併到一個地方。
正如剛才所看到的,我們可以透過在文件頂部的元資料中提供模板名稱來指定一個模板來渲染我們的內容。我們還可以包含其他模板(見下文)並使用 Go 的模板管道。在渲染時,我們可以存取在檔案頂部定義的元數據,一個具有Route.Href 、 Route.FilePath和Route.Meta欄位的 struct Route ,它又是在檔案頂部定義的元資料的映射。此外,我們可以訪問Routes ,它是所有路線的切片(對於剛接觸 Go 的人來說是數組),我們將在下面進一步了解它。
讓我們結合使用此元資料和 Go 的模板基元來根據當前頁面更改頁面標題。為此,我們將routes/about.html中的元資料改為
---
template: default.html
title: About
---
最後將templates/default.html更改為
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html >重新產生網站後,瀏覽器現在應該為我們的索引和關於頁面顯示不同的頁面標題。
現在,讓我們在路由資料夾中建立一些部落格文章,例如
routes/
index.html
about.html
posts/
first_post.md
second_post.md
在這些.md檔案中放置一些 markdown,頂部有一個元資料部分,將範本指定為default.html ,類似於我們在routes/index.html和routes/about.html中指定元資料的方式。對於first_post.md ,這可能看起來像這樣:
---
template : default.html
title : First Post
---
# Here could be some fine content
再次執行tinystatic以重新產生輸出,我們現在可以造訪http://localhost:8000/posts/first_post和http://localhost:8000/posts/second_post 。 Markdown 已轉換為 HTML 並放置在名為body的模板中,以便它呈現到templates/default.html中的{{template "body" .}}佔位符中。請注意這與.html檔案有何不同,我們需要手動呼叫{{define "body"}} ... {{end}} 。
接下來,讓我們使用前面提到的Routes切片來建立貼文清單。我們將routes/index.html的內容改為:
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
< a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul >重新生成後,我們應該在索引頁面上看到我們的帖子列表。 Routes切片提供了所有路由的列表,我們可以使用預先定義的輔助函數來過濾這些路由,例如
.Routes | filterFilePath "**/posts/*.md"顯示任何名為 posts 的資料夾中以.md結尾的所有文件.Routes | sortAsc "title"根據元資料欄位title對路由進行排序.Routes | limit 10僅取得前 10 條路線.Routes | offset 3跳過前三條路線.Routes | filter "title" "*Post"根據與模式*Post匹配的元資料欄位title進行過濾.Routes | filterFileName "*.md"取得所有以*.md結尾的文件.Routes | filterHref "/*"取得所有頂層路由.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10來組合以上一些內容接下來,我們希望對帖子使用與其他頁面不同的佈局。帖子應該在文字之前有一個圖像,因此我們要在帖子元資料中定義圖像 URL。因此,我們新增第二個模板,名為templates/post.html其中包含以下內容:
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
< img src = {{.image}} />
{{template "body" .}}
</ body >
</ html >我們將帖子元數據更改為
---
template: post.html
title: First Post
image: https://some-image.url
---
重新生成輸出應該會給我們的帖子上方提供一個漂亮的圖像。然而,我們的模板中又出現了重複的 HTML 程式碼。為了改進這一點,我們在routes和templates旁邊建立另一個資料夾,稱為partials 。在部分內部,我們建立一個名為head.html的文件
{{define "head"}}
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}我們將模板中的<head>...</head>替換為{{template "head" .}} ,如下所示
<!doctype html >
< html >
{{template "head" .}}
< body >
{{template "body" .}}
</ body >
</ html >現在我們將不同模板之間的程式碼複製減少到最低限度。我們可以使用這個partials目錄來儲存各種重複出現的元件,例如導覽列或頁尾。
請注意,我們實際上不需要使用本教程中使用的資料夾名稱來建立專案。這些資料夾名稱只是預設名稱,但可以使用相應的命令列參數進行更改(有關更多信息,請參閱tinystatic -help )。
這裡有一個完整的部落格範例。