tinystaticダウンロード - tinystaticソースコードのダウンロード

tinystatic

その他のカテゴリー

JS helper functions; Dynamic URLs

ダウンロード

小さな静的

柔軟で使いやすい小さな静的 Web サイトジェネレーター。必要な Web サイト構造やブログ固有の概念がないため、柔軟です。標準の HTML サイトから始めて、徐々に tinystatic を導入できるので、使い方は簡単です。

tinystatic の概念は単純です。入力ディレクトリ内のすべてのファイルから、Web サーバーのパブリックディレクトリとして使用できるファイルを出力ディレクトリに作成します。 tinystatic が出力ファイルを生成する方法は、入力ファイルの拡張子によって異なります。Markdown は HTML に変換され、CSS、JS、および画像は単純にコピーされます。マークダウンファイルと HTML ファイルの場合、ファイルの先頭にメタデータを指定できます。このファイルのメタデータでテンプレートを指定し、別のディレクトリにテンプレートを提供することで、Go の HTML テンプレートエンジンを利用できます。ここでは典型的なブログ Web サイトの例を示します。クイックスタートガイドについては、以下を参照してください。

インストール

事前に構築されたバイナリ

オペレーティングシステム用の tinystatic バイナリをダウンロードします。

Linux
macOS

必要に応じて、バイナリを/usr/binなどの既存のディレクトリに配置するか、バイナリの親ディレクトリをパス変数に追加することにより、シェルパスにバイナリを追加します。

tinystatic をパスに追加した場合は、次のように呼び出すことができるはずです。

tinystatic -help

それ以外の場合は、呼び出すときに tinystatic バイナリへのパスを指定する必要があります。

/path/to/tinystatic -help

ソースからコンパイルする

事前に構築されたバイナリを使用したくない場合は、Tinystatic をコンパイルするために Golang コンパイラをインストールする必要があります。次に、次のコマンドを実行して tinystatic をインストールできます。

go install -u github.com/julvo/tinystatic

または、リポジトリのクローンを作成し、このリポジトリのルートディレクトリでgo installまたはgo build実行します。

クイックスタート

これは、単一の HTML ページから始めて tinystatic の機能を 1 つずつ紹介する、小さなブログを構築する 10 分間のチュートリアルです。

まず、 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

これで、出力ディレクトリで Web サーバーを実行できるようになりました。たとえば、Python の組み込みサーバーを使用して、 http://localhost:8000で Web サイトを開きます。

 cd output
python3 -m http.server

これまでのところ、tinystatic が行ったのは、 index.html routesからoutputにコピーすることだけでした。それほど役に立ちませんでしたが、しばらくお待ちください...

2 番目の HTML ファイル (例: about.htmlをroutesに追加しましょう。

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

tinystatic再度実行し、Web サーバーがまだ実行されている状態で、 http://localhost:8000/aboutに移動できるようになります。 tinystatic が次のように 1 つのindex.htmlをaboutフォルダーを作成したため、このルートには.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 スケルトンは 1 か所に統合されました。

先ほど説明したように、ファイルの先頭にあるメタデータにテンプレート名を指定することで、コンテンツをレンダリングするテンプレートを指定できます。他のテンプレート (以下を参照) を含めたり、Go のテンプレートパイプラインを使用したりすることもできます。レンダリング中に、ファイルの先頭で定義されたメタデータ、フィールドRoute.Href 、 Route.FilePath 、およびRoute.Metaを持つ構造体Routeにアクセスできます。これもファイルの先頭で定義されたメタデータのマップです。さらに、すべてのルートのスライス (Go を初めて使用する人のための配列と考えてください) であるRoutesにアクセスできます。これについては、後ほど詳しく説明します。

このメタデータを 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 >

Web サイトを再生成すると、ブラウザーにはインデックスと About ページに異なるページタイトルが表示されるはずです。

次に、ルートフォルダーにいくつかのブログ投稿を作成しましょう。

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

これらの.mdファイル内にマークダウンを配置し、 routes/index.htmlおよびroutes/about.htmlでメタデータを指定した方法と同様に、テンプレートをdefault.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にアクセスできるようになります。マークダウンは HTML に変換され、 bodyというテンプレート内に配置され、 templates/default.htmlの{{template "body" .}}プレースホルダーにレンダリングされます。これが.htmlファイルとどのように異なるかに注意してください。.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 | limit 10
.Routes | offset 3最初の 3 つのルートをスキップするには、 .Routes | offset 3
.Routes | filter "title" "*Post"パターンに一致するメタデータフィールドのtitleに基づいてフィルタリングします*Post
.Routes | filterFileName "*.md" *.mdで終わるすべてのファイルを取得します
.Routes | filterHref "/*"すべてのトップレベルのルートを取得します
.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10上記のいくつかを組み合わせるには.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10

次に、投稿に他のページとは異なるレイアウトを使用したいと思います。投稿にはテキストの前に画像が必要です。そのため、投稿のメタデータで画像の URL を定義します。したがって、次の内容を含むtemplates/post.htmlという 2 番目のテンプレートを追加します。

 <!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参照してください)。

ブログの完全な例はここにあります。

拡大する

追加情報

バージョン JS helper functions; Dynamic URLs
タイプその他のカテゴリー
更新時間 2025-01-13
サイズ 41.39KB
から Github

tinystatic

小さな静的

インストール

事前に構築されたバイナリ

ソースからコンパイルする

クイックスタート

ProEventos App

catalogonline

MichaelBrandonMorris.KingsportMillSafetyTraining

itransition hypnofrog

MVC_CRUD_With_Translator

marco exceptions core

chat.petals.dev

GPT Prompt Templates

GPTyped

ProEventos App

catalogonline

MichaelBrandonMorris.KingsportMillSafetyTraining

waymo open dataset

wp functions

slugify