「島」のデザインパターンを使用してブログを構築します。静的な最新のWebサイトを生成するSQLiteデータベース駆動型のバックエンド。
スクリプトは、サイト上のすべてのページに完全にレンダリングされたHTMLドキュメントとDOMスニペットの両方を作成するデータベースをループします。 Nginxはリクエストを読み取り、 hx-request
ヘッダーの存在に基づいてどちらか一方を提供します。 hx-boost
Ajaxリクエストにすべてのアンカータグを自動的にホイストするために使用され、魔法を実現します。応答ドキュメントには、HTMXが認識し、ページに適用される<title>
タグが含まれています。
すべてのビルドコマンドはBUNを使用して実行されます。
bun install
必要なすべての依存関係を引き下げます。bun edit
WysiWygデータベース管理用にバックエンドサーバーを実行します。bun run init
、 dist
フォルダー構造を構築し、レンダリングされたサイトのファイルを所定の位置に移動します。bun htmx
タイプスクリプトを実行して、サイトのHTMLアセットを実際に生成します。bun css
、PostCSSスクリプトを実行して、TailWindSCSを使用してサイトのスタイリングを生成および最適化します。bun start
Runs Init、HTMX、およびCSS。サイトのコンテンツは、投稿、カテゴリ、タグ、およびそれらを相関させるリレーショナルメタデータテーブルを含む4テーブルSQLiteデータベースから生成されます。データベースロジックは、src/モデルに存在します。
html/口ひげテンプレートはlive:src/views
メインスタイルシートは、SRC/UI/Theme.cssです。私はここで「間違った」尾を使っていることを知っています。
使用されるグローバルドメインを定義する2つのファイルがあります。 1つはバックエンドエディター用です。もう1つはブログ自体です。それらは、httpフォールバックサポートの//localhost
にデフォルトです。
WebベースのWYSIWYGエディターはbun edit
実行することでアクセスできます。編集者は、投稿とそのメタデータの追加、編集、削除、およびカテゴリとタグ自体をサポートしています。デフォルトのポートとホスト名(localhost:8999)は、src/server.tsで変更できます。
nginxサンプル構成は、nginxディレクトリで利用できます。唯一の実際の「魔法」は、サイト利用可能な例でHX-Requestヘッダーの存在に関するルートディレクトリに追加されることです。
このプロジェクトのv1.0は完了です!現在、https://blog.xe.roで私のブログに動力を供給しています
(私はこのプロジェクトを呼び出すことを考えていましたtnthumbs b/cそれは使用して構築されています:typeScript nginx tailwindcss htmx unix口ひげbun sqlite)
私のブログのコンテンツを含むこのリポジトリのすべてのファイルは、CC0 / Kopimiリリースされます!情報の自由の精神で、私はあなたがこのプロジェクトであなたが好きなことをフォーク、変更、変更、共有、またはすることをお勧めします! ^c^v