LoginSignup
1
2

More than 3 years have passed since last update.

静的サイトジェネレーター Gatsby.js 入門

Posted at

Gatsby.js入門

第1回は、Gatsby.jsのインストールの仕方について書いていこうと思います

Gatsby.jsを利用するための準備

開発環境の用意
・Node.js(nvm)
・yarn
・git

のインストールが必要です
インストールの仕方については、次の記事を参照してください

Gatsby CLIをインストールする

yarn global add gatsby-cli
と入力して、Gatsby.jsをインストールしていきます。

スターターをダウンロードしてみる

gatsby new
と入力して、サイトを構築していきます。

入力すると、プロジェクト名と使用するスターターを聞いてくるので、自分にあったプロジェクト名とスターターを選んであげましょう。

※スターターについては、https://www.gatsbyjs.org/starters/?v=2
を参照してみてください

ダウンロードできたら、cd プロジェクト名でプロジェクトフォルダに移動し、gatsby developで開発サーバーを起動してみます。

開発サーバーが起動したら、URLからページに飛んでページの表示を確認してみましょう!

サイトを公開する

gatsby buildと入力するとpublic/フォルダにサイトのデータができあがります。
これを公開すればサイトの公開は完了です。

※ちなみにビルドしたサイトの表示を確認する場合、gatsby serveと入力するば、ビルドしたサイトを確認することが可能です。

参考文献:Webサイト高速化のための静的サイトジェネレーター活用入門 GatsbyJSで実現する高速&実用的なサイト構築

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2