サイトレシピMay 27, 2020linux gatsby はじめに 本サイトのソースコードはこちらです。 本サイトは、静的サイト構築ツール GatsbyJS で作成しています。 以下の順に解説します。 開発環境構築 サイトのカスタマイズ カテゴリー機能の追加 タグ機能の追加 コードブロック アイキャッチ画像 ページレイアウトの定義 問い合わせフォームのページ デプロイ レスポンシブデザインページのデバッグ Webページの採点 アクセス数対策 サイトのフォルダー構成の変更 Google AdSenseによる収益化 Google AdSenseによる収益化その後2022/5 関連記事サイトレシピ(1) 開発環境構築May 27, 2020Alpine Linux上にdocker-composeにより、Gatsbyの開発環境をインストールします。 githubへのアクセスは確立済みとし、dockerおよびdocker-composeは導入済みと仮定します。 ディレクトリ構成 gatsby_working/app…サイトレシピ(2) サイトのカスタマイズMay 27, 2020ここまで出来たら、以降、~/gatsby_working/gatsby/app 以下を修正してサイトをカスタマイズしていきます。 編集すべきは以下のファイルです。 app以下のディレクトリ構成 プロフィール等の修正 gatsby-config.jsのsiteMetadataを自分用に修正します。 gatsby/app…サイトレシピ(3) カテゴリー機能の追加May 27, 2020以下を参考に実装しました。 http://hachibeedi.github.io/entry/how-to-add-category-and-tags-page/ GatsbyへCategoryとタグ機能を追加する gatsby-node.js…サイトレシピ(4) タグ機能の追加May 27, 2020以下を参考に実装しました。 https://kikunantoka.com/2019/12/01—install-tags/ GatsbyJSで作っているブログにタグ機能を導入した gatsby-node.js…サイトレシピ(5) コードブロックMay 27, 2020以下を参考に実装しました。 https://kikunantoka.com/2019/12/03—install-syntax-highlight/ GatsbyJSで作っているブログでシンタックスハイライトが適用されるようにした https://kikunantoka.com/2019/12/11—install…サイトレシピ(6) アイキャッチ画像May 27, 2020以下を参考に実装しました。 https://blog.u-chan-chi.com/post/gatsby-markdown-images/ Gatsby JS でBlogを作成する際、マークダウンファイルに設定したimage…サイトレシピ(7) ページレイアウトの定義May 27, 2020記事のレイアウトは、components/layout.jsで定義しています。 page定義のjsで、 により、Layoutコンポーネントをインポートし、以下のように使用していました。 リッチな見栄えを定義するために、Layoutに加え、以下のコンポーネントを追加しました。 コンポーネント 機能 Layout…サイトレシピ(8) 問い合わせフォームのページJuly 01, 2020Netlify Formsのお問い合わせフォーム作成 この方法は、以下のページを参考にしました。というか、まんまコピーです。 https://qiita.com/hiropy0123/items/2e8d14ea66b78ab64847 Netlify FormsをつかってGatsby…サイトレシピ(9) デプロイJuly 01, 2020Gatsby.jsで作成したサイトを、 Netlify にデプロイする手順をまとめます。 サイトマップとrobots.txt作成 デプロイした環境で、検索エンジンにヒントを与えるために、gatsbyプラグインにより、 サイトマップとrobots.txtを生成するようにします。 app/package.json…当サイトのアクセス数対策とその結果および収益化への道February 01, 2021はじめに 実は筆者は、サイトを開設するまでは、サイトを開設したら、…Google AdSenseによる収益化June 08, 2021はじめに 2021年5月、本サイトを開設して1年で、やっと月間2000PV達成しました。今後も月間2000PVを維持できる自信は全くありませんが、かねてより月間2000PVを超えたら収益化を検討することに決めてましたので、早速挑戦してみました。 月間ユーザ数は、1100人程度。 ブログ広告のクリック率は0.…Google AdSenseによる収益化その後2022/5May 01, 2022はじめに 本サイトにGoogle AdSenseの広告を載せて約１年が経過しました。この経緯とgatsby.jsで作成したサイトにGoogle AdSenseの広告を載せる方法については以下の記事にまとめています。 Google AdSense…
