Gatsby.jsでブログを作成を試してみる
hisacomです。 今週はGatsbyという技術を用いて、ブログや静的サイトを短時間で作成するということに挑戦したので、その内容メモ記事になります。
以下のページを大いに参考にさせていただきました。 qiita.com
試してみた経緯ですが、そもそも直近の個人案件でブログ1つと静的サイト1つを作成する必要があり、何で作るかを思い悩んでいました。
- デザインを作成してHTML打つほどこだわる必要はない
- WordPressだと勉強にならないのでモチベーションが保てない
そこでReact製の静的サイトジェネレーターというのがあったのを思い出し、今回試してみようという訳です。
Gatsbyとは
最新のフロントエンド技術Reactベースの静的サイトジェネレーター(CMS:コンテンツ管理システムの一種)。高速閲覧できるサイトを生成できる。
静的サイトジェネレーターは閲覧時ではなく、ビルド時にHTML/CSSをあらかじめ生成しておくという特徴から、Amazon S3やGitHub 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
▼記事の追加
ディレクトリ構造を確認すると、content/blogに新しいディレクトリと.mdファイルを置くことで記事が追加できそうなので、試しにおいてみます。 保存すると、ローカルが更新され記事が追加されていることを確認できました。
今後、ビルドとデプロイ
Bild&deployで公開までの方法は、Github PagesやNetlifyで公開する手段があるようですが、今回はローカルでの確認まで。次回デプロイまで行ってみます。