sveltekit static blog template

SvelteKit 静的ブログ テンプレート

SvelteKit で構築された、ブログおよびポートフォリオ Web サイト用の軽量でカスタマイズ可能なテンプレート。

これは、いくつかの目標を念頭に置いて構築されました。

• レスポンシブ デザイン: Web サイトは、あらゆるサイズの画面上で適切に表示され、適切に動作します。
• 高速: 動作するために必要なものだけを読み込みます。
• アダプティブ: デフォルトでほとんどのオペレーティング システム (デスクトップおよびモバイル) のダーク モードをサポートします。
• かわいい: アクセスしやすく、目にも楽しいデザインを持っています。

私は SvelteKit の助けを借りてこれを達成しました。 JavaScript はほとんど実行されておらず、実際には JS を無効にしても動作します。 JS は素晴らしいものですが、JS が必要でない場合を認識することが重要です。

デモサイト

テンプレートはデモ サイトでライブで見ることができます。さらに、Histoire ではすべてのコンポーネントを個別に確認できます。

ローカルでの構築と実行

ローカルで実行するには、次を実行するだけです。

 # First, install dependencies
npm install
# Then, run it on dev mode
npm run dev

これで、サイトはローカル マシンの http://localhost:5173/ と、ネットワーク上のローカル マシンの IP アドレスで利用できるようになります。モバイル OS でのテストに最適です。

歴史/物語集

私は、コンポーネントを個別に確認して開発できるようにするために、Vite ベースの Storybook の代替品である Histoire を使用しました。これを開くには、 npm run story:dev実行します。

画像の最適化

このウェブサイトでは、画像変換を使用して、サイト内で使用される画像を自動的に最適化します。これは、最適化されていない画像形式 (ロスレス PNG など) を使用している場合でも、 <img />の代わりに<Image />コンポーネントを使用している限り、画像を調べて画像を WebP および AVIF に変換することを意味します。 <img /> 。これはビルド時に行われるため、Web サイトをローカルで実行する場合は何も変わりません。

投稿の管理

すべての投稿は Markdown ファイルであり、MDsveX で処理されて、投稿内で Svelte コンポーネントを使用できるようになります。投稿の管理を容易にするために、優れた CMS のような UI を提供する Front Matter VS Code 拡張機能を強くお勧めします。

ホスティング

npm run build実行すると、Web サイトは静的サイトにコンパイルされます。つまり、ほぼどこでもホストできることになります。私がお勧めする無料の代替手段としては、GitHub Pages、Vercel、Netlify があります。