2月下旬から東京フリーランスさんの30Daysトライアルを進めております。ようやく30Daysトライアル1stも後半に入り、日本語でのポートフォリオサイトをGatsbyにて作りましたので、そのプロセス・および学んだポイントを共有させていただきます。

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

【この記事は、2019年4月27日に、はてなブログへアップした記事のリライトです。】こんにちは、筋肉めがねです。2020年1月1日に立ち上げた、このGatsbyブログですが、少しずつ改修を重ねています。そして、Gatsbyブログは爆速で、今の所とても気に入っているのですが、可能であればWordPressと併せて使うことができたら良いよね、と考えております。Gatsbyには'gatsby-source-wordpress'というpluginがあるため、それを使うと良さそうですが、その準備段階として、WordPressを使ってブログをたちあげる手順をもう一度復習しておきましょう。

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

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

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