【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

2020年10月29日 04:41

ちょこっとプログラミングを知っているので、自作のブログを作りたい。ここ数年流行っている爆速Gatsbyでブログを作りたい。できればレイアウトはWordPressちっくなモノが良い。そんなニーズにお応えするために、noteを書きました。

このnoteでは、Gatsbyブログを作り込んで蓄積したノウハウ全てを纏めております。

以下、目次です。

1. このチュートリアルを読んで作る事のできるブログ

はじめに完成品をお見せします。このチュートリアルを最後まで進めていただければ、以下のようなブログを作る事ができます。

2. 対象とする読者

このチュートリアルは、全くプログラミングを触った事がない、という方には難しい内容だと思います。最後までチュートリアルを終えるには、以下のポイントについて、何らかの経験がある事が望ましいです。

・基礎的なHTML, CSS, JavaScript
・ウェブサイト作成、ブログ作成
・ドメイン設定
・Macターミナルの基本操作（＊）
・React, GraphQLの経験があるとbetter
・Scssの経験があるとbetter
・公式のGatsby tutorialを終えていると尚better
＊このチュートリアルでは、Macで開発を進める事を想定しております。

とは言え、何よりも大事なのはモチベーションだと思いますので、「爆速Gatsbyブログを作りたい！必要なんだ！」という欲求があれば、どんな方でも最後まで進める事ができると思います。

では、早速はじめていきましょう。

3. 環境設定

テンプレートの選定
Gatsbyでは、用途に合わせて様々なテンプレートが用意されてます。その中から、このチュートリアルでは、gatsby-v2-starter-lumenを使用していきます。

2020年10月現在では、459ものテンプレートが準備されています。このチュートリアルに書かれている内容は他のテンプレートにも応用できますので、興味のある方は、他のテンプレートでもお試しください。

ドメインの取得
ドメインを取得しなくても、このチュートリアルで役に立つ内容はあるかと思いますが、できれば独自ドメインを持っておくと、Googleアドセンスなどの設定がスムーズにいくと思います。現時点では独自ドメインは必要ない、という方は、次のセクション「Gatsbyの開発環境をローカルで構築」に進んでくださいね。

では、ドメインを取得される方は、各々慣れているサイトでドメインを取得してください。このチュートリアルでは、GoDaddyでgatsbytutorial.deというドメインを取得しました。

3.1. Gatsbyの開発環境をローカルで構築

続いて、ローカルで開発環境の設定を行います。このチュートリアルでは、読者がMacで開発を行っている、という前提で進めていきますね。

公式チュートリアルにあるとおり、先ずはローカルで開発環境をセットアップします。
Macのターミナルを開き、homeディレクトリ直下で、
brew -v
xcode-select --version
node --version
npm --version
git --version
を1行づつ実行していきます。

kinnikumegane@Kinnikus-MacBook-Air ~ %

brew -v #homebrewがインストールされている事を確認。  
xcode-select --version #xcodeがインストールされている事を確認。
node --version #nodeがインストールされている事を確認。
npm --version #npmがインストールされている事を確認。
git --version #gitがインストールされている事を確認。

"#...."はコメントです。
各々のパッケージがインストールされていれば、パッケージ名とバージョン情報が表示されます。もしも、インストールされていない場合、各々以下の要領でインストールしましょう。

homebrewがインストールされていない場合は、brewのページで紹介されている通り、以下をターミナルに貼り付けて実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

xcode-selectがインストールされていない場合は、以下をターミナルに貼り付けて実行します。

xcode-select --install

nodeがインストールされていなければ、brewを使ってインストールします。

brew install node

npmはnodeと一緒にインストールされていますが、npm単体でアップデートしてあげる必要があります。ですので、以下をターミナルに貼り付けて実行します。

npm install npm@latest -g

gitがインストールされていなければ、brewでインストールします。gitをインストールする方法は他にもありますので、読者の方が慣れている方法でインストールすると良いと思います。

