Skip to content
るいラボ
原神ツール

Gatsby - 初心者がサイトを作る

Gatsby1 min read

初心者でも静的サイトを作りたい

  • 目標:gatsby-theme-emilia
  • SSG:Gatsby
  • デプロイ:Cloudflare Pages

著者の環境

  • windows10

著者の経験値

  • WordPressでブログ作成
  • Cloudflareのアカウント有
  • Git...なにそれおいしいの?

ローカル環境でサイトを作る

参考:Gatsbyの導入

各ソフトのインストール

Gitのインストール(starterのクローンに必要)
Git for Windows

Node.jsのインストール(LST版)
ダウンロード | Node.js

Gatsbyコマンドのインストール
コマンドプロンプトを起動して,下記を入力.

1npm install -g gatsby-cli

サイトの生成

参考:GitHub / starter emilia

1cd Documents
2mkdir gatsby
3cd gatsby

適当に作業用フォルダを作る.

1git clone https://github.com/LekoArts/gatsby-starter-portfolio-emilia project-name
2cd project-name
3npm install --legacy-peer-deps
4gatsby develop

git cloneで,スターターキットを複製.
npm installで,必要なモノをインストール.
gatsby developで開発用サーバーを起動.

1You can now view gatsby-starter-hello-world in the browser.
2http://localhost:8000/

上記が出たらlocalhost:8000へアクセスすると作ったサイトが見れる.

サイトの編集

今回使用したスターターであれば,ここここを見ながら,設定していけば,基本部分は完成します.

より深く変更を加えたい場合,Shadowingをすることで可能です.
ただし Shadowing は,より多くの学習と理解が必要になるので,最初はおすすめしない.

GitHubでリポジトリ作成

参考:Gitを触り始めてからGitHubにpushするまでの流れ
gitコマンドの詳細は,先人達が分かりやすく解説しているはずなので,各自調べてください.

Gitでローカルリポジトリ作成

1cd project-name
2git init
3git add .
4git commit

個人的につまづいたのは,Gitにユーザー名とメールを登録していなかったこと.

1git config --global user.name 'name'
2git config --global user.email '[email protected]'

再度git commit
するとvimエディタが起動するので,次のモノを順番に入力.

  1. iキー
  2. first commit入力
  3. escキー
  4. :wq入力
  5. Enterキー

これで初回のコミットが完了する.

GitHubでリモートリポジトリ作成

GitHubアカウントの作成
Github 公式

ログインすると,リポジトリを作れそうなボタンがあるので,そこから作成する.
作成したら,コマンドプロンプトに戻って,下記を実行.

1git remote add origin https://github.com/{GitHubユーザー名}/{リポジトリ名}.git
2git push -u origin head

git pushを実行したあと,認証を求められるので,いい感じに対応してください.
これが完了すれば,GitHubのリポジトリに反映されます.

Cloudflare Pagesにデプロイ

参考:Cloudflare Pagesを試してみたよ!

Cloudflareのアカウントがあり,GitHubにリポジトリを作成していれば,かなり簡単な工程.
・・・と思ってました.
Nodeのバージョン違いでエラーが出ました.

時間
初期化1分57秒
クローン4秒
ビルド47秒でエラー

エラーを回避する

参考ページ(英語)

1cd project-name
2node -v > .nvmrc

これでバージョン違いへの対応ファイルが生成される.

1git add .
2git commit -m 'nvmrcの追加'
3git push

GitHubへ反映させた後,もう一度Cloudflareへ戻って,デプロイ.

時間
初期化1分57秒
クローン4秒
ビルド1分51秒
デプロイ10秒

これで完了です.

Gatsby