Takumon Blog

Gatsbyショーケースに自分のWebサイトを登録する方法

2019/01/15

なにこれ

Gatsbyの公式サイトにはショーケースなるものがあって、 世の中に公開されているGatsby製のWebサイトを一覧で見ることができます。 実はこのショーケース、けっこう簡単に自分のWebサイトを登録できるということに最近気づきました。
今回は、Gatsbyでブログやポートフォリオなどを作っている人向けに、ショーケースの活用方法とあわせて、**「ショーケースに自分のWebサイトを登録する方法」**についてご紹介します。

Gatsbyショーケース活用方法

Gatsbyショーケースは、いろんなGatsby製のWebサイトが見れるのでUIを参考にできますし、なかにはソースコードを公開しているWebサイトもあるので、実装についても参考にできます。
そのため**「自分のGatsby製Webサイトをどうやってカスタマイズしていこう？」と迷っている時などに見ると、何かヒントが見つかる**かもしれません。

またカテゴリでフィルターもできるので、自分の興味のあるカテゴリ（たとえばブログなど）に絞って見ることもできます。

お気に入りのGatsby製Webサイト

ショーケースを見て、僕もいくつか気になったWebサイトがあったので以下でご紹介します。

CODE Bushi

ブログURL： https://codebushi.com/
伏見稲荷大社の千本鳥居をバックに、日本を意識したデザインのWebサイトです。右上のボタンによるメニュー開閉のアニメーションもカッコいいです。

記事一覧も、それぞれの記事にアイキャッチが配置されており非常に見やすいデザインになっています。

Sean Coker's Blog

ブログURL： https://sean.is/

名前「Sean Coker」の部分にマウスカーソルを合わせると、「Sean Coker」の文字がクルクル回転したり、白背景をクリックすると〇、△、□などオブジェクトが散乱したり、凝ったデザインになっています。

シンプルですが、洗練されたモノトーンのデザインがカッコいいです。

Yuuniworks Portfolio / Blog

ブログURL： https://www.yuuniworks.com/
ソースURL： https://github.com/junkboy0315/yuuni-web

島根のフルスタックエンジニアの方のポートフォリオ兼ブログです。
マテリアルデザインで統一されており、画面遷移やマウスホバー時のアニメーションにも凝っています。 UIについてもストレスなくWebサイト内を回遊できるように考えられているなぁと感じました。
なんとコチラ、ソースコードを公開してくれています emoji-blush

記事一覧

記事詳細

MOTTO x MOTTO

ブログURL： https://mottox2.com/
ソースURL： https://github.com/mottox2/website

水色がアクセントカラーのすっきりしたデザインです。画面右上の検索窓から気になる記事を検索できたり、記事詳細の最下部には最近投稿した記事へのリンクが貼られていたり、Webサイト内を回遊しやすいような工夫がされています。
なんとコチラも、ソースコードを公開してくれています。非常に助かります emoji-blush

記事一覧

記事詳細

みなさんもショーケースでお気に入りのGatsby製Webサイトを見つけてみてください。

Gatsbyショーケース登録方法

本題について説明します。
Gatsbyはショーケースの登録情報をsites.ymlで管理しています。登録する場合はこのsites.ymlを編集します。

詳しく手順を見ていきましょう。

(1) まずはGatsbyのリポジトリをフォークします。
(2-1) 次にフォークしたリポジトリで、リポジトリのdocs配下にあるsites.ymlを編集します。sites.ymlは必ず下記プロパティを記載しましょう。

sites.ymlに最低限記載する項目

- title: Takumon blog # Webサイトのタイトル
  main_url: "https://takumon.com" # WebサイトのメインページのURL
  url: "https://takumon.com" # WebサイトのURL
  featured: false # 最初はfalseにしておきます。Gatsby側で4半期に１回判定があり、「注目サイト」に認定されるとtrueになります。
  categories: # Webサイトのカテゴリーを複数指定します。 
    - Blog

(2-1) sites.ymlはオプションで下記も記載できます。

sites.ymlにオプションで記載する項目

  source_url: "https://github.com/Takumon/blog" # ブログのソースコードを公開していればGitHubなどのURLを記載
  description: Java Engineer's tech blog. # Webサイトの説明
  built_by: Takumon # Webサイト作成者名
  built_by_url: "https://twitter.com/inouetakumon" # Webサイト作成者のURL