@tenjuu99/blog

静的なブログを作るのにどうして React を必要としてしまったんですか

setup

npm i @tenjuu99/blog

npx create-blog
npx server

http://localhost:8000 にアクセスできます

記事を書く

./src/pages/ 以下にマークダウンファイルを入稿します。

とりあえずなにも設定せずに、内容は空のままで構わないので src/pages/test.md を追加してみます。 src/pages/test.md を保存したら、 http://localhost:8000/test にアクセスして表示できていることを確認します。

次に、内容を記述します。
src/pages/test.md を次のような内容で保存します。

# 第一章 人情の碗

茶は薬用として始まり後飲料となる。シナにおいては八世紀に高雅な遊びの一つとして詩歌の域に達した。十五世紀に至り日本はこれを高めて一種の審美的宗教、すなわち茶道にまで進めた。茶道は日常生活の俗事の中に存する美しきものを崇拝することに基づく一種の儀式であって、純粋と調和、相互愛の神秘、社会秩序のローマン主義を諄々と教えるものでる。茶道の要義は「不完全なもの」を崇拝するにある。いわゆる人生というこの不可解なもののうちに、何か可能なものを成就しようとするやさしい企てであるから。

保存したら、 http://localhost:8000/test をリロードして表示を確認しましょう。

タイトルとURL

ファイル冒頭を --- でくくると変数を指定できます。

src/pages/test.md の冒頭に次のような変数を設定してみましょう。

---
title: 第一章 人情の碗
url: /the_book_of_tea/section_one
---

http://localhost:8000/test ではアクセスできず、 http://localhost:8000/the_book_of_tea/section_one でアクセスできるようになったとおもいます。

ここで定義した変数は、テンプレート内でも利用できます。
次のように書き換えてみます。

---
title: 第一章 人情の碗
url: /the_book_of_tea/section_one
---

# {{title}}

茶は薬用として始まり後飲料となる。シナにおいては八世紀に高雅な遊びの一つとして詩歌の域に達した。十五世紀に至り日本はこれを高めて一種の審美的宗教、すなわち茶道にまで進めた。茶道は日常生活の俗事の中に存する美しきものを崇拝することに基づく一種の儀式であって、純粋と調和、相互愛の神秘、社会秩序のローマン主義を諄々と教えるものでる。茶道の要義は「不完全なもの」を崇拝するにある。いわゆる人生というこの不可解なもののうちに、何か可能なものを成就しようとするやさしい企てであるから。

URLの変更は、変数による定義ではなく、ファイルを移動しても問題ありません。
src/pages/test.md を src/pages/the_book_of_tea/section_one.md としてファイルを移動すれば、変数定義がなくてもこのURLになります。

テンプレート

タイトルが重複して表示されて鬱陶しいので、テンプレートを編集します。

src/template/default.html を開き、h1 を削除しましょう。

    <article class="container">
-     <h1>{{TITLE}}</h1>

設定ファイル

サイト全体の名称がデフォルトのままでは味気ないので変えましょう。 blog.json を開いて、 site_name を変更します。

{
  "site_name": "茶の本",
  "url_base": "http://localhost:8000",
  "src_dir": "src",
  "dist_dir": "dist",
  "distribute_raw": "image",
  "helper": "index.js"
}

設定ファイルを変更したら、一旦 CTRL+c で npx server を停止して、もういちど npx server を実行します。 ヘッダーが「茶の本」になっていたら設定更新が完了です。