nikkiという日記を書くためのWebサイトを作った
Gatsby Starter: Minimal Blogを用いて個人的な日記サイトを作った
自分自身の日記をwebに載っけてみようと思い、作った。
日記サイト自体はGatsbyで構築しようと前々から考えており、良い感じのテンプレートがなければいっそ自作テンプレートを作ってみようか、などという淡いチャレンジ精神は、下記のテンプレートを見つけて消えた。
ミニマルなデザインだが、必要なものはちゃんとある。そんなデザインに好感を持てた。ダークモードに切り替えられるのも良いポイントだ。
こんな良い感じのテンプレートがあるなら、これでいいじゃないか。とすぐに考え直した。テンプレートを自作する気はきれいに無くなってしまっていた。
早速下記のコマンドを実行して構築を初めた。
gatsby new project-name https://github.com/LekoArts/gatsby-starter-minimal-blog
構築自体はさすがのGatsby、特に詰まるようなポイントは ほとんど なく、すぐにコンテンツ作成の段階に入れた。
が、一応この ほとんど という部分についてだけ、一応このポストの中に書いておこうと思う。
いつもながらの備忘録というわけである。
まずこちらのテンプレートだが、src自体はすでにGatsby側にpublishしており、gatsby new コマンドを実行して生成されたソース内には含まれていない。
実際のソースコードはこちらになる。
Heroテキストをカスタマイズする方法
どれも上に貼ったリポジトリ内に書いてあることだが、一応こちらにも書き記しておく。
まずHeroテキストをカスタマイズする場合は下記のようにして hero.mdx に書いていく。
mkdir -p src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx touch src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx # hero.mdx に書いていく
このファイルを用意することで、hero.mdx内の記述をHeroテキストとして表示するように切り替わる
トップページ下部にある "Projects"内の内容を変更する方法
上の hero.mdx 同様、下記のファイルを作成・記述することで内容を上書きすることが可能。
touch src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx
サイトのタイトルを変更する
サイトのタイトルを変更する場合は gatsby-config.jsを編集する。
siteTitle という項目を追加することで、こちらで設定したタイトルを表示するようになる。
diff --git a/gatsby-config.js b/gatsby-config.js index 8eee87a..cc0085b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -4,7 +4,8 @@ require(`dotenv`).config({ module.exports = { siteMetadata: { - siteTitleAlt: `Minimal Blog - Gatsby Theme`, + siteTitle: `Nikki`, + siteTitleAlt: `Yuki Shindo - Nikki`, }, plugins: [ {
その他にも description をはじめ、変更する箇所はいくつかあるが、下記の箇所にまとまっていることに気づいたので、貼っておく
https://www.npmjs.com/package/@lekoarts/gatsby-theme-minimal-blog#additional-configuration
ここに書かれている内容を gatsby-config.js に書いていけば設定自体はOKそうだった。
このような手順を行った上で、さらにはfaviconなどを自身のものに切り替えて日記サイトを作った。
