Gatsbyのテンプレートを使ってサイトを作ってみる🔧
ChiYo【やりたいこと】
・Gatsbyの好きなテンプレートを使って、サイトを作る
・好きなマンガ、アニメを紹介できるようにする
・一通り実装できたら、styleをいじってサイトの見た目を変えてみる
ChiYo前回のチャレンジで、テンプレートがある所に後からモジュールを突っ込んでも上手く動かないことが分かった
（上手くやる方法があるかもしれないけど）
今回はとにかく下手なことはせずに、まずは忠実に実装してみる
そのあといじれそうな所をいじってみよう👍🏻
ChiYo挑戦するテンプレート
これがカッコいいからこれに挑戦する！！！
ChiYo凄い！！
前回のチャレンジで色々頑張ったから、どのファイルにどういう事が書いてあるか分かるようになってきた！！
↓前回チャレンジの軌跡
このテンプレート作ってくれた人の名前の付け方とか作り方が良いっていうのもある
config → 設定とかキーとかについて書いてあるもの
content → サイトに表示される中身、文章とかタイトルとか記事ページになるもの
src → コンポーネントとかレイアウトとか、部品とかどう表示するか書いてあるもの
static → サイト内で使う画像とかが入る
多分こういう事だと思う👀
ChiYoまだ始めてないけど不安な所
・記事の内容はNetlify CMSを使って書くっぽいけど使ったことない
・Netlify CMSとどう連携させているのかまだ理解できてない
・configに書く内容を見落としそう
というか、自分で使う時に何書いたらいいか理解できていない
・事前準備（インストールとか）ちゃんとできるの？
ChiYoREADMEにどういう技術が使われているか書いてあるから、とりあえず調べてみる
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
ChiYoふむふむ🤔
分かってきた…！！
ChiYoとりあえずnew〜コマンドでプロジェクトを作成
過去一で時間かかってるな〜
しかもコマンドの流れが超早い
ChiYo
いけた〜〜〜〜〜🎉🎉🎉🎉🎉🎉🎉
Githubの手順に従ってconfigを編集していく💪🏻
ChiYoこれ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```configに書いていくやつ一個一個調べて行くの大変～😂
慣れてないから何を書いたら良いのか分かんない～
siteUrl
https://chiyo-comic-book-reviews.netlify.app/でいいと思う
Netlifyのドメイン設定で決めた名前をURLに入れる
pathPrefix
よく分からん
なんこれ🤔
なんかパスの先頭に付くものっぽい
[Githubのプロジェクト名]にする
siteRss
need to do is add /feed/ to the end of the website’s URL.
って書いてあるから、configの該当箇所にURLコピペして繋げれば良さそう
siteFBAppID
Facebookに関係するものらしい
コメントアウトしても大丈夫そう
siteGATrackingID
GoogleアナリティクスにあるIDを入力する
disqusShortname
Disqusで設定したchiyo-comicbookreviewsを使う
難しいやつはこれで出そろったはず！！！！
ChiYoんんんん・・・・
とりあえずgatsby developをやったけどエラーになった
config編集してからじゃないとダメなのかな・・
ChiYoconfigいじったらエラー増えた🥲
これはFaceBookのconfigをコメントアウトしたのがいけないのかも
サーポートされてない画像？があることが原因っぽいけど、どうしたら解決するのか分からない・・・
ChiYoいった・・・のかな？
ChiYoいけてるいけてる！！！
でも別に私は記事とか書いてないから、どうやって記事書いていくかが課題な気がする🤔
ChiYoなんかやらかした気がする〜〜😢
cms導入する手順ミスったかも…
GitHubにプッシュしてからやるべきだったのかもしれない
テンプレートのリポジトリができちゃったから，
後から上げたらぶつかっちゃう
①いっかいNetlifyにできたやつは消す
②GitHubにpush
③ Netlifyと連携
④cms連携
これが正しいのかも
今日は時間切れ😭
ChiYoGitHubに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 /はプロフィールだから編集する
こんなもんだと思う…
ChiYo/src/components/postCard/を編集すれば、ホームの画像の大きさを変えられることが分かった👍🏻
ChiYoええ〜〜〜〜
なんかデプロイ行かない・・・
テンプレート落としてconfig書き換えてGitHubにプッシュしただけなのに・・・
ChiYo何かよく分からないけどcd打ってnpm i -g gatsby-cliやってからデプロイしたら動き始めた
ChiYoうわあああああん😭😭😭😭
ChiYoport8001を使ってようやく辿り着いた
大事をとって、サイトのホスティングが完了したらURLを書き込むようにしよう
慎重にいくの大事
あとちゃんとデプロイを見届けるの大事
ChiYoホスティングできたけど、なぜか中身がボロボロ🤔
ChiYo手元で動いているやつは綺麗なのに何がいけないんだろう😢
とりあえず今日は時間切れ・・
ChiYo解決～～～🎉🎉🎉🎉
pathPrefix: '/ReviewsSite' → pathPrefix: '/',
にしたらちゃんと表示された！
後はcmsにURLを登録してadminから編集できるようになれば優勝🏆
ChiYoURLを入れ直したのに、前に入れたURLの情報でエラーが出る😱
このサイトに書いてある解決方法を試してみる
どうやらlocalStorage.removeItem("netlifySiteURL")をコンソールで動かせば、
間違って入れたURLの情報が消えるらしい
localStorage.removeItem("netlifySiteURL")が具体的に何をしているのかは、
ここの記事が分かりやすかった👍🏻
私はsafariを使ってるからここも参考になりそう
ChiYo結局localStorage.removeItem("netlifySiteURL")を試したけど同じエラーになった
↓これ
Failed to load settings from https://***********/.netlify/identity
しかもキーを調べてみたら正しいURLが渡ってた👀
「もしかしてURLが問題じゃないのでは🤔」
とういうことで調べてみたらnetlify/identityはNetlifyの認証サービスのことらしいことが分かった
さらに調べてみるとNetlifyでNetlify Identityに原因があることが分かった！
このアンサーに従って設定したら、Netlifycmsの連携に成功した🎉
ChiYo記事も書けたしこれで終了！！
やった〜〜〜〜🎉🎉🎉🎉🎉