簡単なことからやっていくと早く理解できる。
場所とファイル
各ディレクトリに各ファイルをつくる。
ディレクトリ | 拡張子 |
---|---|
templates/ |
html |
content/ |
md |
予約ファイル名
templates/
予約ファイル名 | 役割 |
---|---|
index.html |
サイトのトップページ用テンプレート |
section.html |
各セクションの一覧ページ用テンプレート |
page.html |
各セクションの末端ページ用テンプレート |
content/
予約ファイル名 | 役割 |
---|---|
{section}/index.md |
単一ページ(page ) |
{section}/_index.md |
一覧ページ(section ) |
工程
- トップページをつくる
- 単一ページをつくる
- 一覧ページをつくる
- 単一ページをつくる(前,次リンク付)
これでindex
, page
, section
3種類のページ作成についてひととおり学べる。一般的なブログサイトを構築することができるはずだ。
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