Zenn
Closed28

Gatsbyのテンプレートを使ってサイトを作ってみる🔧

Gatsby.js
Netlify
初心者
netlifycms
ChiYoChiYo

【やりたいこと】

・Gatsbyの好きなテンプレートを使って、サイトを作る
・好きなマンガ、アニメを紹介できるようにする
・一通り実装できたら、styleをいじってサイトの見た目を変えてみる

ChiYoChiYo

前回のチャレンジで、テンプレートがある所に後からモジュールを突っ込んでも上手く動かないことが分かった
（上手くやる方法があるかもしれないけど）
今回はとにかく下手なことはせずに、まずは忠実に実装してみる

そのあといじれそうな所をいじってみよう👍🏻

ChiYoChiYo

凄い！！
前回のチャレンジで色々頑張ったから、どのファイルにどういう事が書いてあるか分かるようになってきた！！
↓前回チャレンジの軌跡
https://zenn.dev/chiyopu/scraps/7d1c03687f1b08

このテンプレート作ってくれた人の名前の付け方とか作り方が良いっていうのもある

config　→　設定とかキーとかについて書いてあるもの
content　→　サイトに表示される中身、文章とかタイトルとか記事ページになるもの
src　→　コンポーネントとかレイアウトとか、部品とかどう表示するか書いてあるもの
static　→　サイト内で使う画像とかが入る
多分こういう事だと思う👀

ChiYoChiYo

まだ始めてないけど不安な所

・記事の内容はNetlify CMSを使って書くっぽいけど使ったことない
・Netlify CMSとどう連携させているのかまだ理解できてない
・configに書く内容を見落としそう
　というか、自分で使う時に何書いたらいいか理解できていない
・事前準備（インストールとか）ちゃんとできるの？

ChiYoChiYo

READMEにどういう技術が使われているか書いてあるから、とりあえず調べてみる

Pagination
SEO(Sitemap, Schema.org, OpenGraph tags, Twitter tags)
Web application manifest and offline support
Google analytics
Tags
Categories
Posts in Markdown
Disqus comments
RSS feeds
Development tools
ESLint(Airbnb) for linting
Prettier code formatting
gh-pages for deploying to GitHub pages
Netlify CMS
gatsby-plugin-netlify-cms
custom Previews

ChiYoChiYo

とりあえずnew〜コマンドでプロジェクトを作成
過去一で時間かかってるな〜
しかもコマンドの流れが超早い

ChiYoChiYo


いけた〜〜〜〜〜🎉🎉🎉🎉🎉🎉🎉
Githubの手順に従ってconfigを編集していく💪🏻

ChiYoChiYo

これconfig書くためにはやっぱり最初に色々設定とかしとかないとダメそうだな🤔

author: "Papan01", // Site owner
  siteTitle: "Gatsby-Starter-Papan01", // Site title.
  siteTitleShort: "GatsbyJS P01", // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
  siteTitleAlt: "GatsbyJS-Starter-Papan01", // Alternative site title for SEO.
  siteLanguage: "en", // Site language.
  siteDescription:
    "A blog starter with the bare essentials needed for a Gatsby site(SEO, pagination, category etc.)", // Website description used for RSS feeds/meta description tag.
  siteLogo: "static/favicons/favicon.png", // Logo used for manifest.
  siteUrl: "https://gatsby-starter-papan01.netlify.com", // Domain of your website without pathPrefix.
  pathPrefix: "/", // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
  siteRss: "/rss.xml", // Path to the RSS file.
  siteFBAppID: "464217807633356", // FB Application ID for using app insights
  siteGATrackingID: "UA-153303709-3", // Tracking code ID for google analytics.
  disqusShortname: "gatsbyjs-starter-papan01", // Disqus shortname.
  twitterUserName: "", // twitter creator for SEO
  datePublished: "2019-12-08", // for SEO
  copyrightYear: "2019", // for SEO```
ChiYoChiYo

configに書いていくやつ一個一個調べて行くの大変～😂
慣れてないから何を書いたら良いのか分かんない～

siteUrl

https://chiyo-comic-book-reviews.netlify.app/でいいと思う
Netlifyのドメイン設定で決めた名前をURLに入れる

pathPrefix

よく分からん
なんこれ🤔
なんかパスの先頭に付くものっぽい
[Githubのプロジェクト名]にする

siteRss

https://rss.com/blog/find-rss-feed/

need to do is add /feed/ to the end of the website’s URL.
って書いてあるから、configの該当箇所にURLコピペして繋げれば良さそう

siteFBAppID

https://commy.work/gatsby-netlifycsm-blog

