GatsbyでE-commerceを作成する一連のプロセスをシェアします。本日は、Shopify Liteの決済機能(checkout)をGatsbyサイトに実装する方法です。

GatsbyでE-commerceを作成する一連のプロセスをシェアします。本日は、Shopify Basicプランから、Shopify Liteプランを変更する方法です。

GatsbyでE-commerceを作成する一連のプロセスをシェアします。本日は、Shopifyの決済機能(checkout)をGatsbyサイトに実装する方法です。

GatsbyでE-commerceを作成する一連のプロセスをシェアします。本日は、Shopifyの商品をGatsbyサイトで表示する方法です。

Gatsbyブログのサイドバーに月別アーカイブをつけたので、そのプロセスをシェアします。

ここ数日書評を書いてきましたが、どうせ書評を書くならAmazonのアフィリエイトリンクを貼りたいよね、という事で、最近アップした書評の記事にAmazonアフィリエイトリンクを貼りました。

Gatsby本の書評その2です。第1部、Chapter3-5までの内容を纏めます。

僕が知っている限りでは、日本語でのはじめてのGatsby本が出版されました。Gatsbyでできることを網羅しており、とても役に立つ本となっています。

ブログの体裁を少しずつワードプレスちっくに整えております。今回は、サイドバーにカテゴリー別の一覧を追加しました。ポイントはkebabCaseです。

開設して5ヶ月経ったこのブログですが、少しずつ読者の方が増えてきております。そこで、読者の方がブログ内の必要な情報へアクセスしやすいように、サイドバーへ検索ボックスをつけました。ツールは、Googleのカスタム検索を使用しています。

このブログの各記事に「目次」をつけました。これまでは、「目次っぽいもの」をつけていたのですが、親愛なる読者の方から「目次」をつけたら更に良くなる、というアドバイスを頂きましたので、この機会に実装いたしました。

これまでは、ブログのトップページに全ての記事の見出しを載せており、サイトが縦長だったんですよね。それを、1ページに6記事ごと載せるようにページネーションを実装しました。そして、各記事のページで「新しい記事」、「古い記事」というリンクを設置しました。

Gatsbyでブログを作ると言っても、様々なユースケースがあると思います。例えば、僕のように個人開発していく中での気づきを発信するためにGatsbyをブログを使う、という場合であったり、エンジニアではないクライアントが、ブログを発信するためのフロント側の技術としてGatsbyを使う場合など、さまざまだと思います。今回は、WordPressで元々ブログを書いていた方の、WordPressでなくても良いけども、UIの分かりやすいCMSへ移行したい、という要望にお答えする形で、WordPressのブログを、Gatsby+Contentfulへ移行しました。その工程をシェアします。

web制作で案件を取るためのツールとして、Gatsbyを使って英語のポートフォリオサイトを立ち上げました。一般的に、どういうポートフォリオサイトを作るべきなのか、先ずは市場調査からはじめ、ドメインの選定、テンプレの選定、そして、サイトの作り込みを1週間で行ったので、そのプロセスをシェアします。

せっかく爆速Gatsbyを使ってサイトを作ったのだから、できれば誰かに見て欲しいし、そして可能ならば収益につなげたい。そういう考えでGoogle AdSenseを1月中旬に導入したんですが、広告が表示されたり表示されなかったり、と挙動が安定しておりませんでした。それで、ようやく今回、広告の表示を安定させる事ができたので、その内容をシェアします。

ブログのtop pageには、記事の一覧を時系列に載せていたのですが、各記事に対応する写真を載せていない事が、どうしても寂しく感じていたんですよね。そこで、一つ一つの記事に対して、一つの画像をfeaturedImageとして設定し、その画像をtop pageのタイトル下に表示できるようデザインを修正しました。

ブロガーの方のtwitterを眺めていると、ここ最近の流行りは大きな写真がついたtwitter cardを使って記事をシェアする事、というのが見えてきました。そこで、このブログにもOGPの設定を行い、twitterシェアボタンを導入し、大きな写真つきで記事がシェアされるような機能を追加しました。

このブログで使用しているGatsby staterのgatsby-v2-starter-lumenは、デフォルトでサイドバーとメインのコンポーネントが実装されています。そこに今回はヘッダーとフッターを追加しました。

今回は有名なブログサイトでよく見かける「この記事書いた人」っていう部分を作りました。これがある事で、記事を読み終わられた読者の方がtop pageに遷移できますし、また場合によっては、僕のtwitterアカウントへ遷移して頂けるとのとても便利です。そしてスマホで閲覧する際にサイドバーの一部を非表示にして、サイト全体の背景色を変更しました。

力のあるブロガーの皆さんのサイトを参考にすると、基本的にはワードプレスでサイトを作られています。そして、それらのサイトがやっぱり見やすいんですよね。という事で、このGatsbyブログも読者の方に読んでいただきやすいようにデザインを少しづづ改善していきます。今回は記事のテンプレートを作りましたので、その詳細を書きます。

2018年末までは、はてなブログを使っていましたが、独自ドメインでなるべくコストのかからない方法という事で、2020年正月にGatsbyブログをたちあげました。それで、はてなブログからの記事を移行する準備として記事のダウンロードを行いました。

Google AdSenseへの申請時の記事数は9本、申請後の審査時間は1日とかからず、17時間程度でございました。

2週間でGatsbyJSを学び、自分のブログを立ち上げることができたので、勉強の過程とブログセットアップの過程を共有します。

コードブロックの見た目が気になっていたので、少しかっちょよく変更しました。

Gatsbyのpluginを使用してsitemapを作成し、google consoleに登録しました。

テンプレートのtop pageのデザインが気になっていたので、変更しました。

当サイトのフォントの大きさ、色が少し気になっていたので、変更を加えました。

リンク先を別タブで開けるように、またリンクタグを少しオシャレにしました。

Gatsbyで作られたサイトは、PWA対応させる事がとても簡単、という事ですので、早速PWA対応させました。

本サイトで幾つか気になる個所があったので、修正を加えました。今回の記事は読者の方に向けて、というよりは備忘録のような記事ですね。

自分のサイトがどれぐらいの人に、そしてどういう人にどういう時間帯に読まれているか、気になるところですよね。という事で、本サイトにGoogle Analyticsを導入しました。

巷で噂のグレートGatsby、速い速いと皆さんが書いているので、早速テンプレートを使って、はてなブログをこちらに移行しました。