[Cloudflare Pages]Cache Rulesを設定してwebサイトを高速化する
最近はJamStackサイトのホスティングサービスにCloudflare Pagesを採用する方が増えていると思います。 特に設定を入れることなく高速に動作するのが特徴ですが、Cache Rulesの設定をすることでwebサイトをさらに高速化することができます。ここでは設定方法について記載します。 ※Cloudflare Pagesに限らず、Cloudflareの全サービスで有効な手順です 現状の確認 JamStackサイトの任意のページにアクセスし、ブラウザの開発者ツールでレスポンスヘッダを確認します。 このとき、以下の様にCf-Cache-StatusにDYNAMICが設定されていたり、そもそもCf-Cache-Statusが存在しない場合はエッジキャッシュが有効になっておらず、オリジンサーバーがレスポンスを返却しています。 更新頻度が少ないブログサイト等では、積極的にキャッシュを利用
![[Cloudflare Pages]Cache Rulesを設定してwebサイトを高速化する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0ca1806c4be75695b99dd61c12014a1cd91cd43/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rJR9sc6C--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCloudflare%252520Pages%25255DCache%252520Rules%2525E3%252582%252592%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%252597%2525E3%252581%2525A6web%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E3%252582%252592%2525E9%2525AB%252598%2525E9%252580%25259F%2525E5%25258C%252596%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aebifran%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzE1NmU1ZGY5M2IuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
[2023年]Next.js + eslint周りの設定
更新履歴 2024年3月31日 → npm scriptsについて追記しました。 動機 リンター周りの設定で理解が曖昧な箇所があったので、 クリアにして諸々の設定を見直したい と考えたからです。 リンターや、フォーマッターで他人の設定をコピペして設定している人も多いかと思います。 それだと応用が効かなかったり、古い設定をそのまま使用することになってしまいます。 方針 最小限の設定から足りないものを足していくスタイル 魔改造しない これはやっといた方がいいものだけに絞る 一個一個噛み砕いて、設定していく 成果物 こちらに成果物のリポジトリを用意しました。 記事を読むのは面倒な人はこちらからどうぞ。 commitは記事の順番にそっているので、記事の流れに沿って設定できます。 (1)Next.jsをインストール
![[2023年]Next.js + eslint周りの設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/3d357d05e01bd7fccb69a7c021836ee78f09ac70/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--dVtQfZD3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2023%2525E5%2525B9%2525B4%25255DNext.js%252520%25252B%252520eslint%2525E5%252591%2525A8%2525E3%252582%25258A%2525E3%252581%2525AE%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AHTMLGO%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hqc01qa3F3b0kycWV0ZTJVTHJPVDZva3hXWFV3NzlPNTJWemZlSGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Sonner
TypesYou can customize the type of toast you want to render, and pass an options object as the second argument.
Starship: Cross-Shell Prompt
互換性優先一般的なほとんどのOSの一般的なほとんどのシェル上で動作します。 あらゆるところで使用してください！
2023年のシェル環境構築
tl;dr fig starship zsh fzf sheldon なぜ vscode の .vscode/tasks.json が fishと非常に相性が悪い。とくに fish-nvm を使っていると、fish 経由のパス実行時に node と npm へパスが通らない。 そもそも fish を使っていた理由は autocomplete を快適にするためだったが、1年ぐらい Fig を使っていて、補完はこれを任せていいと気づいた。 Fig はこういうやつ そもそも fish の拡張コマンドを使わないように生活していた。方言を覚えたくない。というか bash 拡張や zsh 拡張もあんまり覚えたくない。
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
Pagefind | Pagefind — Static low-bandwidth search at scale
Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. Pagefind runs after Hugo, Eleventy, Jekyll, Next, Astro, SvelteKit, or any other website framework. The installation process is always the same: Pagefind only requires a folder containing the built static files of yo
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
Root Zone Database
The Root Zone Database represents the delegation details of top-level domains, including gTLDs such as .com, and country-code TLDs such as .uk. As the manager of the DNS root zone, we are responsible for coordinating these delegations in accordance with our policies and procedures. Much of this data is also available via the WHOIS protocol at whois.iana.org.
Whois の Domain Status について - eggshell blue
みなさん、ドメイン名*1取ってますか？最近は ICANN が小銭稼ぎに始めたクソみたいな新 gTLD 制度が広まってしまったおかげで、安いドメイン名が跋扈した結果ゴミ以下のまとめサイトやいかがでしたかブログが至る所に生えてしまってネットの治安はもう最悪、本当にどうしようもないですね！逆に、ドメイン名ベースのゴミブログフィルターが捗るので、ある意味では良かったのかもしれません、ポジティブに考えれば。 さて、気になるドメイン名があればすぐ Whois しちゃうことも多いと思いますが、そこに記載される情報を気にしている人って案外少ないんじゃないでしょうか。意外にも Whois サーバーの返す "Domain Status" に関して日本語でまとまった資料がなかったので、まとめておこうと思います。 本稿では特に旧来の gTLD によるドメイン名、すなわち .com/.net/.org であるドメイ
🔥 Miniflare · Miniflare
🔥 MiniflareMiniflare is a simulator for developing and testing Cloudflare WorkersOpen external link. It's written in TypeScript, and runs your code in a sandbox implementing Workers' runtime APIs. 🎉 Fun: develop workers easily with detailed logging, file watching and pretty error pages supporting source maps.🔋 Full-featured: supports most Workers features, including KV, Durable Objects, WebSock
Cloudflare WorkersのKVやD1のBindings取り出してテストを書く
Cloudflare WorkersはWorkers内で利用できるデータベースであるD1、オブジェクトストレージであるR2などのサービスに接続することができます。 ただ、通常の場合はこれらはWorkers越しに利用するものであり、開発時の確認が手間です。適当なエンドポイントを作ってPostmanで雑に叩くことで挙動確認できるものの、少し面倒です。 今回はテスト用ライブラリであるMiniflare v3を利用してKVやD1などのBindingsを取り出して、ローカルで試し書きしやすくします。 サンプルリポジトリは下記です。 試した時のスクラップは下記です。 準備 プロジェクトの雛形を作ってVitestの設定を行います。 wrangler initで雛形を作成していたときはテストファイルが作成されていましたが、新しいコマンドの方では作成されないため、自分で作成する必要があります。 pnpm c
uzimaru's Blog
新しいブログの構成どうも、@uzimaru0000です。 ブログを新しくしたので、その構成について説明します。（n度目の新しいブログ） ブログの構成技術的な構成は以下の通りです。 CloudFlare Pages でホスティングAstro でビルド記事は Markdown で書かれたものが R2 にアップロード図にするとこんな感じ Astroブログ自体は、Astro で実装されています。 リポジトリはこちら Astro 側では、アクセスされてきた記事の Markdown を R2 から取得して、marked を利用して HTML に変換しています tsimport fm from "front-matter"; import Entry from "../../components/Entry.astro"; import Layout from "../../components/Lay
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Complex Tree
[Bug]: Command/Combobox TypeError and Unclickable/Disabled items, cmdk breaking change · Issue #2944 · shadcn-ui/ui
Lucide Icons
Can findAll() directly get plain objects? · Issue #6950 · sequelize/sequelize
Radix UI
shadcn/ui
Documentation | Framer for Developers
