gatsbyに関する記事一覧

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

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

はじめに 実は筆者は、サイトを開設するまでは、サイトを開設したら、1日何百人か何千人かが訪れてくれて、自分が書いた記事を読んでもらえるものと漠然と思っていました。でも現実はそんなに甘くないんですよね。思い知りました。サイトを開設して待っているだけだと、見てくれる人は基本０人です…

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

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

はじめに 本サイトのソースコードはこちらです。 本サイトは、静的サイト構築ツール GatsbyJS で作成しています。 以下の順に解説します。 開発環境構築 サイトのカスタマイズ カテゴリー機能の追加 タグ機能の追加 コードブロック アイキャッチ画像 ページレイアウトの定義 問…

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

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

以下を参考に実装しました。 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…

以下を参考に実装しました。 https://blog.u-chan-chi.com/post/gatsby-markdown-images/ Gatsby JS でBlogを作成する際、マークダウンファイルに設定したimageを扱う方法 トップページやカテゴリ別記事一覧ページ、…

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