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

React.jsベースの静的サイトジェネレーター であるGatsby.js(ギャツビー)の簡単な利用手順です。インストールして、編集する手順まで記載。
環境
- OS ubuntu19.10
- node v12.13.0
- npm 6.12.1
インストール
ローカルインストールでインストールします
※npm ローカルインストールとグローバルインストールについてはこちら
1 2 |
## gatbyインストール npm i -D gatsby-cli |
今回はhello-worldテンプレートを利用する
※gatsbyのテンプレート一覧はこちら
1 |
npx gatsby new hello https://github.com/gatsbyjs/gatsby-starter-hello-world |
起動してみる
1 2 3 4 5 |
## 移動 cd hello ## 起動 npm run develop |
ブラウザから http://localhost:8000 にアクセスすると「Hello World!」が表示される

ソース編集
ソースを編集して「Hello World!」の文言を変更する
src/pages内のindex.jsを下記のようにhtmlだけ編集する
1 2 3 |
import React from "react" export default () => <div>test<p>test</p></div> |
編集すると表示が変更されます

別ページ作成
別ページを作成してみます。
src/pages内に下記の内容でtest.jsを作成します
1 2 3 |
import React from "react" export default () => <div>テストページ</div> |
src/pages /index.jsを下記の内容で編集します
1 2 3 4 5 6 7 |
import React from "react" import {Link} from "@reach/router" export default () => <div> <Link to="/test">testへリンク</Link> </div> |
ブラウザから http://localhost:8000 にアクセスし、リンクをクリックすると作成したtestページに遷移します

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

-
前の記事
OneClickCSSを利用してみる 2019.12.30
-
次の記事
Nuxt.js titleタグを各ページごとに「サイト名 + 任意の文字列」に設定 2020.01.01
コメントを書く