🤩

【Gatsby×Netlify×Netlify cms】ラクしてカッコいいブログ作りたい人はこれを読んでください!!

4 min read

⚠️Attention!! この記事を読むのに向いている人

・とにかくブログを作ってみたい!
・カッコいいブログを作りたいけどHTML、CSSを一から書くのは面倒…😢
・Gatsby × Netlify × Netlify cmsでブログを作ってみたい!

概要

こちらのGatsbyのブログテンプレートを使ったブログを作成しました
備忘録も兼ねて、具体的な作成手順を書いていきます✍🏻

https://www.gatsbyjs.com/starters/papan01/gatsby-starter-papan01

事前準備

・Netlifのアカウントを作っておく
・Node.jsのインストール
npm install -g gatsby-cliを走らせてGatsbyを使えるようにする

(無くても困らないけどあったら良いもの)
・siteGATrackingID
 Google Analyticsを使えるようにする
ユニバーサル アナリティクス プロパティの作成を有効にするのが大事!

https://support.google.com/analytics/answer/10269537
・disqusShortname
Disqusに登録してShortnameを作る
・サイトのロゴ
・プロフィールの画像

ざっくり手順

  1. テンプレートを落とす
  2. configを編集する
  3. GitHubにプッシュする
  4. Netlifyと連携する
  5. Netliffy cmsを連携させる

1. テンプレートを落とす

$ gatsby new 【YOUR-PROJECT-NAME】 https://github.com/papan01/gatsby-starter-papan01
でテンプレートを落として来てローカル環境で動かせるようにします

2. configを編集する

/config/にあるsiteConfig.jsを編集します
具体的にはこんな感じで↓の日本語になっている所を編集していけばOKです👌🏻

 author: "作者名", // Site owner
 siteTitle: "サイト名", // Site title.  siteTitleShort: "GatsbyJS P01", 
  // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
  siteTitleAlt: "サイト名の別名",  // Alternative site title for SEO.
  siteLanguage: "en", // Site language.
  siteDescription:"サイトの紹介", 
  // Website description used for RSS feeds/meta description tag.
  siteLogo: "static/favicons/favicon.png", // Logo used for manifest.
  siteUrl: "Netlifyに設定するサイトのURL", 
  // Domain of your website without pathPrefix.
  pathPrefix: "/", // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
  siteRss: "サイトURL/rss.xml", // Path to the RSS file.
  siteFBAppID: "無いなら入力しなくてOK", // FB Application ID for using app insights
  siteGATrackingID: "無いなら入力しなくてOK", // Tracking code ID for google analytics.
  disqusShortname: "無いなら入力しなくてOK", // Disqus shortname.
  twitterUserName: "無いなら入力しなくてOK", // twitter creator for SEO
  datePublished: "サイト作成日", // for SEO
  copyrightYear: "サイト作成年", // for SEO

configに↑の他にGitHubとかメアドの情報を入力する所があるから記入します
記入しなくてもOKです👌🏻

/static/favicons/の中にlogoがあるので、自作のlogoを使いたい時は入れ替て下さい
/static/のKonfest.pngはプロフィール画像に使われるので、
自作のプロフィールアイコンを使いたい人は入れ替えましょう

gatsby developでビルドしてみます
この時
Error: ENOENT: no such file or directory, unlink /Users/****/ディレクトリ名/public/images/1.webp
エラーが出たら、/static/images/にある画像を適当なものに置き換えると解決します
こんな感じで

http://localhost:8000/からサイトの出来を確認してみましょう😉

3. GitHubにプッシュする

GitHubにサイト用のリポジトリを作ります
編集したconfigを保存して、作ったリポジトリにプッシュしましょう🤩

4. Netlifyと連携する

Netlifyと連携させて記事を公開してみましょう
ここから連携を行なっていきます

GitHubを選択します

先ほどGitHubにプッシュしたディレクトリを選択しましょう

次にビルドの設定をします
ビルドコマンドはgatsby developにします
ディレクトリはpublicにしておきます

Deploy siteをクリックしたら完了です

この時にサイトのURLをconfigに設定したものに変更しましょう
今はこの赤い下線部分がURLになっています

編集していきましょう
ここをクリックします

ここからURLを編集して下さい

URLの設定が終わったら記事を公開してみましょう
develop siteをクリックしたらデプロイが始まります🚀🚀

5. Netlify cmsを連携させる

次にNetlify cmsと連携させて記事を編集できるようにします✍🏻

http://localhost:8001/admin/からNetliffy cmsに行きます
Netlifyで設定したURLを入力しましょう

連携に成功したら記事を編集します
編集後にここをクリックするとGitHubにプッシュされます

NetlifyでDeploy siteすると公開されたサイトの内容が更新されます🚀🚀🚀
これでやるべきことは終了です🎉
お疲れ様でした🍵

ここまで読んでくださりありがとうございます😆
これで自分のブログができます!
一通り成功したら、他のGatsbyのブログテンプレートを使ってサイト作りに挑戦してみるのも楽しそうですね👍🏻