#gatsby タグの付いた Blog
CircleCI で Contentful の更新をデプロイ
2019/07/14
GitHub に CircleCI を設置しておき、Contentful の webhook 機能から記事の更新をトリガして、CI による GitHub Pages への自動デプロイができるようにする方法を紹介します。 https://suzukalight.com/2019-07-13-contentful-starter/ 前回、Contentful による Gatsby サイトのハンズオンを行いました。しかしながらこのままだと Contentful で記事を更新しても、コンテンツサーバ側は更新で
Gatsby + Contentful + GitHub Pages ハンズオン
2019/07/13
Contentful は Headless-CMS と呼ばれる仕組みを提供しており、コンテンツの設計と配信（API）のみを受け持つようなサービスになっています。WordPress との違いは、コンテンツ表示までは担当していないところです。 Gatsby でこれを利用することで、コンテンツは SaaS 側に載せて管理しておき、Web システムは React 系で作成する、ということができるようになります。 これにより、サイト管理は Git が
Gatsby でリンクを扱う／展開する
2019/07/10
シェアボタン設置 Add social share buttons to use react-share https://takumon.com/2018/09/16/ react-share ライブラリを使用することで、Facebo
Gatsby にタグ機能を追加
2019/07/06
この記事のタイトル部分に表示されているような「タグ機能」を実装する方法について解説します。 記事にタグカラムを追加 タグを指定するカラムを、md ファイルの先頭に追加します。前回トップ画像情報を追加したときと同じ手法です。 タグは複数つけられるため、配列で指定できるようにしています。タグの名称は予め登録しておく必要はなく、そのときに自由に記述して OK です。 記事詳細
Gatsby で記事のトップ画像を設定
2019/07/02
多くのブログでは、記事の先頭にトップ画像を表示しています。ここでは Gatsby でトップ画像を設定し、さらにその画像を記事一覧のサムネイルとしても表示する手法について紹介します。 実装はこちら: https://github.com/suzukalight/suzukalight.github.io/pull/2 gatsby-image gatsby-image は、Gatsby における画像表示全
Gatsby のファイル構成
2019/07/01
基本的な内容は、こちらで解説されていますので、あわせて参照ください。
https://www.gatsbyjs.org/docs/gatsby-project-structure/ ディレクトリ構成 大まかなディレクトリ構成は以下のようになっています。
（templates を移動するなど、一部変更を加えています） Gatsby のサイトカスタマイズ
2019/06/30
Gatsby のプラグインを利用することで、ブログに必要な数々の設定を簡単におこなうことができた。 PWA 対応 Add manifest and favicon gatsby-plugin-manifest が利用可能。starter で自動インストール済み。 マニフェストの内容
Gatsby + GitHub Pages でブログを構築
2019/06/29
背景 個人的な発信の場を設け、強化していきたい 業務で、月に 1,2 回ほど内容を更新するブログ的なサイトを作ることになった でも WordPress とかは（技術的興味としては）使いたくない などの理由から、WordPress 以外の技術でブログシステムを構築することにした。 私個人のスキルセットはフロントエンド（React）に寄っているので、マークアップやシステム構築は React+Sass 系で行いたい。そこで Gatsby を使ってブログシステムを構築することにしてみた。これ