NEW ARTICLE
Oracle Database ユーザーにロールを付与する
  1. HOME
  2. ubuntu
  3. Ubuntu19.10にGatsby.jsをインストールして利用してみる

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

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