Generator situs statis kecil yang memuat ulang panas dari shell. Mengasumsikan Bash 4.4+.
PERINGATAN: Inilah yak!
Tugas shite
adalah membantu saya membuat situs web saya: https://evalapply.org Jadi, cakupan shite
, rangkaian fitur (salah), pemolesan akan selalu berada pada tingkat produksi, di mana produksi "berfungsi pada mesin saya )" :)
Daftar isi
Ya, shite
bertujuan untuk membuat website.
Ini adalah sistem penerbitan kecil yang terbuat dari alur kerja yang disalurkan, secara opsional didorong oleh aliran peristiwa file (untuk bit hotreloadin).
Ini tidak akan mengejutkan seorang hacker Perl/PHP dari abad yang lalu.
Ia ada karena seseorang bersiul nada-nada konyol dan mencukur yak.
Pada dasarnya inilah fungsinya (ref: fungsi shite_templating_publish_sources
).
cat " ${watch_dir} /sources/ ${url_slug} " |
__shite_templating_compile_source_to_html ${file_type} |
__shite_templating_wrap_content_html ${content_type} |
__shite_templating_wrap_page_html |
${html_formatter_fn} |
tee " ${watch_dir} /public/ ${slug} .html "
# The complete "business logic" is 300-ish lines as of this comment,
# counted as all lines except comments and blank lines.
grep -E -v " s?#|^$ "
./bin/{events,metadata,templating,utils,hotreload}.sh |
wc -l
Sebelum kamu terlalu bersemangat, izinkan aku memperingatkanmu bahwa lisensi MIT berarti aku tidak perlu peduli jika pembuat omong kosong kecil ini gagal membuat omong kosongmu berfungsi. Berkontribusi penuh dengan lebih banyak peringatan.
Dan yang tak kalah pentingnya, dengan ini saya putuskan bahwa semua teks di sini dibaca dalam bahasa Sean Connery voish.
Dalam mimpi shite
, aku menginginkan...
Yang terpenting, menjaganya ("logika bisnis") tetap kecil . Cukup kecil untuk melakukan cache, debug, dan refactor di kepala saya.
Untuk menginstal dan menggunakan tanpa izin pengguna super.
Untuk menghindari rantai alat dan membangun ketergantungan. Tidak ada permata / npms / venvs / apa yang Anda miliki. Jadi, Bash adalah bahasanya, karena Bash ada dimana-mana. Dan paket standar seperti pandoc
atau tidy
, ketika seseorang membutuhkan fungsionalitas tingkat lanjut yang spesifik .
Templat bebas ketergantungan dengan HTML biasa yang diatur dalam dokumen lama yang bagus.
Sistem metadata sederhana, spasi nama konten, organisasi aset statis, dll.
Server web opsional (atau proses server apa pun). Bagaimanapun, kami bertujuan untuk situs statis, yang berfungsi baik dengan navigasi file://
.
Untuk membuatnya dari bagian-bagian kecil, dapat disusun, berfungsi murni, seperti alat Unix, karena saya sangat menyukai hal-hal semacam itu.
Untuk memberi saya alur kerja edit-simpan-bangun-pratinjau yang mulus seperti REPL.
Saya tidak sengaja memulai kembali blog setelah lama absen. Sebelum saya bisa menyampaikan kata-kata ke cloud, saya bingung dengan Generator Situs Statis "modern". Karena WordPress adalah abad terakhir (atau begitulah yang saya katakan pada diri saya sendiri). Kemudian saya merasa terganggu dengan keajaiban bangunan templating SSG Jamstack yang dipesan lebih dahulu. Sekarang saya berada di jalur gelap untuk membuat ini. Itu sedang ditulis di blog di: shite: situs statis dari shell: bagian 1/2
Saya menggunakan shite terutama dalam mode "hotreload", terutama untuk menulis posting (dalam orgmode) dan mempratinjaunya secara langsung (di Firefox). Yang kurang penting, untuk melihat pratinjau panas modifikasi pada gaya dan/atau templat halaman. Paling tidak, setelah mengerjakan sebuah postingan tanpa henti, saya menggunakannya dalam mode "jangan hotreload" untuk melakukan pembangunan kembali situs secara penuh.
contoh demo sialan di bawah ini.
Pada dasarnya ini berarti bahwa jika saya membuat, memperbarui, menghapus file apa pun di bawah sources
, file tersebut harus diterjemahkan secara otomatis ke HTML, dipublikasikan secara lokal ke public
, dan menyebabkan navigasi halaman yang sesuai atau memuat ulang tindakan di browser web, tempat situs saya terbuka.
Panggil skrip "utama" di sesi terminal baru yang bersih atau panel tmux.
./shite.sh
Ini berguna untuk membuka file indeks di Firefox, sesuai dengan default yang saya tetapkan dalam array shite_global_data
di ./shite.sh
.
Di Emacs atau Vim Anda, buka beberapa file konten di bawah sources
. Edit, simpan, dan lihat konten muncul di browser. (Ya menentukan Emacs/Vim itu konyol, karena saya memicu tindakan panas berdasarkan peristiwa yang tidak diberitahukan. Tampaknya editor yang berbeda melakukan pembaruan file secara berbeda. Saya menggunakan Emacs atau Vim, jadi saya memperhatikan peristiwa yang ditimbulkannya, sehingga berfungsi di mesin saya. : )).
Seringkali browser mengingat posisi scroll yang rapi. Terkadang hotreloadnya jelek. Jadi saya cukup menekan spasi dan menyimpan file konten untuk memicu hotreload lagi.
Buka beberapa aset statis, seperti stylesheet CSS. Ubah sesuatu, seperti nilai warna latar belakang. Simpan dan lihat perubahan warnanya di browser.
Sesuaikan beberapa fragmen template di templates.sh
---misalnya, template posting blog. Kemudian beralih ke beberapa file konten posting blog dan modifikasi untuk memicu pembuatan halaman dengan template yang dimodifikasi (misalnya tekan spasi dan simpan).
Ini adalah peretasan. Halaman root index.org di bawah sumber adalah spesial. Jika saya memodifikasinya, berarti saya ingin membangun kembali daftar posting untuk halaman indeks, untuk tag, dan juga membangun kembali file meta terkait seperti RSS feed, peta situs, robots.txt dll.
Dalam sesi terminal baru yang bersih, panggil shite.sh
dengan "no", dan opsional dengan base_url
lingkungan penerapan:
Bangun kembali situs lengkap untuk file:/// navigasi "lokal". Benar-benar "tanpa server" :)
./shite.sh " no "
Bangun kembali situs lengkap untuk publikasi di bawah domain saya.
./shite.sh " no " " https://evalapply.org "
Bendera ini mengubah perilaku sistem.
SHITE_BUILD
ke "hot" akan menjalankan sistem acara dalam mode "monitor", yang pada gilirannya mendorong perilaku hotreload. Menyetelnya ke "tidak" akan menekan hotreload browser.SHITE_DEBUG_TEMPLATES
ke "debug" akan menyebabkan templat diambil terlebih dahulu, sebelum memublikasikan konten sumber templat apa pun. shite
cukup Unixy di dalamnya. Atau begitulah yang ingin saya pikirkan.
Kode adalah Bash gaya pemrograman fungsional. Semuanya adalah suatu fungsi. Sebagian besar fungsi adalah fungsi murni---alat Unix kecil itu sendiri. Kebanyakan logika berorientasi pada saluran pipa. Ini bekerja dengan sangat baik, karena Shell bukanlah tempat yang buruk untuk FP.
Saya juga menginginkan pengalaman interaktif langsung seperti REPL saat menulis dengan shite
, karena saya suka bekerja dalam runtime langsung/interaktif seperti Clojure dan Emacs.
Jadi, shite
telah menjadi sistem berbasis peristiwa yang sepenuhnya reaktif yang mampu melakukan hot build-and-reload-on-save.
Ada tiga ruang nama direktori utama:
sources
yang menampung konten "sumber", seperti postingan blog yang ditulis dalam mode org, serta CSS, Javascript, dan aset statis lainnya.public
atas artefak yang disusun/dibangunbin
untuk kode bangunan sialan itu Skema penamaan URL mengikuti struktur subdirektori di bawah sources
, dan direplikasi apa adanya di bawah struktur direktori pubilic
. Karena ini adalah skema penspasian nama URL standar, skema ini juga berlaku langsung pada konten yang dipublikasikan. Seperti:
file:///absolute/path/to/shite/posts/slug/index.html
http://localhost:8080/posts/slug/index.html
https://your-domain-name.com/posts/slug/index.html
Semua fungsi "publik" diberi namespace shite_the_func_name
. Semua fungsi "pribadi" diberi namespace sebagai __shite_the_func_name
.
Fungsi ada untuk:
Dalam sesi terminal baru yang bersih:
source ./bin/utils_dev.sh
shitTABTAB
atau __shiTABTAB
pada baris perintah untuk pelengkapan otomatis.type -a func_name
untuk mencetak definisi fungsi dan membaca API-nya.shite_global_data
dan shite_page_data
sesuai kebutuhan. Templat ada untuk fragmen halaman (seperti header, footer, navigasi), dan untuk definisi halaman penuh (seperti templat halaman default). Ini ditulis sebagai HTML biasa yang dibungkus dengan heredocs. ./bin/templates.sh
menyediakan ini.
Templat diisi dengan data variabel dari berbagai sumber:
shite_global_data
berisi metadata seluruh situs, dan shite_page_data
berisi metadata spesifik halaman. Beberapa proses luar harus mengatur array ini terlebih dahulu sebelum memproses halaman mana pun.Misalnya, satu halaman penuh dapat dibuat sebagai berikut:
cat ./sample/hello.md |
pandoc -f markdown -t html |
cat << EOF
<!DOCTYPE html>
<html>
<head>
$( shite_template_common_meta )
$( shite_template_common_links )
${shite_page_data[canonical_url]}
</head>
<body ${shite_page_data[page_id]} >
$( shite_template_common_header )
<main>
$( cat - )
</main>
$( shite_template_common_footer )
</body>
</html>
EOF
sistem metadata shite
didefinisikan sebagai pasangan nilai kunci. Kunci memberi nama item metadata, dan akan dikaitkan dengan nilai apa pun dari jenis tersebut. Contoh di bawah ini.
Seperti disebutkan sebelumnya, metadata run-time dibawa ke lingkungan oleh array asosiatif shite_global_data
dan shite_page_data
. Ini mungkin diisi dengan konstruksi langsung, serta diperbarui dari sumber eksternal.
Setiap halaman dapat menentukan metadatanya sendiri di "bagian depan" di bagian atas halaman. Ini akan digunakan sebagai tambahan metadata halaman yang berasal dari sumber lain.
shite
mengharapkan kita untuk menulis materi depan menggunakan sintaksis yang kompatibel dengan tipe konten yang diberikan, sebagai berikut.
Gunakan baris komentar # SHITE_META
untuk membatasi metadata gaya organisasi yang juga harus shite
sebagai metadata spesifik laman.
# SHITE_META
#+title: This is a Title
#+slug: this/is/a/slug
#+date: Friday 26 August 2022 03:38:01 PM IST
#+tags: foo bar baz quxx
# SHITE_META
#+more_org_metadata: but not processed as shite metadata
#+still_more_org_metadata: and still not processed as shite metadata
* this is a top level heading
this is some orgmode content
#+TOC: headlines 1 local
** this is a sub heading
- this is a point
- this is another point
- a third point
Tulis materi depan YAML gaya Jekyll, kotak di antara ---
pemisah.
---
TITLE : This is a Title
slug : this/is/a/slug
DATE : Friday 26 August 2022 03:38:01 PM IST
TAGS : foo BAR baz QUXX
---
# this is a heading
this is some markdown content
## this is a subheading
- this is a point
- this is another point
- a third point
Kita cukup menggunakan tag <meta>
standar, yang mematuhi konvensi ini: <meta name="KEY" content="value">
.
< meta name =" TITLE " content =" This is a Title " >
< meta name =" slug " content =" this/is/a/slug " >
< meta name =" DATE " content =" Friday 26 August 2022 03:38:01 PM IST " >
< meta name =" TAGS " content =" foo BAR baz QUXX " >
< h1 > This is a heading </ h1 >
< p > This is some text </ p >
< h2 > This is a subheading </ h2 >
< p >
< ul >
< li > This is a point </ li >
< li > This is another point. </ li >
< li > This is a third point. </ li >
</ ul >
</ p >
Ini dia Yak!
Sepenuhnya dimanjakan oleh alur kerja interaktif langsung gaya Clojure/Lisp/Spreadsheet yang memuaskan, saya juga ingin memuat ulang dan menavigasi panas dalam pembuatan omong kosong.
Namun sepertinya tidak ada server/alat pengembangan web mandiri yang tidak ingin saya mengunduh separuh Internet yang dikenal sebagai dependensi. Seperti yang saya katakan sebelumnya, sesuatu yang sangat tidak ingin saya lakukan.
DuckSearch menghadirkan mode tidak sabar pada Emacs, yang cukup panas, tetapi saya tidak ingin melakukan hardwire pada Emacs saya. Untungnya, ini juga menghadirkan gelombang otak menarik yang menampilkan 'inotify-tools' dan 'xdotool': github.com/traviscross/inotify-refresh
Salinan panas!
Karena apa yang bisa lebih panas daripada komputer saya yang membanting tombol F5 untuk saya? Seolah-olah ia tahu apa yang sebenarnya kuinginkan jauh di lubuk hatiku.
Subsistem peristiwa bersifat ortogonal terhadap segala sesuatu yang lain, dan menyatu dengan sistem lainnya.
Desainnya adalah arsitektur streaming standar rawa, yaitu. perhatikan peristiwa sistem file, lalu filter, hapus duplikat, analisis, dan rutekan (tee) ke pemroses peristiwa yang berbeda. Saat ini hanya ada dua prosesor; satu untuk mengkompilasi dan mempublikasikan halaman atau aset yang terkait dengan peristiwa tersebut, yang lain untuk memuat ulang browser (atau navigasi panas) tergantung pada peristiwa yang sama.
Secara umum ini:
# detect file events
__shite_detect_changes ${watch_dir} ' create,modify,close_write,moved_to,delete ' |
__shite_events_gen_csv ${watch_dir} |
# hot-compile-and-publish content, HTML, static, etc.
tee >( shite_templating_publish_sources > /dev/null ) |
# browser hot-reload
tee >( __shite_hot_cmd_public_events ${window_id} ${base_url} |
__shite_hot_cmd_exec )
Peristiwa hanyalah aliran data CSV yang disusun seperti ini:
unix_epoch_seconds,event_type,base_dir,sub_dir,url_slug,file_type,content_type `
Kami menggunakan bagian berbeda dari rekaman peristiwa untuk menyebabkan berbagai jenis tindakan.
Skrip inotify-refresh yang tertaut di atas mencoba menyegarkan serangkaian jendela browser secara berkala . Namun, kami ingin sangat bersemangat. Setiap tindakan edit pada file konten dan/atau aset statis kami harus memicu tindakan hot reload/navigasi di tab browser yang menampilkan konten kami.
Kami ingin menentukan skenario pemuatan ulang yang berbeda: Bucket yang saling eksklusif dan lengkap secara kolektif tempat kami dapat memetakan peristiwa file yang ingin kami pantau.
Jika kita melakukan ini, maka kita dapat memodelkan pembaruan sebagai semacam log tulis-depan, memasukkan peristiwa melalui saluran analisis, mengaitkannya dengan skenario pencocokan tepat, dan akhirnya menyebabkan tindakan. Misalnya:
Segarkan tab saat ini kapan
Pulang kapan
Navigasikan ke konten kapan
Karena kita membuat komputer meniru tindakan keyboard kita sendiri, hal ini dapat mengacaukan tindakan pribadi kita. Jika kita tetap menulis omong kosong kita di editor teks, dan membiarkan komputer melakukan hotreloady, kita tidak akan merasa terganggu.
Ada banyak Yak di dunia.
Untuk mojo penerbitan multi-situs yang benar-benar meresap:
shite
harus tersedia di PATH sayaIni adalah yak kecil. Saya mungkin akan segera memilikinya.
Jelas seseorang dapat menggunakan pekerjaan CI dari host git populer untuk memicu pembangunan shite
. Namun mengapa menggunakan teknologi abad ini yang kikuk, padahal kita sudah maju ke tingkat seni di akhir tahun 1900-an... sepenuhnya streaming dan sepenuhnya reaktif?
Selain sarkasam, saya tidak mengerti mengapa sistem acara yang sama tidak dapat digunakan untuk menambahkan dukungan hot-deploy, pada mesin jarak jauh yang saya jalankan.
Di kotak jarak jauh:
sources
situs diabadikansources
(tanpa pengawasan browser).Di kotak lokal saya:
https://mydomain.com/posts/hello/index.html
Lakukan sesuatu melalui SSH untuk mengembalikan penyegaran browser ke kotak lokal, jika terjadi penyebaran panas ke server jauh.
Mungkin beberapa skenario pengaturan waktu/Teardown "Pengembangan/Drafting"? Mungkin fungsi 'dev_server' yang kami gunakan untuk memulai sesi penulisan baru?
Jika Anda sudah sampai di sini, dan masih ingin berkontribusi...
Mengapa?
Mengapa, demi semua yang suci dan baik, Anda mau melakukannya? Bukankah sudah jelas bahwa ini adalah perbuatan orang bodoh? Pernahkah Anda mendengar bahwa Bash Bahkan Bukan Bahasa Pemrograman yang Sebenarnya? Dan bukankah sudah jelas bahwa PR Anda akan merana selamanya, dan komentar Anda akan sia-sia?
Ya, mengirim tambalan adalah ide yang buruk.
Tapi tolong kirimkan email padaku harapan dan impianmu tentang pembuat kotoranmu! Saya membaca email dengan nama depan titik nama belakang saya di gmail.
Bersama-sama kita bisa bersiul lagu-lagu konyol, dan bersama-sama mencukur yak kita masing-masing, dengan cara kita masing-masing.
Semoga Sumbernya menyertai kita.
Karya ini memiliki lisensi ganda di bawah lisensi MIT dan lisensi CC By-SA 4.0.
Pengenal-Lisensi SPDX: mit ATAU cc-by-sa-4.0