teeny

Teeny: generator situs statis sederhana

️ Penafian: Ini adalah alat yang saya bangun dalam beberapa jam untuk menghasilkan blog pribadi saya yakkomilat.github.io. Itu tidak banyak membantu sekarang dan mungkin tidak akan pernah.

? Awal yang cepat

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

Untuk contoh proyek menggunakan Teeny, lihat repo blog pribadi saya.

Latar belakang

Anda dapat membaca tentang motivasi saya untuk membangun Teeny di posting blog ini berjudul "Why I Built My Own Static Site Generator".

Perintah yang didukung

Inisialisasi proyek mungil di direktori saat ini

teeny init

Bangun file html statis dan tambahkan ke public/

teeny build

Mulailah server mungil lokal yang mendengarkan perubahan file

teeny develop

? Cara kerjanya

Teeny adalah generator situs statis super sederhana yang dibangun sesuai kebutuhan saya dan kebutuhan saya saja.

Yang dilakukan hanyalah menghasilkan halaman berdasarkan templat HTML dan konten penurunan harga.

Itu sangat sedikit dan sangat berpendapat ( baca: Saya terlalu malas untuk membangun kustomisasi/penangan bersyarat ), tetapi telah memungkinkan saya untuk membangun blog yang saya senang dengan sangat cepat.

Pada dasarnya, sebenarnya hanya ada 2 konsep yang perlu Anda pikirkan: templat dan halaman.

Template

Templat adalah HTML biasa dan harus ditambahkan ke templates/ subdirektori.

Mereka dapat berisi elemen dengan page-content ID, di mana Teeny menambahkan HTML yang dihasilkan dengan mem-parsing konten penurunan harga.

Halaman

Markdown adalah warga negara kelas satu di Teeny, jadi semua halaman situs web Anda ditentukan oleh file markdown.

File tersebut tidak perlu memiliki konten yang sebenarnya, jadi jika Anda ingin halaman didefinisikan murni di HTML, Anda hanya perlu membuat templat yang dirujuk dari file halaman.

Untuk menentukan templat apa yang harus digunakan halaman, Anda dapat menentukannya di frontmats halaman, seperti itu:

 ---
template: blog
---

Dalam contoh di atas, Teeny akan mencari templat yang disebut blog.html . Jika tidak ada template yang ditentukan, Teeny mencari file default.html dalam templates/ dan menggunakannya.

Contoh penggunaan

Berikut adalah contoh Teeny di tempat kerja.

Untuk memulai proyek yang mungil, jalankan teeny init . Ini akan membuat yang berikut di direktori Anda saat ini:

 .
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

Jika Anda kemudian menjalankan teeny build , Anda akan berakhir dengan ini:

 .
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

index.md menggunakan templat homepage , dan bersama -sama mereka menghasilkan index.html . Seperti standar dengan SSG lainnya, file statis disajikan dari public/ .

Anda juga akan melihat main.js dipindahkan ke public/ juga. Teeny benar-benar akan mengambil semua file non-template dan non-halaman dari pages/ , templates/ , dan static/ dan menyalinnya ke public/ , mengikuti struktur yang sama dari direktori asal.

Alasan untuk ini adalah bahwa saya sebenarnya tidak ingin memiliki impor "sihir", di mana Anda harus mengimpor aset statis dari jalur yang tidak sesuai dengan struktur direktori yang sebenarnya. Akibatnya, saya memutuskan bahwa file statis hanya akan hidup di dalam templates/ dan pages/ sesuai kebutuhan.

Kemudian saya menyerah pada pendekatan static/ direktori, karena mungkin ada aset yang ingin digunakan oleh kedua halaman dan templat. Impor dari static/ adalah "sihir", yang berarti Anda perlu memikirkan output dari teeny build agar mereka bekerja.

Perintah terakhir yang didukung Teeny adalah teeny develop . Ini membuat server http ke file server dari public/ subdirektori.

Ini mendengarkan perubahan pada file dan memperbarui file statis dengan cepat (naif, hanya dengan membangun kembali semuanya setiap kali mendeteksi perubahan).

? Potensi perbaikan di masa depan

Saya ingin tetap mungil mungkin. Saya sengaja menempatkan semua kode dalam satu file sebagai pengingat untuk diri saya sendiri bahwa ini seharusnya menjadi alat sederhana bagi saya untuk membangun blog statis sederhana dengan cepat.

Namun, itu bisa menggunakan beberapa peningkatan "pengalaman pengembang", seperti pendekatan yang dioptimalkan untuk teeny develop alih -alih membangun kembali segalanya secara naif, serta beberapa opsi penyesuaian yang lebih baik.