🤩

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

2021/03/22に公開

Gatsby.js

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

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

概要

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

事前準備

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

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

・disqusShortname
Disqusに登録してShortnameを作る
・サイトのロゴ
・プロフィールの画像

ざっくり手順

テンプレートを落とす
configを編集する
GitHubにプッシュする
Netlifyと連携する
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をクリックしたら完了です