概要
子供の夏休みの宿題である「一人一研究」という自由研究のテーマなんだが、何をやっていいかわからないと言ってたのでホームページでも作ってみたらと提案した。
Netlify CMSを使うと高品質なサイトが3分間ハッキングでできるのでこれはもってこいの題材かなと思い勧めてみて採用に至った。
なんせ半分やる気がないので「爆速」でできることが重要なのである。
サイト構築
Hugoを使ってNetlify CMSを実装するには自前でHugoサイトを作成してカスタマイズする方法とNetlify CMSの提供するテンプレートを使う方法がある。
前者のほうが細かいカスタマイズできるのだけどもその分手間がかかる。繰り返すが「爆速」を重要視するので後者の方法を選ぶ。
その作り方についてはart_acoさんの記事「敢えて NetlifyCMS を試そうではないか」でスクリーンショットつきで詳細に解説してあるのでそちらを参考にしていただきたい。
今回は子供とこちらの記事「Netlify CMSを試してみた」を見ながら作った。
成果物の完成度は高いのだがわけのわからないコーヒーショップができてしまう。
なのでそこはちょこちょこ手直しをしてそれっぽく仕上げた。
子供の完成品についてはお見せすることはできないがせっかくカスタマイズした中で少し知見を得たので自分でもやってみた(笑
仮想の店舗サイトを作る手順
今回「お花屋さん」という仮想の店舗サイトを作ることにした。ECサイトではなく単にお店紹介のサイトだ。
なるべく元の素材を活かすためにレイアウト構成は踏襲するようにし日本語化と画像・文章の差し替えをメインに行った。
完成品のスクリーンショット
まず完成品からお見せする。
ホーム(トップページ)
「取扱商品」ページ
元のコンテンツ名はProduct
「このサイトについて」ページ
元のコンテンツ名はValue
「ブログ」ページ
元のコンテンツ名はPost
修正箇所
修正する場合、コンテンツはウェブの管理画面から変更できるのだが、デザインはソースをいじる必要がある。
そのため今回はコンテンツ・デザインともソースから編集し、ウェブの管理画面は使わなかった。
Hugoの場合デザインはlayoutsディレクトリ、コンテンツはcontentsディレクトリ以下に配備される
修正したファイル(漏れがあるだろうし適当かも。なので参考程度にしてほしい)
- config.toml
- これは特に触らなくてもいいかも
- site/config.toml
- メタ情報とか言語設定
- site/layouts/index.html
- トップページの日本語化 (1)
- site/layouts/_default/list.html
- ブログページの画像と日本語化
- site/layouts/_default/li.html
- トップページの日本語化 (2)
- ブログページの日本語化
- site/layouts/partials/head.html
- メタ情報(ogp)
- site/layouts/partials/2-up.html
- トップページの日本語化 (3)
- site/layouts/partials/blog.html
- トップページの日本語化 (4)
- ブログページの日本語化
- site/layouts/partials/contact-form.html
- お問合せフォームの日本語化
- site/layouts/partials/text-and-image.html
- トップページの画像 (5)
- site/layouts/post/single.html
- ブログ本文ページの日本語化
- site/content/_index.md
- トップページの画像と日本語化(対象箇所が多すぎて省略)
- site/content/values/_index.md
- このサイトについての画像と日本語化
- site/content/post/_index.md
- トップページのブログのタイトルがPostsになっているので日本語化 (6)
- site/content/post/
- ブログの画像と日本語化
- site/content/products/_index.md
- 取扱商品の画像と日本語化
- site/content/contact/_index.md
- お問合せの日本語化
- site/static/img/logo.svg (7)
- ロゴ
- 一番時間がかかった(笑
- site/content/_index.md
- トップページの画像と日本語化(対象箇所が多すぎて省略)
site/content/_index.mdが一番修正箇所が多いのだけどもその他のところは赤字で付番している下図を参考にしてほしい。
トップページ以外の訂正箇所のスクリーンショットを掲載するのは力尽きたのでやめる。
残念なお知らせ
作っている最中からうすうす気づいていたのだが、ローカルで開発サーバを起動して表示される画面とNetlifyにデプロイした画面でデザインの差異が出ている。css絡みだとは思うが深追いはやめた。なんせ「爆速」で作ることが大事だから。
最後に
完全に日本語化するにはまあまあ面倒くさい。
ウェブ管理画面だけで完結しないところが特にそう。
以下にデザインの崩れたデモサイトとソースを載せておく。
まだ間に合う夏休みの宿題に是非(笑