サイトレシピに関する記事一覧

はじめに 本サイトにGoogle AdSenseの広告を載せて約１年が経過しました。この経緯とgatsby.jsで作成したサイトにGoogle AdSenseの広告を載せる方法については以下の記事にまとめています。 Google AdSense…

はじめに 2021年5月、本サイトを開設して1年で、やっと月間2000PV達成しました。今後も月間2000PVを維持できる自信は全くありませんが、かねてより月間2000PVを超えたら収益化を検討することに決めてましたので、早速挑戦してみました。 月間ユーザ数は、1100人程度。 ブログ広告のクリック率は0.…

はじめに 本稿は、Chromeのデベロッパーツールに組み込まれているLighthouseというツールを使用して、Webページを採点する方法の備忘録です。 操作手順 (1) Chromeのデベロッパーツールを開く メニュー > その他ツール > デベロッパーツール (…

PCでもスマホでもタブレットでも問題なく表示されるページをGoogle Chromeでデバッグする方法

はじめに 実は筆者は、サイトを開設するまでは、サイトを開設したら、…

Gatsby.jsで作成したサイトを、 Netlify にデプロイする手順をまとめます。 サイトマップとrobots.txt作成 デプロイした環境で、検索エンジンにヒントを与えるために、gatsbyプラグインにより、 サイトマップとrobots.txtを生成するようにします。 app/package.json…

Netlify Formsのお問い合わせフォーム作成 この方法は、以下のページを参考にしました。というか、まんまコピーです。 https://qiita.com/hiropy0123/items/2e8d14ea66b78ab64847 Netlify FormsをつかってGatsby…

はじめに 本サイトのソースコードはこちらです。 本サイトは、静的サイト構築ツール GatsbyJS…

Alpine Linux上にdocker-composeにより、Gatsbyの開発環境をインストールします。 githubへのアクセスは確立済みとし、dockerおよびdocker-composeは導入済みと仮定します。 ディレクトリ構成 gatsby_working/app…

ここまで出来たら、以降、~/gatsby_working/gatsby/app 以下を修正してサイトをカスタマイズしていきます。 編集すべきは以下のファイルです。 app以下のディレクトリ構成 プロフィール等の修正 gatsby-config.jsのsiteMetadataを自分用に修正します。 gatsby/app…

以下を参考に実装しました。 http://hachibeedi.github.io/entry/how-to-add-category-and-tags-page/ GatsbyへCategoryとタグ機能を追加する gatsby-node.js…

以下を参考に実装しました。 https://kikunantoka.com/2019/12/01—install-tags/ GatsbyJSで作っているブログにタグ機能を導入した gatsby-node.js…

以下を参考に実装しました。 https://kikunantoka.com/2019/12/03—install-syntax-highlight/ GatsbyJSで作っているブログでシンタックスハイライトが適用されるようにした https://kikunantoka.com/2019/12/11—install…

以下を参考に実装しました。 https://blog.u-chan-chi.com/post/gatsby-markdown-images/ Gatsby JS でBlogを作成する際、マークダウンファイルに設定したimage…

記事のレイアウトは、components/layout.jsで定義しています。 page定義のjsで、 により、Layoutコンポーネントをインポートし、以下のように使用していました。 リッチな見栄えを定義するために、Layoutに加え、以下のコンポーネントを追加しました。 コンポーネント 機能 Layout…