Gatsby.jsで↓のようなブログを作ってみました。
ということで本記事では、 Gatsby.js×Netlify CMSで自作ブログを作ってみた感想とか、カスタマイズした部分、使用したテンプレートなどについて書きます。
公式のドキュメントが最強
公式のドキュメントがめちゃくちゃ充実しているため、ドキュメント+サンプルコードがあれば、必要な機能はだいたい実装できちゃいます。
必要なことは全部ドキュメントに書いてあります。
チュートリアルもちゃんとあって、プロジェクトの立ち上げ→プラグインの入れ方・カスタマイズ方法→Graphqlでデータを取得まで、Gatsby.jsでサイトを作る上で最低限のことは全部学べます！
公式バンザイ！！！
使用したテンプレート＆カスタマイズしたこと
使用したテンプレートはこれ
https://www.gatsbyjs.org/starters/netlify-templates/gatsby-starter-netlify-cms/
デモサイトはこんな感じです。
https://gatsby-netlify-cms.netlify.app/
このテンプレートを使っておけば、ブログを運営するのに最低限の機能はそろいます。
- ブログ機能（CMS）
- タグ機能
- Netlifyでのホスティング
僕が追加でカスタマイズした箇所は、
- SNSシェア機能
- Navbarのリンク張り変え
- 検索バーを設置
- 全体的なデザインをちょっと変更
- 日本語対応
- Google Analytics追加
- Youtube, Twitterなどのコンポーネントの埋め込み
- 数式をLatex風味で出力
- 独自ドメイン（Netlifyでボタンをポチポチするだけ）
ぐらいですね。まあ、色々手間取ったので、今の状態に持っていくまでに2,3日かかりましたが、まあ満足してます！まだまだ全体的にデザインがアレだったり、ページネーションがなかったりと、不満なことはあるので、気が向いたときにカスタマイズしようかなと。
Gatsby.jsを使うメリット
- 全部gitで管理できること。自分の文章をリライトするとき、github上でセルフレビューしながらやったらめちゃめちゃライティングの力つきそうですよね。コミットごとに、自分の人生の歴史を刻んでいる感じがして、中二病な僕にとってはすごい楽しいです
- 超早い
- カスタマイズ性
Gatsby.jsを使うデメリット
Gatsby.jsのメリットとデメリットは表裏一体です。すなわち、
- 動的にコンテンツを作成できないこと。まあカスタマイズすれば色々やれるんでしょうが、めんどいっすよね
- コメント機能、サイト内検索、などを実装するのが面倒
- 記事をアップロードしてから公開されるまでにタイムラグがあること
- メンテナンスしないといけないこと
自作ブログはいいぞ。ポートフォリオに最適では？
特に未経験から転職・インターンを考えている人は、ポートフォリオを作ると思うのですが、Gatsby.jsでブログを作るのも、すごいよい練習になるのでは？と思いましたね。
自作ブログ自体もポートフォリオになりますし、その自分のブログ上で、学んだことをアウトプットしたり、「制作物一覧」みたいなページを作って、そこに自分の作ったアプリを載せるのもアリですよね。
特にフロントエンドを軸に学習している人にとっては、Reactとか、Graphql、Netlifyなんかは頻出のトピックですし、アピールになりそうですね！