Gatsby - 初心者がサイトを作る
— Gatsby — 1 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
サイトの生成
1cd Documents2mkdir gatsby3cd gatsby
適当に作業用フォルダを作る.
1git clone https://github.com/LekoArts/gatsby-starter-portfolio-emilia project-name2cd project-name3npm install --legacy-peer-deps4gatsby 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-name2git init3git add .4git commit
個人的につまづいたのは,Gitにユーザー名とメールを登録していなかったこと.
1git config --global user.name 'name'2git config --global user.email '[email protected]'
再度git commit
するとvimエディタが起動するので,次のモノを順番に入力.
i
キーfirst commit
入力esc
キー:wq
入力Enter
キー
これで初回のコミットが完了する.
GitHubでリモートリポジトリ作成
GitHubアカウントの作成
Github 公式
ログインすると,リポジトリを作れそうなボタンがあるので,そこから作成する.
作成したら,コマンドプロンプトに戻って,下記を実行.
1git remote add origin https://github.com/{GitHubユーザー名}/{リポジトリ名}.git2git push -u origin head
git push
を実行したあと,認証を求められるので,いい感じに対応してください.
これが完了すれば,GitHubのリポジトリに反映されます.
Cloudflare Pagesにデプロイ
Cloudflareのアカウントがあり,GitHubにリポジトリを作成していれば,かなり簡単な工程.
・・・と思ってました.
Nodeのバージョン違いでエラーが出ました.
時間 | |
---|---|
初期化 | 1分57秒 |
クローン | 4秒 |
ビルド | 47秒でエラー |
エラーを回避する
1cd project-name2node -v > .nvmrc
これでバージョン違いへの対応ファイルが生成される.
1git add .2git commit -m 'nvmrcの追加'3git push
GitHubへ反映させた後,もう一度Cloudflareへ戻って,デプロイ.
時間 | |
---|---|
初期化 | 1分57秒 |
クローン | 4秒 |
ビルド | 1分51秒 |
デプロイ | 10秒 |
これで完了です.
— Gatsby —