簡単なことからやっていくと早く理解できる。
場所とファイル
各ディレクトリに各ファイルをつくる。
| ディレクトリ | 拡張子 |
|---|---|
templates/ |
html |
content/ |
md |
予約ファイル名
templates/
| 予約ファイル名 | 役割 |
|---|---|
index.html |
サイトのトップページ用テンプレート |
section.html |
各セクションの一覧ページ用テンプレート |
page.html |
各セクションの末端ページ用テンプレート |
content/
| 予約ファイル名 | 役割 |
|---|---|
{section}/index.md |
単一ページ（page） |
{section}/_index.md |
一覧ページ（section） |
工程
- トップページをつくる
- 単一ページをつくる
- 一覧ページをつくる
- 単一ページをつくる（前,次リンク付）
これでindex, page, section3種類のページ作成についてひととおり学べる。一般的なブログサイトを構築することができるはずだ。
1. トップページをつくる
index.htmlを追加する
すでにやった。以下を参考にする。
2. 単一ページをつくる
page.htmlを追加する{section}/index.mdを追加する
3. 一覧ページをつくる
{section}/section.htmlを追加する{section}/_index.mdを追加する
4. 単一ページをつくる（前,次リンク付）
/blog/section.htmlを追加するpage.htmlを追加するindex.mdを追加する
手順
実際に手を動かすときの作業リスト。だれが、どこで、なにをするか。
トップページをつくる
| No | 者 | 場所 | 仕事 |
|---|---|---|---|
| 1 | 人 | templates/index.html |
HTMLとteraでテンプレートを書く |
| 2 | 人 | / |
端末でzola serveする |
| 3 | zola | templates/index.html |
teraを解析する（toml,mdから変数を取得するなど） |
| 4 | zola | templates/index.html |
HTMLを作る |
| 5 | zola | - | ローカルHTTPサーバを起動する |
| 6 | 人 | ブラウザ | 指定されたURLhttp://127.0.0.1:1111にアクセスする |
| 7 | 人 | ブラウザ | サイトを確認する |
末端ページをつくる
| No | 者 | 場所 | 仕事 |
|---|---|---|---|
| 1 | 人 | content/about.md |
フロントマターでメタデータを書く |
| 2 | 人 | content/about.md |
Markdownで記事を書く |
| 3 | 人 | templates/page.html |
HTMLとteraでテンプレートを書く |
| 4 | 人 | / |
端末でzola serveする |
| 5 | zola | templates/page.html |
teraを解析する（toml,mdから変数を取得するなど） |
| 6 | zola | templates/page.html |
HTMLを作る |
| 7 | zola | - | ローカルHTTPサーバを起動する |
| 8 | 人 | ブラウザ | 指定されたURLhttp://127.0.0.1:1111/aboutにアクセスする |
| 9 | 人 | ブラウザ | サイトを確認する |
なお、aboutは任意の名前に置き換えてよい。例外はindex,_index。それら2つの名前は予約されている。別の名前にすること。
セクションページをつくる
| No | 者 | 場所 | 仕事 |
|---|---|---|---|
| 1 | 人 | content/blog/2021-08-01.md |
フロントマターでメタデータを書く |
| 2 | 人 | content/blog/2021-08-01.md |
Markdownで記事を書く |
| 3 | 人 | templates/blog/section.html |
HTMLとteraで一覧ページのテンプレートを書く |
| 4 | 人 | templates/blog/page.html |
HTMLとteraで記事ページのテンプレートを書く |
| 5 | 人 | / |
端末でzola serveする |
| 6 | zola | templates/**/*.html |
teraを解析する（toml,mdから変数を取得するなど） |
| 7 | zola | templates/**/*.html |
HTMLを作る |
| 8 | zola | - | ローカルHTTPサーバを起動する |
| 9 | 人 | ブラウザ | http://127.0.0.1:1111/blogにアクセスする |
| 10 | 人 | ブラウザ | 記事が一覧されていることを確認する |
| 11 | 人 | ブラウザ | http://127.0.0.1:1111/blog/2021-08-01にアクセスする |
| 12 | 人 | ブラウザ | 記事の内容が表示されていることを確認する |
なお、blog, 2021-08-01は任意の名前に置き換えてよい。例外はindex,_index。それら2つの名前は予約されている。別の名前にすること。
ポイント
ページをつくる
新しいページを追加したい。このとき、いくつかの書き方がある。たとえばサイトの説明をするaboutページをつくるなら以下。
| ディレクトリ | URL |
|---|---|
content/about.md |
{base_url}/about |
また、つぎのようにしても同じだ。
| ディレクトリ | URL |
|---|---|
content/about/index.md |
{base_url}/about |
zola buildしてpublic/配下をみるとわかる。どちらの作り方でもabout/index.htmlとして作られる。
セクションをつくる
一覧ページを追加したい。任意ディレクトリをつくり、その配下に_index.mdを作ればよい。
| ディレクトリ | URL | 種別 |
|---|---|---|
content/blog/_index.md |
{base_url}/blog |
section |
content/blog/2021-01-01.md |
{base_url}/blog/2021-01-01 |
page |
content/blog/2021-01-02.md |
{base_url}/blog/2021-01-02 |
page |
所感
以上。とりあえず単一ページをつくるところからはじめていく。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
- zola 0.14.0
$ uname -a Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux
