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 + TypeScript で技術ブログを書くための知見
Blog を作りました！！！！！ 会社を辞めて 5 ヶ月経とうとしており、ついに堕落しきった生活による危機感が生まれはじめました。 その危機感が結実したものがこの Blog です。 で、Blog を作ってみたものの書く内容が特にないので、まずはこのブログをどうやって作ったかについて書きます。 「こういう記法にちゃんと対応できてる？」を試す目的でもあります。 技術スタック 根幹になっているものは、 TypeScript Gatsby です。 元々は amdx + NextJS, もしくは完全自作 SSG を考えていたのですが、 ブログは完璧を目指しているといつまでも完成しない ということは知っているので、自分にとって自信があるツールとして Gatsby を選びました。 しかし、ただ使うだけなのはチャレンジ性がなかったので、TypeScript を使ってみることにしました。 昔の Gatsby
Gatsbyプラグイン45選 - Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
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/ フロントエンドのビルド・デプロイ・ホスティングをまるっとやってくれるサービスです。
Gatsbyでブログを作りました
こんにちは、ebikenです。 1年くらい前に作ったポートフォリオサイトを作り直してブログ機能をつけました。 色々はてなブログ、Qiita、note、Mediumとかも考えましたが、独自ドメインを使いたかったのと、フロントで遊べる場所に丁度いいなと思ったので自分で作ることにしました。 ブログ機能をつけた技術スタックや感想とかを書いていきます。 コードは公開しています。 ebkn/portfolio 技術スタック 今回はこんな感じになりました。 TypeScript React Gatsby styled components GitHub Actions Now GatsbyとNowについて軽く紹介します。 Gatsby gatsbyjs.org GitHub Gatsby is a free and open source framework based on React that he
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
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よりも多いんですよね、日本で使っている方をあ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gatsby Markdown Material TypeScript/TSX Responsive Blog Starter
Gatsby Starter CV
Gatsby V2 Starter Lumen
Gatsby Hello Friend
Gatsby Plugin Library | Search 3,000+ Plugins | Gatsby
Foundation
Intro.
Gatsby Developer Diary