ホーム>ASPソースコード>その他のカテゴリー
ダウンロード

小さな静的

logo.png

柔軟で使いやすい小さな静的 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参照してください)。

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

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて