Ubuntu19.10にGatsby.jsをインストールして利用してみる

Ubuntu19.10にGatsby.jsをインストールして利用してみる

React.jsベースの静的サイトジェネレーター であるGatsby.js(ギャツビー)の簡単な利用手順です。インストールして、編集する手順まで記載。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1

インストール

ローカルインストールでインストールします

※npm ローカルインストールとグローバルインストールについてはこちら

今回はhello-worldテンプレートを利用する

※gatsbyのテンプレート一覧はこちら

起動してみる

ブラウザから http://localhost:8000 にアクセスすると「Hello World!」が表示される

ソース編集

ソースを編集して「Hello World!」の文言を変更する

src/pages内のindex.jsを下記のようにhtmlだけ編集する

編集すると表示が変更されます

別ページ作成

別ページを作成してみます。

src/pages内に下記の内容でtest.jsを作成します

src/pages /index.jsを下記の内容で編集します

ブラウザから http://localhost:8000 にアクセスし、リンクをクリックすると作成したtestページに遷移します

http://localhost:8000/testに遷移します