sveltekit static blog template

Templat Blog Statis SvelteKit

Templat ringan dan dapat disesuaikan untuk blog dan situs portofolio, dibuat dengan SvelteKit.

Itu dibangun dengan beberapa tujuan:

• Desain responsif: situs web terlihat dan berperilaku baik di semua ukuran layar;
• Cepat: hanya memuat apa yang diperlukan agar dapat berfungsi;
• Adaptif: mendukung mode gelap dari sebagian besar sistem operasi secara default (desktop dan seluler);
• Cantik: memiliki desain menyenangkan yang mudah diakses dan enak dipandang.

Saya mencapai ini dengan bantuan SvelteKit. Hampir tidak ada JavaScript yang berjalan, dan ini benar-benar berfungsi dengan JS yang dinonaktifkan! Meskipun JS mengagumkan, penting untuk mengetahui kapan JS tidak diperlukan.

Situs demo

Anda dapat melihat templatenya langsung di situs demo. Selain itu, Anda dapat memeriksa semua komponen secara terpisah di Histoire.

Membangun & Menjalankan Secara Lokal

Untuk menjalankannya secara lokal, Anda cukup menjalankan:

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

Situs tersebut sekarang seharusnya tersedia di http://localhost:5173/ di mesin lokal Anda, dan alamat IP mesin lokal di jaringan Anda—bagus untuk pengujian pada OS seluler.

Sejarah / Buku Cerita

Saya telah menggunakan Histoire, alternatif Buku Cerita berbasis Vite untuk dapat melihat dan mengembangkan komponen secara terpisah. Untuk membukanya, jalankan npm run story:dev .

Optimasi Gambar

Situs web ini menggunakan transmutasi gambar untuk mengoptimalkan gambar yang digunakan di situs secara otomatis. Artinya, meskipun Anda menggunakan format gambar yang tidak optimal (seperti PNG lossless), format tersebut akan menelusuri gambar dan mengonversi gambar ke WebP dan AVIF untuk Anda, selama Anda menggunakan komponen <Image /> dan bukan <img /> . Ini dilakukan pada build, sehingga tidak mengubah apa pun saat menjalankan situs web secara lokal.

Mengelola Postingan

Semua postingan adalah file Markdown yang diproses dengan MDsveX untuk memungkinkan penggunaan komponen Svelte di dalamnya. Untuk mempermudah mengelola postingan, saya sangat merekomendasikan ekstensi Front Matter VS Code, yang memberi Anda UI mirip CMS yang bagus.

Tuan rumah

Saat Anda menjalankan npm run build , situs web akan dikompilasi menjadi situs statis, yang berarti Anda dapat menghostingnya di mana saja. Beberapa alternatif gratis yang saya rekomendasikan adalah GitHub Pages, Vercel dan Netlify.