見出し画像

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

めがね

ちょこっとプログラミングを知っているので、自作のブログを作りたい。ここ数年流行っている爆速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を使用していきます。

画像1

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のページの右上のアイコンをクリックすれば表示されます。

画像2

続いて、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

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

3.2. 本番環境の構築

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

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

画像4

画像5

続いて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”ボタンを押します。

画像6

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

画像7

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

画像8

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

画像9

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

画像10

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

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

画像11

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

画像12

次のページで、ドメイン名の横に「Checking DNS configuration」というメッセージが表示されています。このメッセージをクリックすると、ALIASを使用してのドメイン設定方法、そして、その代替策としてA recordを使用してのドメイン設定方法が表示されます。

画像13

画像14

このチュートリアルではA recordを使いますので、表示されているA record (xxx.xxx.xxx.xxx)をメモしてください。

続いて、GoDaddyのページにて、取得したドメインのDNS設定を行います。

該当するドメインのDNS設定画面で、A recordを追加し、Nameは@として、Valueには先ほどのメッセージで表示されたアドレス(xxx.xxx.xxx.xxx)を設定します。

画像16

続いて、CNAME recordを一つ作り、Nameはwwwとし、Valueには、Netlifyにて先ほど作ったサイトに割り当てられているアドレスを設定します。例えば、nifty-murdock-dab9c2.netlify.comというようなユニークなアドレスになっているはずです。

画像16

A recordの設定、およびCNAMEの設定で、各々TTL時間を設定できるので、600秒としておきましょう。

ここで、10分待ちます。
10分後、Netlify上で、ドメイン名が緑色で表示されている事を確認できるはずです。

画像17

そして、Netlifyが便利なところは、https化を無料で、そして自動で実施してくれるところです。これは嬉しいですよね。

先ほどの状態からさらに数分待つと、Netlify上でHTTPS化が完了した、というメッセージが表示されます。

画像18

これで、GoDaddyで取得したドメインにアクセスすると、選定したテンプレートと全く同じものが表示されているはずです。

画像19

以上で、本番環境の構築は完了しました。

こんな感じで、それぞれのプロセスを説明する際に、画像を使いながら進めていきますね。

次は、Google AnalyticsをGatsbyブログに導入します。

この続きをみるには

この続き: 104,126文字 / 画像132枚

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

めがね

980円

期間限定
\ PayPay支払いすると抽選でお得に /

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!