More than 3 years have passed since last update.

gatsby入門チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）

Last updated at 2020-09-07Posted at 2020-09-03

gatsbyの作業履歴

チュートリアル

今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/part-one/
ギャツビービルディングブロックというものを知ることができるようです。

Using Gatsby starters

前回、hello-worldサイトをコマンドで作った通り、以下コマンドでgatsbyサイトが作成できます。
gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]
リポジトリURLを省略すると以下がベースとなる。
https://github.com/gatsbyjs/gatsby-starter-default

Open up the code

VS Codeで作成したhello-worldのディレクトリを開きます。

hello-worldサイトを起動していない場合は起動しておきます。
cd hello-world(gatsbyを作成したディレクトリ)
gatsby develop

Familiarizing with Gatsby pages

Make changes to the “Hello World” homepage

１．hello-worldディレクトリのsrc/pagesディレクトリに移動しindex.jsを変更するとサイトの情報が更新されることを確認します。
元データ

修正

ホットローディング確認！
２．より分かりやすく変化を実感する
src/pages/index.jsを以下に書き換え

src/pages/index.js

import React from "react"

export default function Home() {
  return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
}

わかりやすい変化！！
３．もう少し変化
src/pages/index.jsを以下に書き換え

src/pages/index.js

import React from "react"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
    </div>
  );
}

４．イメージ追加

src/pages/index.js

import React from "react"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}

次はコンポーネントについてだが今日忙しかったから、超眠い。
今日ここまでです。

ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）

gatsbyの作業履歴

チュートリアル

Using Gatsby starters

Open up the code

Familiarizing with Gatsby pages

Make changes to the “Hello World” homepage

gatsby入門チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）