#gatsby タグの付いた Blog

GatsbyでGitHubとContentfulの複数ソースを実現する

2019/08/14

使用するパッケージContentfulAPIとの通信gatsby-source-contentful:Contentfulのデータをソースにできるプラグインdotenv:\`CO

CircleCI で Contentful の更新をデプロイ

2019/07/14

GitHubにCircleCIを設置しておき、Contentfulのwebhook機能から記事の更新をトリガして、CIによるGitHubPagesへの自動デプロイができるようにする方法を紹介します。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

シェアボタン設置Addsocialsharebuttonstousereact-sharehttps://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/2gatsby-imagegatsby-imageは、Gatsbyにおける画像表示全

Gatsby のファイル構成

2019/07/01

基本的な内容は、こちらで解説されていますので、あわせて参照ください。https://www.gatsbyjs.org/docs/gatsby-project-structure/ディレクトリ構成大まかなディレクトリ構成は以下のようになっています。(templatesを移動するなど、一部変更を加えています)

Gatsby のサイトカスタマイズ

2019/06/30

Gatsbyのプラグインを利用することで、ブログに必要な数々の設定を簡単におこなうことができた。PWA対応Addmanifestandfavicongatsby-plugin-manifestが利用可能。starterで自動インストール済み。マニフェストの内容

Gatsby + GitHub Pages でブログを構築

2019/06/29

背景個人的な発信の場を設け、強化していきたい業務で、月に1,2回ほど内容を更新するブログ的なサイトを作ることになったでもWordPressとかは(技術的興味としては)使いたくないなどの理由から、WordPress以外の技術でブログシステムを構築することにした。私個人のスキルセットはフロントエンド(React)に寄っているので、マークアップやシステム構築はReact+Sass系で行いたい。そこでGatsbyを使ってブログシステムを構築することにしてみた。これ

Writings

blogsnippetcourse

Contact

Home©︎ suzukalight