タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
POSTDの運用がリクルートからニジボックスに移管される際に、デザインのリニューアルと同時にコードベースをGatsby.jsに変更しました。 本記事では、運用移管に至るまでの過程を踏まえつつ、現在のPOSTDの構成を紹介します。 移管前のPOSTD 前述の通り、POSTDは株式会社リクルートのインキュベーション部門Media Technology Lab.（現新規事業開発部）で運用されていました。 最後に公開した記事は、2019年3月28日の「PHPはもうダメだ、PHP万歳！」となっています。 もともとはWordPressによる運用が行われていましたが、運用体制の関係で静的HTMLをFirebaseで公開する形式になっていました。 ニジボックスへの引き継ぎに伴い、記事の翻訳を始めとしたサイト運用を再開することになり、改めてCMSの形式に変換する必要が出てきます。 Gatsby.jsを選ぶ
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ
Next.jsはGatsby.jsを倒さない
最近Next.jsがめでたくv10がリリースされたこともあってNext.jsの名前を聞く機会は増えていると思います。 Next.jsの特徴で調べると「SSG+SSRが出来るフルスタックなフレームワーク」として出てきますが、そのことによってGatsby.jsは打倒されるのではないかという疑問をよく目にするようになっていると思います。 私個人の意見として、現状Next.jsがGatsby.jsを完全に置き換えられるかという問いに対してノーと言えます。 その理由は、各フレームワークがSSGを実現するその仕組みについてを知り強み弱みを理解することで納得できるものとなるでしょう。 各フレームワークによるSSGの実行プロセス 例えば、あなたがブログサービスを作りたいとして以下の要件を決めた場合、Next.jsとGatsby.jsでSSG面に関して実装の差を見比べましょう。 - url形式は /blog
個人で Gatsby.js を使い始めたのですが、検索して見つかる Gatsby.js の TypeScript 化についての記事の情報が少し古かったので、自分で書き直してみました。 順を追ってスターターパッケージを TypeScript 化していきます。 なお今回のコードは全て下記リポジトリにあります。 もし、何かエラーになった際は参照してみてください。 この記事は以下のバージョン時点の情報です。 Gatsby.js: 2.24.66 gatsby-plugin-typegen: 2.2.1 0. プロジェクトの作成 gatsby コマンドを使うめにgatsby-cliの追加。
タイトルの通り、Gatsby.js, TailwindCSS, Netlifyの組み合わせでフロント技術オンリーのフリー素材サイトを作ってみたので、使っている技術とサイトの紹介をしたいと思います。 Qiitaに書くかZennに書くか(同時にどちらにも投下するか)迷ったんですが、Zennにしました。 作ったものと動機 「FLAT SVG DESIGNS」というSVGアイコンやイラストを無料で配布する素材サイトを作成しました。アイコンはまだ130個ほどしかありませんが、順次追加していきます。アイコン作成からサイト作成まで全て一人でやってますので、更新はゆっくりになると思います。(1週間に10個が目標) FLAT SVG DESIGNS アイコンはこんな感じのデザインです。 ここがこだわり サイト全体でPNG形式などのラスター画像を使っているのはファビコンのみ。それ以外は全てSVGファイルで画像
Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。 Gatsby.jsとは React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsのメリット 従来通りHTML/CSS(+Gulp, Webpack)でコーディングする方法と比較した場合の最大のメリットは表示速度がめっちゃ速いことです。びっくりするくらい速いです。 その他のメリットとしては JSXを使うので、HTMLの記法等にミスがあったときにすぐに気が付くことができる プラグインが豊富(Markdownファイルを読み込む、PWA対応、etc) ヘッドレスCMSとの相性が良い Gatsby Themeを使って、既存のデザインを流用することができる カスタマイズが前提ならthemeは使わない方が良さそう などがあります。 セットア
Gatsby.js と AWS Amplify を使って爆速でブログサイトをデプロイする | DevelopersIO
概要 CX事業本部の佐藤です。 Gatsby.js という React ベースの静的サイトジェネレータがあります。 それを AWS Amplify でデプロイして爆速でブログサイトをデプロイできましたので、手順を記事にしたいと思います。 Gatsby.js とは https://www.gatsbyjs.org/ React のフレームワークの一種で、静的サイトジェネレータです。静的サイトジェネレータとは、 ブログの記事やWebページなどをあらかじめビルド時に生成しておき、デプロイ後はそれを表示するだけにすることで、 Webサイトが高速に動作するようにした技術です。 Gatsby.js を使うことで、Wordpress などの CMS や Markdown ファイル、DB などからデータを取得して、 それを事前にビルドしてWebページに変換してデプロイすることが可能です。 Gatsby.j
きっかけ 先日、会社の人にこの動画が面白いかもねと教えてもらいました。 Gatsby vs Next.js: Which does SSG Better? こちらの動画はタイトルの通り、Gatsby.jsとNext.jsのどちらがより良いSSG(=Static Site Generation)ができるのか？要するに静的サイトをいい感じに作れるのか？という話がされています。 この中で動画の主は最後に僕だったらNext.js使うね。という感じの発言をされており（多分）、全体的にNext.jsの方が使いやすいよ〜という感じで話されていました。（英語力的に多分） というわけで本当にそうなのかブログレベルですが試してみたので、そのときに感じた点などを共有したいと思います。 設計思想の違い まずは、両者の根本的な設計思想の違いについて触れたいと思います。 Gatsby.jsは機能拡張に対してプラグイン
Jamstack Advent Calendar 2020 の 1 日目の記事です。 最近 Next.js が凄い勢いで進化していますが、同じ React フレームワークの Gatsby.js も負けず劣らず新しい機能が追加されています。 今回は、先月公開された Gatsby.js の新しい API、 File System Route API について紹介します。 この記事は以下バージョン時点の情報です。 Gatsby.js: 2.25.4 File System Route APIとは？ File System Route API は、ブログの個別ページなど同レイアウトでデータが異なるページを作る際に、ファイル名を特定の表記とすることで動的にページを生成する API です。今までは gatsby-node.js で createPages で行ってたことを代替できます。 旧来の方式とF
Gatsby.js でマークダウン記法ブログを作る。 なんとなく、そうだ！プログラミングを勉強しよう！と軽率に考えたんですよ。 ポートフォリオ作るぞ！とか思って、やれ MERN だ SPA だ SQL だ AWS だ CI だとか……わああああああああああああああ、疲れました。 難しい。わかったような気がした次の瞬間から何もわからない。暗中模索。 なので、気分転換にGatsby.jsでブログ作ります。 すぐできるのでｵﾚﾂｴｰという気持ちになって精神に良いです。ｵﾚﾂｴｰ！！！ 自分は屑で、説明下手です。申し訳ございません！！先に謝罪をする文化！！！！ 自分用メモなので文章が糞。不快になります。 本当に無知なので、Gatsby についての説明などは一切できません。もちろん、React も、Node.js も、GraphQL も何もわからない。 素晴らしい記事や公式ドキュメントがあるので、是
静的サイト生成に特化したReactのフレームワークGatsby.jsですが、せっかくなら作ったサイトのホスティングまでさくっとやりたいなと。 ターミナルから簡単にビルド&S3へのデプロイができたので、その方法を紹介します。 前提 Macのターミナル Node.jsがローカルにインスロール済み AWSのアカウントを持っている 1. Gatsbyアプリの立ち上げ 何はともあれGatsby.jsのスターターをローカルで立ち上げましょう。 Gatsby.jsが入っていない人はインストール。 $ npm install -g gatsby-cli Gatsbyプロジェクトを新規で作成します。 $ gatsby new hello-world これでカレントディレクトリ直下にhello-worldというフォルダが作られますので移動します。 $ cd hello-world webサーバーを起動してみま
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
ReactフレームワークのGatsby.jsとNext.js、VueフレームワークのNuxt.js、これらの主要なJSフレームワークで静的サイトを構築して得た気づきをご紹介します。 【結論】どれか1つ選ぶならGatsby.js Nuxt.js、Next.js、Gatsby.jsの順番で使いました。技術レベルのブレもあるため、完全にフラットな視点で選ぶのが難しいのが本音ですが、どれか1つ選ぶならGatsby.jsにします。その後、Next.js、Nuxt.jsと続きます。 詳細は以下に続きます。 開発環境の違い Next.jsがベストです。Zero Config（ゼロコンフィグ）を謳っていて、文字通り「設定が不要」です。もちろん、拡張することもできます。 私が行った拡張はたった1つ。イメージのドメイン設定だけです。 // next.config.js module.exports = { i
Gatsby.jsを使って、jsonファイルから複数のページを生成する方法をまとめます。 Gatsby、情報自体はそこそこ豊富なんですが、日本語の情報が少ないですね。。 記事データをまとめたjsonファイルを作成 [ { "slug": "how-to-use-gatsby", "title": "【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた", "content": "Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト", "tags": ["React", "Gatsby"] }, { "slug": "learn-react", "title": "Reactの学習、今からやるならこうする", "conte
ヘッドレスCMSのContentfulではリッチテキストで文章を書くことができます。 今回はContentfulと組み合わせることが多い静的サイトフレームワークのGatsby.jsでリッチテキストを出力する方法を備忘録として記載しておきます。 前提 Contentful & Gatsbyですでにアプリを運用している 1. Contentfulでリッチテキストを投稿する Contentful側のContent Modelで「Rich text」というフィールドタイプが用意されています。 シチュエーションに応じて、エディタから不要なHTMLタグを隠すこともできます。 以上のフィールドを追加したのち記事を投稿しておいてください。 2. リッチテキストをレンダリングするプラグインのインストール Gatsby.js側で、プラグインをインストールします。 $ npm install @contentf
概要 Kentaro Matsushitaさんが開発されたOGP画像生成ライブラリ「catchy-image」を使用して、Gatsby.js製ブログにOGPを自動生成・設定する実装をしました。お手軽に記事タイトルに応じたOGP生成ができる素晴らしいライブラリです。gatsby-starter-blogをベースに構築したブログを想定し、導入までの作業をメモしておきます。 完成したOGP画像の例 記事のタイトルとサイト名、アイコンが記載されたシンプルなOGP画像が完成しました。 執筆時構成 node v12.15.0 gatsby 2.27.5 catchy-image 0.1.6 最新の情報はcatchy-imageリポジトリのREADMEをご参照ください。 手順 catchy-imageをインストール catchy-image パッケージをインストールします。 npm install --
華麗なるGatsby.jsの実践(styled-components/headの編集/404ページ/画像の使用) - Qiita
以前 gatsbyの公式チュートリアルを意訳しつつやったので、今回は、実際に業務で使用するにあたって 使いそうな機能について公式のドキュメント等を調べてみました。 この記事のタイトルをつけた後に気づいたんですが、 公式で上記の画像を発見しました。 華麗なるギャツビーがやはり由来なんでしょうか。 お品書き 実際業務で使いそうな機能をピックアップしたところ、以下のようになりました。 - styled-componentsを使いたい - head修正できるようにしたい - 404ページをカスタマイズしたい - gatsbyでの画像の扱いを知りたい 今回はhttps://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-default/ このスターターを使って進めます。 スターターを使用するために、以下のコマンドを実行します。 $ gatsby n
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
POSTDをGatsby.jsベースに変更しました | POSTD
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
Gatsby.jsのTypeScript化 2020
Gatsby.js, TailwindCSS, Netlifyでフリー素材サイト作ってみた
【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた - Qiita
Gatsby.jsとNext.jsはどちらが優秀か比較してみた。 - Qiita
Gatsby.jsの新機能「File System Route API」を試してみる
Gatsby.js でマークダウン記法ブログを作ってｵﾚﾂｴー！していく人生 - Qiita
Gatsby.jsで作ったサイトをさくっとS3でホスティングする | DevelopersIO
Gatsby.jsにreact-helmetを導入してhead要素（メタタグ）をカスタマイズする
Gatsby.jsとNext.jsとNuxt.jsを比較する
【Gatsby.js】単一のjsonファイルを元に複数のページを生成する - Qiita
Contentful & Gatsby.jsでリッチテキストを扱う | DevelopersIO
Gatsby.js製ブログで記事毎にOGP画像を自動生成する | kyabe.net
news.yahoo.co.jp
news.yahoo.co.jp
www.devex.com
www.asahi.com
lunch.news-vouge.com
www.city.kakogawa.lg.jp