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

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

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

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

## gatbyインストール
npm i -D gatsby-cli

1 2	## gatbyインストール npm i -D gatsby-cli

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

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

npx gatsby new hello https://github.com/gatsbyjs/gatsby-starter-hello-world

1	npx gatsby new hello https://github.com/gatsbyjs/gatsby-starter-hello-world

起動してみる

## 移動
cd hello

## 起動
npm run develop

## 移動

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>

import React from "react"

export default () => <div>test<p>test</p></div>

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

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

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

import React from "react"

export default () => <div>テストページ</div>

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>

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に遷移します