Gatsby.jsでブログを作成を試してみる

f:id:osushi_engineer:20201029062927p:plain

hisacomです。 今週はGatsbyという技術を用いて、ブログや静的サイトを短時間で作成するということに挑戦したので、その内容メモ記事になります。

以下のページを大いに参考にさせていただきました。 qiita.com

試してみた経緯ですが、そもそも直近の個人案件でブログ1つと静的サイト1つを作成する必要があり、何で作るかを思い悩んでいました。

  • デザインを作成してHTML打つほどこだわる必要はない
  • WordPressだと勉強にならないのでモチベーションが保てない

そこでReact製の静的サイトジェネレーターというのがあったのを思い出し、今回試してみようという訳です。

Gatsbyとは

最新のフロントエンド技術Reactベースの静的サイトジェネレーター(CMS:コンテンツ管理システムの一種)。高速閲覧できるサイトを生成できる。

静的サイトジェネレーターは閲覧時ではなく、ビルド時にHTML/CSSをあらかじめ生成しておくという特徴から、Amazon S3GitHub Pagesに置くことができる>サーバの利用や運用コストを下げることができる。

以下ブログ作成の手順

gatsby-cliのインストール

ターミナルで以下のコマンドを入力します。

$ yarn global add gatsby-cli

▼ブログ作成

こちらから好きなテンプレートを選択し、 gatsby new [ブログ名] [テンプレートのURL]でブログの作成を行います。

$ gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

自分の場合、以前gatsby-cliをインストールしたことがあり、バージョンアップしてくださいというエラーが出ましたが、ターミナルに表示されるコマンドを実行することで問題なくバージョンアップが出来ました。

▼ローカル確認

下記コマンドを入力し http://localhost:8000/ にアクセスするとローカルでを確認することができます。

$ cd my-blog
$ gatsby develop

f:id:osushi_engineer:20201029064327p:plain

▼記事の追加

ディレクトリ構造を確認すると、content/blogに新しいディレクトリと.mdファイルを置くことで記事が追加できそうなので、試しにおいてみます。 f:id:osushi_engineer:20201029064403p:plain  保存すると、ローカルが更新され記事が追加されていることを確認できました。 f:id:osushi_engineer:20201029064439p:plain  

今後、ビルドとデプロイ

Bild&deployで公開までの方法は、Github PagesやNetlifyで公開する手段があるようですが、今回はローカルでの確認まで。次回デプロイまで行ってみます。  

参考リンク

www.gatsbyjs.com

osushi-engineer.hatenablog.com