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

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

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

別ページ作成
別ページを作成してみます。
src/pages内に下記の内容でtest.jsを作成します
import React from "react"
export default () => <div>テストページ</div>
src/pages /index.jsを下記の内容で編集します
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
コメントを書く