Facebookに関係するものらしい
コメントアウトしても大丈夫そう

siteGATrackingID

GoogleアナリティクスにあるIDを入力する

disqusShortname

https://michimani.net/post/blog-install-disqus-to-hugo/

Disqusで設定したchiyo-comicbookreviewsを使う

難しいやつはこれで出そろったはず！！！！

ChiYoChiYo

んんんん・・・・
とりあえずgatsby developをやったけどエラーになった
config編集してからじゃないとダメなのかな・・

ChiYoChiYo

configいじったらエラー増えた🥲

これはFaceBookのconfigをコメントアウトしたのがいけないのかも

サーポートされてない画像？があることが原因っぽいけど、どうしたら解決するのか分からない・・・

ChiYoChiYo

いけてるいけてる！！！

でも別に私は記事とか書いてないから、どうやって記事書いていくかが課題な気がする🤔

ChiYoChiYo

なんかやらかした気がする〜〜😢
cms導入する手順ミスったかも…
GitHubにプッシュしてからやるべきだったのかもしれない
テンプレートのリポジトリができちゃったから，
後から上げたらぶつかっちゃう
①いっかいNetlifyにできたやつは消す
②GitHubにpush
③ Netlifyと連携
④cms連携
これが正しいのかも
今日は時間切れ😭

ChiYoChiYo

GitHubにpushするために余分なファイル、修正するファイルが何か見極める👀

/static/にあるKonfest.pngは自分のアイコン画像に差替える

/static/images/にあるものはコミットコメントが
Refactor image path for netlify cms editor previewってなってるから
netlify cmsに使った画像が入りそう🤔
フォルダごと消す ※GitHubには空のフォルダはpushできないから

/static/favicons/も自分の物と差し替え

/content/もcmsで作ったやつが入るからフォルダごと消す

/docs/は使わないから消す

READMEは書き換えて良さそう

/src/pages/about.jsx /はプロフィールだから編集する

こんなもんだと思う…

ChiYoChiYo

/src/components/postCard/を編集すれば、ホームの画像の大きさを変えられることが分かった👍🏻

ChiYoChiYo

ええ〜〜〜〜
なんかデプロイ行かない・・・
テンプレート落としてconfig書き換えてGitHubにプッシュしただけなのに・・・

ChiYoChiYo

何かよく分からないけどcd打ってnpm i -g gatsby-cliやってからデプロイしたら動き始めた

ChiYoChiYo

port8001を使ってようやく辿り着いた

大事をとって、サイトのホスティングが完了したらURLを書き込むようにしよう
慎重にいくの大事
あとちゃんとデプロイを見届けるの大事

ChiYoChiYo

ホスティングできたけど、なぜか中身がボロボロ🤔

ChiYoChiYo

手元で動いているやつは綺麗なのに何がいけないんだろう😢
とりあえず今日は時間切れ・・

ChiYoChiYo

解決～～～🎉🎉🎉🎉
pathPrefix: '/ReviewsSite'　→　pathPrefix: '/',
にしたらちゃんと表示された！

後はcmsにURLを登録してadminから編集できるようになれば優勝🏆

ChiYoChiYo

URLを入れ直したのに、前に入れたURLの情報でエラーが出る😱

このサイトに書いてある解決方法を試してみる
https://github.com/netlify/netlify-cms/issues/1704
どうやらlocalStorage.removeItem("netlifySiteURL")をコンソールで動かせば、
間違って入れたURLの情報が消えるらしい

localStorage.removeItem("netlifySiteURL")が具体的に何をしているのかは、
ここの記事が分かりやすかった👍🏻
https://qiita.com/mima_ita/items/363fd434f9c655944e3f

私はsafariを使ってるからここも参考になりそう
https://kojikalog.com/mac_development_tools_for_safari/

ChiYoChiYo

結局localStorage.removeItem("netlifySiteURL")を試したけど同じエラーになった
↓これ
Failed to load settings from https://***********/.netlify/identity
しかもキーを調べてみたら正しいURLが渡ってた👀

「もしかしてURLが問題じゃないのでは🤔」
とういうことで調べてみたらnetlify/identityはNetlifyの認証サービスのことらしいことが分かった
さらに調べてみるとNetlifyでNetlify Identityに原因があることが分かった！
https://github.com/netlify/netlify-cms/issues/1234
このアンサーに従って設定したら、Netlifycmsの連携に成功した🎉

ChiYoChiYo

記事も書けたしこれで終了！！
やった〜〜〜〜🎉🎉🎉🎉🎉

このスクラップは2021/03/20にクローズされました