【gatsby.js】gatsbyで静的ブログ作成

目次

こんにちはKOです。

そろそろ自分のサイト作りたいと思っていたいので
気になっていたGatsbyを使ってみました!

gatsbyをインストールしてブラウザに表示

・まずgatsbyをインストールします。

・インストールできたかを確認

gatsby -hで動作確認しても下記のようにエラーが出ました。。

以下の二点を試すとうまくいきました。
エラーにかかった人は是非。

gatsby new (サイト名) (テーマ)を入力してブログを作成します。
サイト名に関しては、好きな名前で結構です 。
テーマに関しては、gatsby公式が専用のスターターを準備してくれていますので、好きなスターターを選択してそのリンクをコピーして記述します。

以下スターターのリンクです。
https://www.gatsbyjs.com/starters/

・作成したブログのディレクトリに移動してローカルで起動!

そうするとlocalhost:8000で作成したブログが確認できます。

ブログをGitHubにプッシュ

作成したブログをホスティングして公開してくれるサービスNetlifyを使うために、
まずはGitHubにリポジトリを作ってプッシュします。

Netlifyでホスティング

無料でホスティングしてくれるサービスNetlify
[https://www.netlify.com/]
アカウントを登録してnew site from gitをクリック

githubを選択します。

デプロイしたいリポジトリを選択します。

Build Command の項目は自動的に gatsby build となっていますので、
そのままDeploy Siteボタンを押します。

これでデプロイ完了です。

この場合だと
https://tamakipedia.netlify.app/
こちらにアクセスすると自分のブログが確認できるようになります。

おしまい

おわりに

今回調べていてよく分からなかった単語たちを解説していきます。

github CLI

npm config delete prefix

  • ここでいうprefixとはnpmのグローバルパッケージのありかを教えてくれるパスのことです。npm config listでグローバルパッケージのインストール情報を確認してみましょう。

上記のようにグローバルパッケージのパスが記載されています。
今回はパスを通すためにdelete prefixして、set prefix /usr/local し直しました。
get prefixで現在のprefixを確認することもできます。

以上です。

今後、pv数の確認したり、reactでレイアウトをガッツリ変更したりして楽しんでみようと思います。
 

乞うご期待。

Gatsby公式
https://www.gatsbyjs.com/#gatsby-is-fast

Gatsby Starters
https://www.gatsbyjs.com/starters/

Back to Top