Chances are, if you’ve used Next.js on Netlify, you’ve encountered either the next-on-netlify npm package, or the Next.js Build Plugin to enable some of its Node-driven features. Today, we’re happy to announce that the two have become one, to form the Essential Next.js Plugin! With this plugin, you enable features like: Support for getServerSideProps and getStaticProps with fallbacks (via Netlify
https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本？PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね？と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。（それでも長いけど） はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ
仕事で Netlify にデプロイしたSPAの読み込みが遅いので原因を調査してほしい、という依頼を受けてウェブパフォーマンス調査を行った。顧客から許可をもらって、この記事ではNetlifyに対してどういう調査をしたのかを書く。 結論だけをまず書くと、NetlifyのCDNのファイル配信パフォーマンスは日本国内からだと非常に悪い。パフォーマンスを改善させるためには、Netlifyに直接アクセスさせるのではなく、前段に他のCDNやキャッシュサーバを挟んだりするほうがいいだろう。 調査の前提 日本国内からのみの調査 サイトには静的なファイルをデプロイしているのみ 該当するNetlifyにデプロイしたSPAをブラウザで試しに開いてみると、確かに初回の読み込みのパフォーマンスがめちゃくちゃ悪い。 Chrome Devtoolsを開いてネットワークタブでどういうふうにリソースの読み込みを行っているのか
WordPress adoption is massive. So why would a WordPress site consider moving to JAMstack? In this technical case study, Sarah Drasner will cover what an actual WordPress migration looks like, using Smashing Magazine itself! She’ll talk through the gains and losses, the things she wishes she knew earlier, and what she was surprised by. Let’s dig in! This article has been kindly supported by our dea
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱ってお
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
GitHubにブックマークをコミットして管理できるはてなブックマークみたいなブックマークシステムを書きました。 詳しいモチベーションなどについては次のスライドで発表しています。 スライド: ブックマーク管理システム: 動くアプリをとにかく早く安く作ろう はてなブックマークのAPIが2019/5/31ぐらいエラーを返すようになって困ったので自分用のブックマークの仕組みを突貫で作りました。 （はてなブックマーク APIは2019/6/3には直ってました。） 逆にじっくり開発していくアプリについては次のスライドで話しています。 スライド: 考えながらクライアントサイドのウェブアプリケーションを作る話 azu/asocial-bookmark: Personal Bookmark System. socialじゃないのでasocial bookmarkです。 特に運用の費用的なコストはゼロにしたか
Hugoでブログを書いていてずっと欲しかったブログカードをshortcodeで実装してみました。 はてなブログでURLを「埋め込み」形式で貼り付けたときのイメージを目指します。 以下の流れでやっていきます。 指定したURLのogp情報を取得するNetlify Functionを作成Netlify Functionから取得したogp情報を元にブログカードを生成するshortcodeを作成ブログ記事からshortcodeを呼び出す取得する情報当ブログにも設置していますがheadタグ下のmetaタグから必要な情報を取得します。 記事の「タイトル」「アイキャッチ画像」「記事の説明」が今回取得したいものになります。 Twitter Cardからも欲しい情報は取得できますが今回はogpタグから取得します。 <meta name="description" content="Mac OSのDockerで
動機 僕はYoutubeが好きでよく見ます。 色々なYoutuberの考えを知ることができて勉強になるからです。 そして僕はミニマリストなので、ミニマリスト関係の人気動画を毎日チェックしたいなと思いました。 作るもの 指定のキーワード※に関する最新の人気動画のリストを表示するサイト。 ※今回は「ミニマリスト」 なお自動更新であり無料である。 実はこれだけなら、Youtubeのサイトの検索結果ページをブックマークしておけば済む話です。 例：検索結果のページ 今回は勉強のため自分でサイトを作ります。 また自分のサイトなら、レイアウトや検索条件のカスタマイズができるようになります。 利用する技術、サービス Reactベース静的サイトジェネレータGatsby 高機能ホスティングサービスNetlify Netlify Functions Node.js node-youtube cron-job.o
前書き Netlify Functionsの入門記事になります。 導入するにあたり色々調べても日本語の記事が少なかったり、Nuxt.jsと組み合わせてどうたらみたいなNetlify Functionsの事に絞られてない記事が多かったので自分用の備忘録も兼ねて。 前提としてJavaScriptチョット書ける、npm使える位の人からを対象とした記事です。 この記事を読むと ・Netlify Functionsの使い方が何となく分かるようになる。 ・ローカルでNetlify Functionsのエミュレートが出来るようになる。 ・Netlify Functionsを介して外部のAPIとやり取り出来るようになる。 ・Netlifyでの環境変数の設定の仕方が分かるようになる。 Netlify Functions is 何 Netlifyが提供しているアドオンの1つ。 **FaaS（Function
これまでGo言語の静的サイトジェネレータであるHugoを使用してNetlifyにホスティングする方法をご紹介してきました。今回は、FaaS（Function as a Service）であるNetlify Functionsをご紹介します。また、改めてご紹介しますが、HugoとNetlify Functionsを組み合わせることで、WordPressのようなインタラクティブなサイトを構築することも可能です。 Netlify Functionsの実行基盤はAWS Lambdaです。ただし、無償プランでは以下の制限があります（いずれかの制限に達した時点で使用できなくなります）。開発者向け、個人向け用途としては十分です。GitHubやGitLabのリポジトリとNetlifyのアカウントがあれば、いますぐに始めることができます。 125,000 リクエスト/月 100 時間/月 サンプルを交えて、
まずは作ったサイトを貼っておきます。 https://wp-nuxt-for-netlify.netlify.com/ いかがですか？現在住んでいるオーストラリアのADSLな爆遅回線でも、爆速です。 WordPress は heteml のレンタルサーバーですよ？ 感動しすぎたので、徒然なるままに〜。 ざっくり構成 WordPress側 リニューアル中の家族ブログ（ https://nishida.lol ） Heteml レンタルサーバー（月額 2000円） Heteml で無料SSL WP REST API でGET APIだけ利用 https://v2.wp-api.org/ フロント側 Nuxt Nuxt.js 1.0.0 nuxt generate で静的ファイル生成 netlify にホスティング https://www.netlify.com/ GitHub 上で nuxt
Nuxt, netlify, Firebase を使ったWebサービス開発と個人開発における技術選定のポイントJavaScriptsentryFirebaseNetlifyNuxt 技術構成はこんな感じで作りました。 Nuxtというよりかは個人開発における技術選定のポイントを主体に解説した記事です。 これから個人開発をやろうとしている人の参考になれば幸いです。 どんなWebサービス？ Google Calendar の表示/非表示を一括で切り替えるWebサービス。 ※ゲームとかでよくある装備マイセットのGoogleカレンダー版です。 G Suite を導入している企業だとカレンダー画面が会議室や他のユーザーの予定で溢れてしまいます。 TV会議ができる会議室のセットや同じチームメンバーのカレンダーセットをつくり、セットごとの予定をカレンダーのTOP画面で目視で確認できるようになります！ 触っ
はじめに今までは、静的サイトジェネレータのHexoで書き出したページをGitHub Pagesにデプロイしていました。静的ジェネレータは色んな物がありますが、代表例を挙げると以下のようなプログラムがあります。2017年現在ではHugoが流行っているようです。 Jekyll(Ruby) Hugo(Go Lang) Hexo(Node.js) ←これ使ってる Middleman(Ruby+Node.js) Octopress(Ruby) Gatsby(Node.js) ホスティングサービスの話題に戻りますが、GitHubからNetlifyへの移行後は、Hexoで書き出したサイトをZipファイルで圧縮して送信し、Netlifyへデプロイしています。実際の処理はhexo-deployer-netlifyというプラグインで自動化されています。 GitHub Pagesは、サーバー維持費が無料でありな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
