GatsbyJSで複数のサイトの情報をまとめたRSS Feedをつくる - mottox2 blog
自分はWrite Blog Every Weekという週に一回ブログを書くコミュニティに所属しています。 コミュニティ内ではRSS Feedに基づいてブログを書いたかを判断するBotが整備されており、ブログ管理者がそのBotに対してRSSのURLを登録するフローを取っています。 しかし現状、1人が登録できるRSSは一つまでという制約があり、ブログとQiita、noteを併用して認識させることが難しくなっています。 正攻法で言えばプルリクエストを出そうという話になります。しかし、AWS LambdaやDynamoDBが使われておりデバッグも面倒なので（自分の登録する）RSSに複数のサイトの情報をまとめるという変則的な方法を取って解決することにしました。 その際に、Gatsbyのgatsby-plugin-feedを使って複数のサイトをまとめたのでその方法を紹介したいと思います。 該当のPul
Gatsby にタグ機能を追加 | suzukalight.com
import React from 'react'; import { Link } from 'gatsby'; import kebabCase from 'lodash/kebabCase'; import styles from './index.module.scss'; const Tag = ({ tag }) => ( <Link className={styles.link} to={`/tags/${kebabCase(tag)}/`}> <li className={styles.tag}>{tag}</li> </Link> ); const Tags = ({ tags }) => ( <ul className={styles.tags}> {(tags || []).map(tag => ( <Tag key={tag} tag={tag} /> ))} </
Gatsbyを使ってみる - Qiita
Gatsbyとは Reactを使った静的サイト生成ツール static PWA(Progressive Web Application)を作れるらしい。PWAとはネイティブアプリのようなWEBアプリと自分は解釈している。 Reactのことをさっぱり分かっていないこともあり、学習も兼ねて使ってみた。 静的サイト生成ツールはこちらの一覧が参考になった。 markdownを書いてblog記事にするためのhow to 1. インストールと設定 gatsby-plugin-react-helmetが2系だと、$ gatsby developでエラー出てたけどもう直ってるかも？ $ node -v v9.3.0 $ npm install -g gatsby-cli $ gatsby new my-blog $ cd my-blog $ npm install gatsby-source-filesy
GatsbyでGoogle Lighthouseで満点を取るブログを一から作る - Qiita
概要 Gatsbyは、React.jsを使ったStatic Site Generator(SSG、静的サイトジェネレーター)で、とても早いウェブサイトを作れる技術です。静的なサイトだけでなく、CSRやSSRサイトも作れますが、この記事では静的サイトに集中しておきたいと思います。Gatsbyが使用するGraphQLについても扱います。 Google Lighthouse Score 学生時代には取れなかったオール100点 完成品はこちら コードはこちら 対象読者 Gatsbyがどう動くか知りたい方 Reactの基本的知識がある方 ブログをScratchで作りたい方 目標 Gatsbyの構造を知ることによって、色んなライブラリーを応用できるようになる 注意事項 完成品の基本的構造にふれるだけなので、上記の例と全く同じものが作られる記事ではありません。 Gatsbyのことがよくわかってて、開発時
React.js製の静的サイトジェネレーターGatsbyに移行した - Qiita
これまで WordPress を使って技術メモを書いていたのですが、静的サイトジェネレーターの記事を読んで試してみたいと思いました。 とりあえず有名どころの jekyll, Hugo, Hexo などを一通り使ってみたのですが、React.js 製の Gatsby が面白そうだなと思って WordPress から移行してみました。 gatsby https://github.com/gatsbyjs/gatsby ちなみに移行したサイトはこちら Gatsbyの特徴 React.js ならではのリロード無しでのページ遷移 サイト構築のためのコンポーネント・モデルが使える ライブで開発できる 導入方法 事前に Node.js と npm をインストールしておく必要があります。 インストール
Gatsby.js + Contentful + Netlifyで作った爆速ブログ | CatNose
記事のデータやタグなどのコンテンツを管理するWebアプリです。マークダウンエディターを備えており、ここで記事を書きます。この記事データをGatsby.jsが読み込み、静的なファイルを作ってくれるわけです。 （記事を保存したときに、Netlifyに通知が飛ぶようにしておくと、Netlifyがページデータを再生成してくれます） 静的なサイトをビルド、デプロイ、ホスティングしてくれるサービスです。GitHub上のGatsby.jsのソースコードと、Contentfulの記事データを読み込み、静的なサイトデータを生成（ビルド）してくれます。そのため、ブログのカスタマイズがとっても楽になります。SSL化も無料。 高速な理由（Gatsby.js）WordPressと異なり、あらかじめ静的なページデータを生成しておく（Gatsby.js）ファーストビューに関わるCSSを自動でインラインで埋め込んでくれる
Gatsby + Netlify CMSで作ったブログをカスタマイズする | Blog
かれこれ、WordPress→Tumblr→はてなブログという感じで色んなブログサービスを転々としてきましたが、最近になってGatsby + Netlifyという単語をよく聞くようになったので試してみました。 https://www.gatsbyjs.org/ React製の静的サイトジェネレータです。 Gatsbyで生成されたサイトはSPA（Single Page Application）でかつPWA（Progressive Web Apps）なのでだいぶ高速です。 Markdownのファイルでブログを書けるのも便利。 通常、生成されたサイトはGitHub PagesやAmazon S3等に置くと思うのですが、そこに新しく登場したのがNetlifyです。 https://www.netlify.com/ フロントエンドのビルド・デプロイ・ホスティングをまるっとやってくれるサービスです。
ブログを WordPress + さくらのVPS から GatsbyJS + Netlify へ移行 - アカベコマイリ
ブログを WordPress + さくらのVPS から GatsbyJS + Netlify へ移行した。その作業メモをまとめる。 移行補助ツール WordPress から GatsbyJS へ移行する際に使用した補助ツールについて。 wpxml2md WordPress の記事を GatsbyJS 用に Markdown 化するためのツール。 wpxml2md - npm WordPress の Markdown 移行補助ツールを開発してみた これは WordPress の管理画面から出力した XML を解析して、記事単位の Markdown ファイルに変換するというもの。当初は変換ぐらいしか実装していなかったが、移行にともない機能不足を感じたので以下を追加した。 メタデータ埋め込み 記事 XML からタイトルや日付を解析 記事ファイル冒頭へ gatsby-transformer-rem
Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gatsby and Graphql - How to filter allMarkdownRemark by folder
GatsbyJSでカテゴリー機能を実装する
Gatsby.js + Netlify CMS + Githubを使ってブログを作成・公開する方法 - qrabit.log
これを知ってればGatsbyでサイトが作れるTips - Qiita