Netlify でホスティングしている Gatsby 製静的サイトを定期的にビルドして情報を更新する - ryota-ka's blog
この記事は以下のページに移転しました． blog.ryota-ka.me TL; DR Netlify の build hook URL を発行する 上記の URL に対して定期的にリクエストが送られるように設定する モチベーション ポートフォリオサイトを Gatsby で作って Netlify でホスティングしているのだが，コンテンツの一部として，gatsby-source-graphql を使って GitHub GraphQL API から自分の profile の pinned items を取得して表示したり，gatsby-source-rss-feed を使ってこのブログの最新記事を取得して表示したりしている．静的サイトとしてホスティングしているため，これらの情報はビルド時に取得され，その時点で得られた値が HTML に埋め込まれる．しかし，こうした情報は低頻度ではあるものの，ポ
Creating Tags Pages for Blog Posts | Gatsby
Creating tag pages for your blog post is a way to let visitors browse related content. To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the tutorial on Gatsby’s data layer and Adding Markdown Pages. The process will essentially look like this: Add tags to your markdown filesWrite a query to
Gatsbyにタグ機能、カテゴリ機能をつける（基礎編） - Qiita
はじめに 本記事は https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-add-tags のクロスポスト記事になります。 この記事はGatsbyというヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。 Gatsby始めるまで GatsbyにShare機能、OGPタグをつける タグ機能、カテゴリ機能をつける（基礎編） タグ機能、カテゴリ機能をつける（応用編） GatsbyにTableOfContents（目次）をつける DarkModeをつける 内容 今回はWordPressのタグ機能、カテゴリ機能に当たる部分を実装していきます。標準で実装されてないの？！って突っ込みはあるかと思いますが、そうです。標準のテンプレートでは実装されておりません。なので
Gatsbyプラグイン45選 - Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
Gatsby.jsのおすすめプラグインをまとめてみた
Gatsbyを使っていて個人的に便利だと思うのが、Gatsbyプラグインです。 Google Analyticsのような有名どころのプラグインはもちろん、ちょっとした機能のプラグインも用意されていて、僕の中ではGatsbyサイトの開発にプラグインは欠かせません。 そこで今回の投稿では、僕が使ってみて便利だと思ったプラグインを目的別に分けて紹介していきたいと思います。 2020年8月17日Gatsby.jsって何？知っておきたい基礎知識やメリットを徹底解説 特にオススメしたいプラグイン 今回は紹介したいプラグインが多いので、まずは特にオススメしたいプラグインからご紹介します。 gatsby-plugin-alias-imports まずはこちらのプラグインから。個人的にGatsbyサイトを作るときに欠かせないプラグインgatsby-plugin-alias-importsです。 このプラグイ
Gatsbyプラグイン45選 | Gatsby Starter Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
Gatsby.jsにreact-helmetを導入してhead要素（メタタグ）をカスタマイズする
Gatsby.jsにreact-helmetを導入してhead要素（メタタグ）をカスタマイズする GatsbyでHTMLファイルを書き出すと、初期状態ではメタタグはおろかタイトルもないんですよね。 その辺のカスタマイズは「helmet」とというプラグイン使うと簡単らしいでご紹介します。 投稿日2019年10月14日 更新日2019年10月14日 Gatsbyがはじめての方は下記の記事も参考にしてください。 React製静的サイトジェネレーターGatsby使ってみた インストール 下記コマンドでプラグインをインストールします。 react-helmetはReactのコンポーネントですが、それをGatsbyのプラグインで利用できるようにしたのがgatsby-plugin-react-helmetですね。 $ npm install --save gatsby-plugin-react-helm
Gatsby のサイトを GitHub Actions で GitHub Pages にデプロイ - Qiita
Gatsby.js で構築しているブログ・サイトの GitHub Pages へのデプロイを GitHub Actions を利用して自動化する話です。 Gatsby のプロジェクトを用意 この記事では gatsbyjs/gatsby-starter-blog: Gatsby starter for creating a blog を例として用います。 GitHub Actions の設定 最新の情報は Action のリポジトリにて確認してください。 peaceiris/actions-gh-pages: GitHub Actions for deploying to GitHub Pages with Static Site Generators GitHub Actions による GitHub Pages への自動デプロイ - Qiita Workflow の追加 以下のワークフロ
SPA（Gatsby）を使い、Google OptimizeでA/Bテストをする方法 - Qiita
Google Optimizeの準備をする オプティマイズスニペットと、アンチフリッカースニペットを、gatsby-ssr.jsに記載して、Google Optimizeを使う準備をします。 Gatsbyならプラグインがありますが、Optimizeから警告が出たので、直接コードを埋め込みます。 import React from 'react'; export const onRenderBody = ({ setHeadComponents }) => { if (process.env.NODE_ENV === `production`) { setHeadComponents([ // オプティマイズスニペット <script async src="https://www.googletagmanager.com/gtag/js?id=UA-........."></script>,
Gatsby, TypeScript, Emotion, Tailwind, MDXでブログを作っている - Qiita
Gatsby, TypeScript, Emotion, Tailwind, MDXでブログを作っているTypeScriptMDXemotiongatsbytailwindcss この記事はGatsby.js Advent Calendar 2019 23日目の記事です。 2時間ぐらい納期過ぎました。すみません。 次の記事は@kazuooooo さんの まるで名刺のようなポートフォリオサイトを作れるCardfolio!を公開しました！ です。 これは フロントエンド職に就きたいのでReact, TypeScriptの勉強にGatsbyでブログを作ってみた記事です。 ブログがどんな感じで作られてるのか、ライブラリ, プラグイン, ツールの紹介も交えながらかんたんに解説していきます。 動いてる実物はここから見れます。ソースはここです。 使うもの Gatsby TypeScript スタイリング
Gatsby組込みのLinkコンポーネントを使ってナビゲーションバーを自作する - Qiita
初めに この記事はGatsby.js Advent Calendar 2019 21日目の記事です。 GatsbyJSを色々いじってたらいい感じのナビゲーションバーが自作できた気がしました。 目次 本記事の目標 前提 - 開発環境 - Gatsby Link APIについて ディレクトリ構成 まずはひな型を作る 共通のレイアウトはLayoutコンポーネントとして定義する Headerコンポーネントの実装 終わりに 本記事の目標 こんな感じのナビゲーションバーを作りたいと思います。 それっぽいものがフロントエンド初心者の私でも作れたので投下します。 重要なことですが、このレイアウトではBootstrap4は使っていません。 サンプルを公開しています。触ってみてください → サンプル ソースコード→ https://github.com/koralle/gatsby-link-navbar 前
GatsbyJSで作っているブログでリッチなリンクを貼れるようにした
モチベーションアプリやサービスを紹介する際にURLだけだと味気がないので、OGPの情報を拾ってきて、リンク先のタイトルや画像が表示されるようにしたかったnoteとかでよく見るやつできあがったもの Bear - プライベートメモ Bearは、ライター／弁護士／シェフ／教師／エンジニア／学生や保護者などのさまざまなユーザーによって利用されている自由なメモアプリです。 Bearは、素早い整理機能・編集ツール・エクスポート機能を備えているため、素早く書いてどこでも共有することができます。また、暗号化によってプライバシーを保護します。 2017 Apple デザインアワード 2016 年 App Store アプリオブ・ザ・イヤー 「Bear は、私が一番気に入っている執筆アプリ」- Kit Eaton, New York Times 柔軟かつシンプルなツールで*自由に書きましょう* Bear
Gatsbyの記事にoEmbed準拠のコンテンツを埋め込めるようにした
（※↑ はただの記事用のサムネイル画像です） 記事の中に URL を書くだけで oEmbed 準拠のコンテンツを埋め込めるようにしました。 oEmbed を聞いたことない方はまずデモを見てみてください。 oEmbed は結構身近なサービスたちも対応している便利で面白い仕様なのですが、あまり有名ではない（日本語の情報も少ない）ようです。 記事に活用できそうな面白いものだったので、デモを交えつつ紹介します。 なおこの記事では oEmbed のデモと紹介をメインに記載します。ソースは公開してありますが Gatsby の remark プラグインの作り方解説的なのはこの記事では割愛します。 oEmbed の埋め込みデモ 国内のサービスだと、はてなブログの記事が有名だと思います。 記事の URL を markdown に書くと以下のような表示になります。 （自分がはてなブログの記事をもってないので最
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Gatsbyで構築] サブディレクトリで公開する簡単な方法 | ushiyaDevLog![[Gatsbyで構築] サブディレクトリで公開する簡単な方法 | ushiyaDevLog](https://cdn-ak-scissors.b.st-hatena.com/image/square/66b20746f2c05c292f0d9b2355c01414a81575e1/height=288;version=1;width=512/https%3A%2F%2Fblog.ushiya.net%2Fwp-content%2Fuploads%2F2020%2F01%2FGatsby_Monogram.png)
GatsbyJSでTypeScriptを使う方法
GitHub - geocine/gatsby-source-dev: Gatsby source plugin that fetches user articles from Dev.to
gatsby-source-dev | Gatsby
GitHub - catnose99/CatKnows: Personal blog powered by Gatsby.js.
Gatsbyを最速で理解するためのチュートリアル - Qiita
GatsbyJSで作っているブログで gatsby-remark-component を使うのを止めて、 gatsby-plugin-mdx を導入した