SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜 - Qiita
概要 Next.js 9.3から getServerSideProps という仕組みが導入されました。 上記がそのドキュメントですが、これを読んで感動した私はつい語りたくなってしまいました、私情が多分に含まれております、ああそういう視点もあるんだくらいに見ていただければと思います。 僕自身は、SEOをあまり気にしないいわゆるSPAっぽいWebページのNext.jsでの開発を1年ちょいくらい業務でやっていて、今もNext.jsユーザーです。 「getServerSidePropsって何が良いの？なんで生まれたの？」 「なんでgetInitialPropsは非推奨なの？」 「Vercel製のSWRってライブラリあるけど、あれ何？」 「てかgetServerSidePropsとSWRって関係あるの？」 この辺の疑問をお持ちのNext.jsユーザーの方は是非ご一読ください。 ※過剰な煽りタイトルで
GitHub - getmeli/meli: Platform for deploying static sites and frontend applications easily. Automatic SSL, deploy previews, reverse proxy, and more.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
静的サイトジェネレータ「Astro 4.0」正式リリース。デバッグを容易にするDev Toolbarが登場、キャッシュ導入でビルド時間が80％短縮
静的サイトジェネレータ「Astro 4.0」正式リリース。デバッグを容易にするDev Toolbarが登場、キャッシュ導入でビルド時間が80％短縮 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 4.0」が正式にリリースされました。 今年（2023年）9月にAstro 3.0がリリースされたばかりで、速いペースでのバージョンアップが続いています。 Astro 4.0 is here! Introducing the Astro Dev Toolbar — your new companion for local development. Inspect, audit, and extend your dev environment in the browser. Plus: 80% faster builds, i18n routing
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
2023/02/03 に開催された、 #kyotojs での発表時の登壇資料です。
静的サイトジェネレータのAstro、「Server Islands」を実験的実装。サーバで動的生成したコンポーネントをWebページ表示後に組み込み
静的サイトジェネレータのAstro、「Server Islands」を実験的実装。サーバで動的生成したコンポーネントをWebページ表示後に組み込み オープンソースで開発されている静的サイトジェネレータ「Astro」は、新機能の「Server Islands」を実験的実装した新バージョン「Astro 4.12」をリリースしました。 Full details on the blog:https://t.co/jd8GfFwbjB — Astro (@astrodotbuild) July 18, 2024 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWe
Zola
Your one-stop static site engine Forget dependencies. Everything you need in one binary. Get started No dependencies Zola comes as a single executable with Sass compilation, syntax highlighting, table of contents and many other features that traditionally require setting up a dev environment or adding some JavaScript libraries to your site. Blazing fast The average site will be generated in less t
最近作っている amdx という markdown コンパイラとそのツール郡を紹介します。 GitHub はここ mizchi/amdx このサイト自体も、 amdxg というツールで作られています。 ゴールをどこに設定したか パフォーマンスを突き詰めると、ブログは静的サイトジェネレータで AMP 対応するのが一番と考えた next.js/SSG export + AMP が便利だったので、next.js 上でコンパイルすることを前提に、静的解析を行う webpack loader を作ることにした mdx の parser を借りて、 .mdx をロードすると React Component として振る舞いつつ、他の mdx を import できると、長い文章を書くときにファイル分割できて便利なのでは Markdown プレビュー高速化+ランタイム最小化のために、AST(JSON) 生
GitHub Action Hero: Shohei Ueda
CommunityOpen SourceGitHub Action Hero: Shohei UedaWe spoke with our latest GitHub Action Hero, Shohei Ueda, about the story behind Hugo setup, mdbook Action, and a few other projects. With GitHub Actions, you’re able to automate more of your workflow by connecting the tools you know and love—giving you more freedom to spend time innovating. You can deploy to any cloud, build containers, automate
The Static Site Guide
This is a book about creating and publishing static websites using HTML, CSS, and the Hugo static site generator. It’s still a work in progress, but you can read the draft chapters here. Table of ContentsIntroductionMaking Your First Web PagePublishing Your Web PageSprucing Things UpCreating a Static Website Using HugoCustomizing Your Hugo WebsiteUsing a Custom Domain NameImplementing Version Cont
Slinkity
To eleventy and beyond Follow along on Twitter for project updates ❤️ ⚠️ Slinkity is no longer maintained. The project owner (@bholmesdev) now works on Astro full-time. If you want to build component-driven content sites, give Astro a try! If you're committed to 11ty and want to use client components, consider 11ty's WebC project. Slinkity is the simplest way to handle styles and component framewo
Zenn & Hugo in Obsidian : OHZフローによるナレッジベースとアウトプットコンテンツの完全統括
はじめに Zenn や Hugo を Obsidian で利用して運用するためのアイデアとその方法をまとめました。スクラップ上でまとめたもの を記事化してます (追加の内容あり)。 日本ではまだ広く知られていない PKM 周りの概念や新たなツールの紹介も含むの分かりづらいところや説明が長くなってしまう部分もありますが興味を持っていただければ幸いです。 また、ここで紹介するやり方は Obsidian の公式で紹介されてないような応用的な使い方になるので潜在的な問題があるかもしれません。自己責任の元で適宜各ディレクトリのバックアップを行いながら環境構築をしてください。(自分の環境では現在のところ特に問題は発生していません)
How Astro Works Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro. In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML
Astro(Static Site Genarator) 好きなフレームワークで高速WEBサイト構築 | Reffect
高速なコンテンツ重視の WEB サイトを構築したいという人向けに新たな Static Site Generator(静的サイトジェネレーター:SSG)が登場しました。その名前は Astro。Next.js や Remix などの React フレームワークと同様に注目度の高いフレームワークの一つです。ブログサイトやオープソースのサイト(例：create-t3-app)などで利用され活発に更新が行われているので 2024年8月20日最新のバージョンはのAstro4.14.2です。 リリース当初は Static Site Generator(静的サイトジェネレーター:SSG)として登場した Astroですが現在はSSR(Sever Side Rendring)も備え, Static Site Generatorではなくフルスタックフレームワークとして開発が行われています。 本文書では公開当初は
GitHub - adityaathalye/shite: The little hot-reloadin' static site maker from shell.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
2024年8月22日、Xserverより新サービス「Xserver Static」がリリースされました。 Xserver Staticとは？「Xserver Static」は静的コンテンツの運営に特化したクラウドホスティングサービスで、高速かつ安全性に優れたサーバー環境を、広告なしで無料（！）で利用できるそうです。 Xserver Staticの特長静的コンテンツ専用サーバであるHTML、CSS、JavaScriptなどの静的コンテンツの運営に特化しており、Next.jsやAstroなどのWebフレームワークのデプロイ先としても利用できます（ただし、静的サイト生成に限ります）。もちろん、microCMSを使用したSSGサイトのデプロイも可能です。ただし、WordPressなどの動的サイトには対応していません。 CI/CDの機能はないNext.jsやAstroなどのWebフレームワークからデ
HugoでもTwitterCard画像を自動生成したい
最近、Twitterを眺めているとイイ感じのサムネが設定されたブログ記事を見かけるようになった。 OGP1やTwitterCardl2にはそのような生成機能が無いので各々画像を生成しているのだと思われるが、 Hugoにもそのような機能は無い。ということで、この土日にGoで画像生成するコマンドを書いた。 どう生成するか考えるHugoは静的サイトジェネレータなので、一般的なブログサービスのように動的なことは考えず、 単純にサイト生成時に画像も生成すれば良いだろう。 では、どう生成すべきか？ImageMagicを使う方法や、Hugoでサムネ用ページを生成しそれをCode 1のように Headless Chrome を使ってスクショを撮る方法が考えられる。しかし、サムネをスクショするだけに起動するには少々重い。 docker run --rm -u $(id -u $USER) --cap-add
MkDocsによるドキュメント作成
📌 はじめに mkdocs は 静的サイトジェネレータです。コンテンツは基本的に markdown 形式で記述したソースファイルになります。またHTML形式のファイルを使うことも出来ます。この記事では Windows で個人的な最低限の作成環境をまとめました。 MkDocs 📌 mkdocs のインストール python をインストールします。今回は 3.9 で試しました。なお、私の環境は Windows+miniconda で構築しています。 次に pip を使って mkdocs をインストールします。 pip install mkdocs 動作環境は次のとおりです。 python 3.9.5 mkdocs 1.4.2 mkdocs-material 8.5.11 mkdocs-material-extentions 1.1.1 pymdown-extensions 9.9 📌 プ
GitHub - osteele/gojekyll: A fast Go implementation of the Jekyll blogging engine
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
3ファイル追加してGitHub ActionsでHugoにレコメンド記事を表示する | Democratizing Data
こんにちは、早いものでもう40の大台が迫ってくる誕生日を迎えました。前日にブースターショットを打ったので、一日中ほとんど寝込んでいました。必要な人のために、例のリストを置いておきます。 さて、Hugoにはキーワードベースの関連記事の表示をする機能があります。 しかし、キーワードベースの関連記事も悪くはないのですが、折角なので自分で関連記事のレコメンドをしてみたくないですか？ そう思っていたら、 takuti さんの Prelims というオープンソースを見つけました。 Prelimsは、Hugo（やJekyll）のFront matterと呼ばれるメタデータの部分にキーワードやレコメンド記事を足してくれるものになります。 レコメンドの方式自体は、今実装されているのは古典的なTF-IDFを用いたコンテンツベースの類似文書を出してくる方式ですが、Front matterを後から処理してレコメン
GitHub - natemoo-re/microsite: Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに こんにちは！株式会社Rivine のつかもとです！ 普段はエンジニアとして、主にフルリモートの開発支援案件に従事しながら Rivine の取締役としても日々粛々と働いております。 前回の記事では、 Hugo のブログ開発について執筆しましたが、 今回は、弊社ホームページの利用技術でもある 「Cloudflare Pages」 を使って ハンズオン形式にて、前回の記事で作成した Hugo のブログを公開してみたいと思います。 ※ 本記事タイトルの「5分もあれば十分だ」という表現について ※ 5分もあれば十分だ という少しネタを交えた表現をしておりますが、トータルの作業時間については、各開発環境やネットワーク環境、作業スピードによって変動するかと思います。 あくまで、筆者が本記事の手順を滞りなく、スムーズに作業した上での 目安時間 だとご認識いただけますと幸いです。 今回公開するブロ
2020年1月15日、株式会社メルカリにて「Mercari x Merpay Frontend Tech Talk vol.4」が開催されました。フロントエンドの技術に興味があるエンジニアが集まり、各々の知見を共有します。プレゼンテーション「Pros and Cons of SSR and JAMStack」に登壇したのは、メルペイのSasaki Yutaka氏。JAMstackを使ったマイクロサービスの高速化と、そこから得られた知見について語りました。講演資料はこちら キャンペーンのマイクロサービスの高速化 _sskyu氏：では、「Pros and Cons of SSR and JAMstack」と題して発表させていただきます。 私はSasaki Yutakaと申します。メルペイには一昨年の9月1日に入社しまして、フロントエンドエンジニアをやっております。 今日話す内容ですが、去年の8
Supports any template engineCreate pages using Markdown, Vento, Nunjucks, Liquid, JSX, TSX, JavaScript, TypeScript, Pug, Eta… or add your own engine easily. page.mdpage.vtopage.njkpage.jsxpage.page.jspage.page.tspage.pugpage.eta # Galician municipalities - O Pino - Tordoia - Ordes - Cedeira <h1>{{ title }}</h1> <ul> {{ for item of items }} <li>{{ item }}</li> {{ /for }} </ul> <h1>{{ title }}</h1>
📝 Rich Text Formatting Author in reStructuredText or MyST Markdown to create highly structured technical documents, including tables, highlighted code blocks, mathematical notations, and more. 🔗 Powerful Cross-Referencing Create cross-references within your project, and even across different projects. Include references to sections, figures, tables, citations, glossaries, code objects, and more.
Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機能が本格的に導入されたので、Next.js は SSR はもちろんのこと、SSG も対応可能となった。） SSR を理解する上で、Client Side Rendering または SPA と対比しながら整理を行った。 Client Side Rendering SSR SSG まとめ Client Side Rendering Client Side Rendering は、SPA（= Single Page Application）とほぼ同意義である。 ブラウザからリクエストされると、
Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 | Amazon Web Services
Amazon Web Services ブログ Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 人気の React フレームワークである Next.js は、開発者がモダンな Web アプリケーションを構築する方法を変えました。Next.js は、Static Site Generation (SSG) や Server Side Rendering (SSR) といった強力な機能を提供し、アプリケーションのパフォーマンスとユーザー体験を最適化します。本記事では、SSG と SSR の主な違い、利点、いつどちらかを選択するか、それぞれのアプローチで AWS Amplify を使ってデプロイする方法を説明します。Amplify は、フロントエンドの Web やモバイル開発者が AWS 上でフルスタックのアプリケーションを簡単に
先日この secon.dev で使う用に、いわゆる関連エントリーを出力する cli を書いたのだけど、世の中に有る静的サイトジェネレータの殆どは、どこかのファイルパスに .md, .html 等の markdown や html で書いた記事データを元に html を生成するものが大半なことに気づいたので、ひょっとしたら利用する奇特な人が現れるかも、と類似ドキュメントを出力する cli として公開した。 https://github.com/hotchpotch/similar-documents-cli pip install -U similar-documents でインストールできる この cli の引数に、関連エントリーとして類推して欲しいファイルをガッと渡すと、json 形式でファイルごとに関連度が高いファイルを表示する。このサイト(secon.dev)の記事ファイルは公開して
「Client Side Rendering = SPA」の文脈で使われることが多い気がする。 ブラウザ上でJavaScriptを実行してDOMを生成、マウントし、コンテンツを表示させる。SPAアプリの場合、以下のような中身が空のHTMLファイルを使うことが多い。 <html> <head> <title>sample</title> </head> <body> <div id="app"></div> <script src="/js/bundle.js"></script> </body> </html> 上記のHTMLファイルはルートディレクトリ直下に置くのが普通なため、/以外にリクエストが送られると404となる。開発時はwebpack-dev-serverがよしなに面倒を見てくれるが、ホスティング先ではそうではないので、初めてSPAでアプリを作ってホスティングしたときに戸惑うやつ
GitHub - Elderjs/elderjs: Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
Elder.js is an opinionated static site generator and web framework built with SEO in mind. (Supports SSR and Static Site Generation.) Full Docs Template Plugins Features: Build hooks allow you to plug into any part of entire page generation process and customize as needed. A Highly Optimized Build Process: that will span as many CPU cores as you can throw at it to make building your site as fast a
GitHub - ChrisPenner/slick: Static site generator built on Shake configured in Haskell
Want to get started quickly? Check out the Slick site template! Slick is a static site generator written and configured using Haskell. It's the spiritual successor to my previous static-site generator project SitePipe; but is faster, simpler, and more easily used in combination with other tools. Slick provides a small set of tools and combinators for building static websites on top of the Shake bu
GatsbyとWordPressを使用したウェブサイト構築の概要（高速で静的） WordPressベースの動的ウェブサイトは次のように機能します。訪問者がブラウザーでURLを入力するか、リンクをクリックしてサイトにアクセスすると、ウェブサーバーにリクエストが送信されます。 サーバーは、該当のデータベースクエリで必要なデータを収集し、ブラウザが表示するHTMLファイルを生成します。一方、静的サイトは、上記の応答をサーバー上のフラットファイルに保存し、すぐに訪問者に配信します。 静的サイトジェネレーターは長い間使用されてきましたが、最近人気が高まっています。本ステップバイステップガイドでは、WordPressと静的サイトジェネレーターであるGatsbyの統合について説明します。 Gatsbyとは？ WordPressは動的なウェブサイトを作成しますが、実行するにはサーバー上にPHP、MySQL
Pagefind は静的サイトであれば（HTML ファイルさえあれば）、基本的にどのようなサイトであっても以下の 2 ステップで導入できます。 Pagefind をインストールし、検索用ファイルを生成する Pagefind の UI を読み込み、インスタンスを作成する まず、検索用のインデックスファイルを生成します。本サイトのフレームワークは Astro を使用しているので、Astro のビルドと連携させるために npm パッケージをインストールします。 Pagefind の npm パッケージをインストールするコマンド npm install pagefind 次に、Astro のビルド後に Pagefind CLI を実行するように、npm-scripts を記述します。 package.json に記述する npm-scripts の例 { "scripts": { "build":
Hugo v0.60.0 が公開されましたが、 Markdown のレタリングエンジンが変わったために 表示が変わっている場合があります。 Hugo v0.60.0 より Markdown のレタリングエンジン goldmark が採用されています。 これにより、Markdown の解釈が変わったものがあります。 例えば行末に \ を入れると改行するのですが…… test**test**\ **test**test このように \ の前に強調の ** がある場合、\ が変換されずに出力されてしまいます。 <p>test<strong>test</strong>\ <strong>test</strong>test</p> これで .md ファイルを多く修正する状態が発生してしまう恐れがあるため、 Hugo の issue に報告しました。 それよりも大事な事がありまして、 .md ファイル
hugoを使って爆速でブログを作成する
hugoとは？ hugo(ヒューゴ）とは、goで作られたwebサイトを作成するフレームワークです。 公式サイトのトップページで「ウェブサイトを構築するための世界最速のフレームワーク」書いてあるように速さを売りにした静的サイトジェネレーターのようです。 公式ページ 使用できるテーマも数多く揃えられており、柔軟性もあるとのことだったので今回はhugoを使って実際にブログを作成してみました。 先に触ってみた感想なのですが、下記画像のように本当に多くのテーマが用意されており選ぶだけで楽しかったです。また、テーマのカスタマイズも簡単に行なえ自分好みにできるので結構体験良かったです。 テーマ一覧 もととなるテーマも豊富にあり、結構簡単にカスタマイズもできるので、企業サイトやショップサイト、LPやオウンドメディアとか作るのもいいかもしれないですね。 blogの作成 今回はhugoで静的サイトを作り、ロリ
チャリティーカンファレンス沖縄2020 Vol.1の発表資料です。
GitHub - ashishb/wp2hugo: The best WordPress to Hugo migrator (written in Go)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事は最終更新日から一定の時間が経過しています。情報が古くなっている可能性があるため注意してください。 2年前に静的サイトジェネレータ（SSG）を比較しました。やはり動的プログラム（代表例 WordPress）のようにセキュリティリスクとイタチごっこになる仕組みと違って、純粋なHTMLページでしかないSSGは運用面の負担が少なくていいなと身にしみて感じます。 静的サイトジェネレーターの比較とHugoに決めた理由（2019年版） | Web勉強ノートブック 以前結論を出した通り静的サイトジェネレーター Hugo で全く問題なかったのですが、サイトのレイアウトを変更しようと思ったこのタイミングで他の技術にも触れておこうと思い最近の動向（2021年10月時点）をチェックしましたので、改めてアップデートしたいと思います。 なお、静的サイトジェネレーター全体の動向比較というよりも、特定の条件に絞
SPA, SSR, SSGの違いについて図解でまとめてみた
Webフロントエンドの領域にいるとよく耳にするのがSPA, SSR, SSGなどのややこしい略語たち。 なんとなく概要は分かってるけど自分の言葉で説明する自信がなかったので備忘録としてまとめておきます。 図解でできるだけ分かりやすくまとめられたと思うので、参考にどうぞ。 SPA（Single Page Application） SPAはSingle Page Applicationの略称。 ブラウザから初回リクエストが来ると、サーバーは、JSのビルドファイルと最小限のHTMLファイルを返却する。実際はもっと色々あるがざっくりとしたHTMLファイルの内容は以下のような感じ。 <html> <head> <title>タイトル</title> </head> <body> <div id="app"></div> <script src="/js/bundle.js"></script> </
Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。 Gatsby.jsとは React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsのメリット 従来通りHTML/CSS(+Gulp, Webpack)でコーディングする方法と比較した場合の最大のメリットは表示速度がめっちゃ速いことです。びっくりするくらい速いです。 その他のメリットとしては JSXを使うので、HTMLの記法等にミスがあったときにすぐに気が付くことができる プラグインが豊富(Markdownファイルを読み込む、PWA対応、etc) ヘッドレスCMSとの相性が良い Gatsby Themeを使って、既存のデザインを流用することができる カスタマイズが前提ならthemeは使わない方が良さそう などがあります。 セットア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MDX eXtended = MDXX | AMP対応 Markdown Compiler と静的サイトジェネレーター
Introducing Astro: Ship Less JavaScript | Astro
microCMSを使用した静的サイトをXserver Staticへデプロイしてみる
【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ
メルペイの事例に学ぶ、SSRとJAMstackのメリット・デメリット
Lume, the static site generator for Deno
Overview — Sphinx documentation
Client Side Rendering（SPA）・SSR・SSG を整理してみた - 7839
静的サイトジェネレータ向けに類似ドキュメントを出力する cli を作った - A Day in the Life
SSR、SSG、Client Side Renderingの違いをまとめた - Qiita
GatsbyとWordPressを使用したウェブサイト構築の概要（高速で静的）
静的サイトに特化した検索ライブラリ Pagefind を試す | grip on minds
Hugo v0.60.0 更新後、Markdown に HTML を入れている場合。
CSR / SSR / SSGの動向2020
GitHub - potato4d/dodai: Static Site Generator
静的サイトジェネレーターを比較して再びHugoにした理由（2021年版）
【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた - Qiita
nyakomeshi.com
seiji.vp.bex.jp
shonenjumpplus.com
vook.vc
iptv.community
youtu.be