brew install git
git --version
git config --global user.name "Emma Paris" $ git config --global user.email "eparis@atlassian.com"

gitがインストールされたら、githubのusernameとemailを設定します。githubのusernameは、githubのページの右上のアイコンをクリックすれば表示されます。

続いて、gatsby cli(Command Line Interface)をインストールします。

npm install -g gatsby-cli

これで、ターミナル上で、gatsbyのコマンドが使えるようになりました。
それでは、先ほど選定したテンプレートをローカルにダウンロードしましょう。

このチュートリアルでは、Macのhomeディレクトリ直下にプロジェクトを作っていきます。プロジェクト名はtutorialとします。

kinnikumegane@Kinnikus-MacBook-Air ~ %
gatsby new tutorial https://github.com/GatsbyCentral/gatsby-v2-starter-lumen

ここで、tutorialというフォルダ名を指定してあげる事で、homeディレクトリ直下にtutorialというフォルダが作成され、そこにテンプレートがダウンロードされます。

インストールが終わったら、ターミナルでtutorialでフォルダへ移動し、gatsby developを実行して開発環境を立ち上げましょう。

kinnikumegane@Kinnikus-MacBook-Air ~ % cd tutorial
kinnikumegane@Kinnikus-MacBook-Air tutorial % gatsby develop

gatsby developを実行すると、ターミナルには以下の通りに表示されているはずです。

You can now view gatsby-v2-starter-lumen in the browser.
⠀
 http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
 http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 7.251s

これで、Chrome等のブラウザを立ち上げ、http://localhost:8000/にアクセスしてみると、先ほど選定したテンプレートが表示されているはずです。

これでローカルでの開発環境の構築が終わりました。幸先良いですね。

3.2. 本番環境の構築

続いて、本番環境の構築を行います。GithubとNetlifyを使いますので、次のステップに進む前に、それぞれのサイトでアカウントの登録を済ませてください。

それでは、先ずGithubでリポジトリを作成します。Githubのページで、右上の➕ボタンから、New repositoryを選択し、必要事項を記載します。このタイミングでは、README fileは作らないでくださいね。（README fileを作ってしまうと、テンプレートのREADMEとconflictを起こし、githubへのアップロードがスムーズにいかない事があります。）

続いてMacのターミナルへ戻り、開発環境で使用しているコードをGithubのrepositoryへpushします。

kinnikumegane@Kinnikus-MacBook-Air tutorial % git init
kinnikumegane@Kinnikus-MacBook-Air tutorial % git add .
kinnikumegane@Kinnikus-MacBook-Air tutorial % git commit -m "first commit"
kinnikumegane@Kinnikus-MacBook-Air tutorial % git remote add origin https://github.com/kinnikumegane/tutorial
kinnikumegane@Kinnikus-MacBook-Air tutorial % git push -u origin master

これで、開発環境で使っているコードがgithubへpushされました。

続いて、Netlifyでの設定です。Netlify上で新しくサイトを作成し、そのサイトへgithubのrepositoryを紐づける事で、本番環境へのディプロイを行います。

Netlifyのサイトにて、“New site from Git”ボタンを押します。

続いてGithubボタンを押し、Githubのアカウントと紐付けます。

ここで、Github上でのリポジトリ一覧が表示されますので、先ほど作成した「tutorial」リポジトリを選択します。

そして、「Deploy site」ボタンを押します。

すると、Netlifyがサイトの設定を開始し、数秒後に”Your site is deployed”というメッセージが表示されます。

続いて先ほど取得したドメインをNetlifyのサイトと紐付けます。

Netlifyのページで、「Set up a custom domain」ボタンを押します。そして、Custom domainに先ほど取得したドメインを入力し、「Verify」ボタンを押します。

例えば「.de domains can't be registered through Netlify」というメッセージや、「xxxx already has an owner. Is it you?」というメッセージが表示される事がありますが、問題ありません。それらの質問に対して、「Yes, add domain」ボタンを押します。