Gatsby.jsで簡単なブログを作ってみた

2020年11月02日

フロントエンド

Gatsby.jsで簡単なブログを作ってみたので紹介していこうと思います。

今回制作したブログのURLは以下です。Netlifyでデプロイして公開しています。

https://kokenote.netlify.app/threejs/

ブログについて

静的サイトジェネレーターの1つであるReactで作られたGatsby.jsを使って制作したブログ「kokenote」です。kokeblogで真面目に記事を書くというよりも自分用に簡単にメモするような感覚で記事を更新していく予定です。

なぜ制作したか

静的サイトジェネレーターを使ってブログを作ってみたいなと前から考えていました。前にHexoで制作しましたが、今時じゃない感がしていたので、VuePressかGatsby.jsで制作してみようと思い、その2つを比較し、制作していこうかと考えながら色々と調べました。調べていく中で公式のドキュメントにあるチュートリアルが分かりやすく、表示スピードも早いGatsby.jsがやりやすく魅力的だったのでGatsby.jsを使って制作することに決めました。

また、勉強していることをメモするときにGoogleドキュメントにまとめていたのですが、書きづらかったり、あとで見たときに見にくいなと感じていたので、メモしやすいものも作りたいというのもありました。

制作していく中で工夫したところ

初めてGstsby.jsを使ってのブログ制作だったのでデザイン面や様々な機能をつけるというよりは、ブログとしての最低限のmarkdawnで書いた記事を表示する機能を実装していくことを優先して制作しました。また、コンポーネントを使って共通のheaderやheadなどは使い回しできるようにして、今後もデザインや機能を実装するときに効率よく作業できるようにしました。現在はmarkdawnで書いた記事を表示するだけなので、記事が増えていくことも考え、カテゴリーページなども実装する予定です。

まとめ

Gatsby.jsで制作したブログであるkokenoteの紹介をしました。今はthree.jsの備忘録を書くのに使っていますが、今後も新しいことを学んだときなどに活用していければと思います。

Pocket

related

HTMLのtable要素

だいぶ前にフォームについてまとめましたがtableもなかなか使わずに忘れてしまっているので復習と備忘録を兼ねてまとめていきます。 tableの基本的な構造 いきなりですがtableの基本的な使い方をコ

フロントエンド

2020.10.14

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

JavaScriptのデータ型について

JavaScriptのオブジェクトについて勉強していくとデータ型について出てきたので一度ブログにまとめて整理していこうと思います。 データ型 データ型は大きく分けると、プリミティブ型(基本形)とオブジ

フロントエンド

2020.09.22

three.jsジオメトリについて

前回、three.jsで簡単なものを表示させる手順についての記事を書きましたが、今回はジオメトリに重点を置いてまとめていきます。実際に形を形成していくので結構楽しい部分かなと思います。 立方体 THR

フロントエンド

2020.11.08

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き