Eleventy入門(第2回) - テンプレート・コードを部品化する
前回記事では、Eleventyでマークダウンベースの簡単なサイトを作成する方法をご紹介しました。 サイトがローンチして成長してくると、UIやコードに重複が発生してきます。 このような状況になると、部品化や再利用の仕組みが必要になってきます。 今回は、Eleventyで提供されている部品化テクニックを見ていきたいと思います。 テンプレートを部品化する # 前回はレイアウトファイルを親テンプレートとして作成し、基本的構造をマークダウンコンテンツに適用しました...
記事を読むEleventy入門(第1回) - 11tyで手早く静的サイトを作成する
本サイトは開設当初から静的サイトジェネレーター(SSG)としてEleventyを使っています。 もう1年以上使っていますが、特に大きな問題なく運用できています。 そんなEleventyが2023-02-08にv2.0となりました[1]。 ELEVENTY V2.0.0, THE STABLE RELEASE Eleventyはコンテンツ重視の静的サイト作成に大きなアドバンテージを持っていますが、特に日本では今ひとつ認知度がないと感じます...
記事を読むEleventyで生成したサイトでNetlify Edge Functionsを使ってみる
一般的にサイトジェネレータで作成したサイトは、特定の場所に静的リソースを配置し、CDN経由で配信することが多いかと思います。 昨今はNext.jsやNuxt等のハイブリッドフレームワークを使って、サーバーサイド側でページを生成するSSR（Server Side Rendering）も増えてきていますが、やはり静的リソースのみを配置するスタイルは何かと開発・運用しやすいと思います...
記事を読むNetlify CMSのワークフローでコンテンツ管理をする
当サイトも記事数が180を超え、執筆者も増えてきました。 現状はGitHubをNetlifyと連携させることで、プルリクエスト経由で記事公開をしてきました。 これでも問題はないのですが、そろそろCMS的な仕組みでGitに不慣れな人でも簡単に記事作成やサイト自体の設定変更ができないかなと思い始めました。 世の中的には、ヘッドレスCMSが流行っていると思います。 ヘッドレスCMSはWordPressのようにフロントエンド向けのUIを提供せずに、単純なコンテンツ管理機能のみを提供します...
記事を読む11tyで生成したマークダウン記事の画像を拡大する
早いものでデベロッパーサイトを開設して半年ほど経過しました。継続的に記事も公開し、もうすぐ100本に到達します。 今後は記事の執筆と並行して、サイト自体のUI/UX改善にも取り組んでいきたいと思います。 今回は改善要望として上がっていた記事の画像のズーム機能について対応しました。デベロッパーサイトなのでここではそのやり方も記事として紹介したいと思います。 現在このデベロッパーサイトでは、SSGツールのeleventyで、マークダウン記事をHTMLへと変換しています...
記事を読むeleventy-plugin-code-clipboard
eleventy-plugin-code-clipboardは、静的サイトジェネレータツールの1つであるeleventy(以下11ty)のカスタムプラグインです。 このプラグインは、マークダウンのコードブロックで生成されたものに対して、クリップボードコピー機能を提供するもので、本サイトでも使用されています。 プラグインは以下の2つの機能で構成されます。 markdown-it カスタムレンダラー # 11tyのマークダウンパーサー markdown-itのカスタムレンダラーです...
記事を読む
