at backyard

Color my life with the chaos of trouble.

GatsbyJS

GatsbyのサイトにGoogle AdSenseの審査を受けるためのコードを追加する

自分用備忘録。 以下の公式サイトを参考にする。 www.gatsbyjs.com gatsby-ssr.jsが存在していなければルートに追加する。 以下のコードを貼り付ける。 Google AdSenseのコード というところに自分のコードを入れる。 import React from 'react'; export con…

M1以降のmacでnode-sassをインストールしようとした際にエラーになったので対応したメモ

メインの作業マシンはすでにM1以降のMacBook Airに移行しているが、唯一Gatsby関連のプロジェクトではまだIntelチップのMacBook Proでないと yarn install が成功しない状態となっていた。 今回は重い腰を持ち上げて、M1以降のmacでもGatsby関連のプロジェク…

【サイトのSEO対策】GatsbyJSで作ったサイトの検索流入が伸び悩んでいて色々と対策してみた話

目次 目次 最初に結論 GatsbyJSで作ったサイトの検索流入が伸び悩んでいる 問題の原因は、そもそも狙うべき検索ワードにあった 検索キーワードに競合が多い場合は、流入対象とするキーワードをずらすようにする SEO対策の結果 最初に結論 文章が長くなりそう…

Gatsbyでbuildしたあとのページを確認するとcssが適用されていない問題

まさに表題のとおりだが、gatsby build したあと、 gatsby serve で本番と同様の環境でアクセスすると、cssが適用されていない問題があった。しかもcssが適用されていないページは一部だけという内容。 一瞬頭を悩ませたが、単純にそのページでcssファイルの…

【Gatsby の SEO対策】Gatsby + Netlifyで運用しているサイトで意図しない301リダイレクトがかかっていたので対応した話

先日、Gatsbyで作成してNetlifyで運用しているサイトで不要なリダイレクトが発生していることに気づき、対応をしていた。 (Google Search Consoleでリダイレクトありと出ていた) ただ、コードを見ていてもリダイレクトがかかっている箇所なんて存在しないし…

Gatsby.jsで新しいGoogle Analyticsを使う場合は、gatsby-plugin-google-analyticsではなく、gatsby-plugin-google-gtagを使うこと

Gastbyで新しいバージョンのGoogle Analyticsが動かない gatsby-plugin-google-analytics のドキュメントを参考に設定したのだが、なぜかうまく行かない。 Googleの提供しているChrome拡張であるTag Assistantでチェックしてみると、無効なIDだという理由で…

Gatsbyで作ったサイトをGoogle Search Consoleに登録する方法(Google Analyticsのタグを用いて認証させる)

Gatsbyでサイトを作った際、Google Search Consoleに登録をしようとしたら、所有権を証明できませんでした というエラーが出てしまった。 Google Analytics自体は既に gatsby-plugin-google-analytics を用いて設定済みの状態。 Gatsbyを用いている場合、う…

Netlifyのデプロイ時に "internal/modules/cjs/loader.js”がエラーになる問題の対応(備忘録)

Gatsbyのサイトをデプロイ中にエラーになった。 ちょうど前回ポストしていたnikkiのサイトのリリースでだ。 internal/modules/cjs/loader.js:969 throw err; エラーログを追っていると、どうやら下記のmoduleが見つからないというのが原因らしい。 Error: Ca…

nikkiという日記を書くためのWebサイトを作った

Gatsby Starter: Minimal Blogを用いて個人的な日記サイトを作った 自分自身の日記をwebに載っけてみようと思い、作った。 nikki.shinshin86.com 日記サイト自体はGatsbyで構築しようと前々から考えており、良い感じのテンプレートがなければいっそ自作テン…

ヤッホーブルーイングのビールにインスピレーションを得て制作されたBeaglesの"The Fantastic Escape"を振り返るWebページを作っている

ヤッホーブルーイングのビールにインスピレーションを得て制作されたBeaglesの"The Fantastic Escape"を振り返るWebページを作っている タイトルの通りで、現在のところはまだ制作中のため、書きかけのところが多々あります。 the-fantastic-escape.beagles-…

B/WのWebサイトができました!

B/Wの公式Webサイトができました! mellow-yellow.b-slash-w.com ちなみにこちらのサイトは GatsbyJS + Netlify の組み合わせでやっております。 余談ですが、B/Wのサイトも、10年以上ぶりです。感慨深い。 昔は 魔法のiらんど に我々のサイトもあったので…