htmldewi
Framework minimalis untuk membuat website seperti tahun 1999.
Persyaratan
- Komputer dengan internet, editor teks, dan browser web
- npm
Memulai
- Buka terminalnya
-
npm install -g @htmlgoddess/cli
Ini akan menginstal utilitas baris perintah. -
htmlgoddess create path/to/your/new/site - ikuti petunjuknya dan Anda akan segera aktif dan berjalan.
Yang Harus Dilakukan
- refactor: tes isolasi.
- tambahkan: perintah "host".
- tambahkan: perintah pilih gaya untuk memungkinkan pengguna mengubah tema setelah pembuatan.
- prestasi: Pemeriksa ejaan.
- prestasi: pengait komit otomatis untuk dipicu saat melakukan.
- prestasi: mengoreksi perintah.
- prestasi: perintah "domain".
- feat: dapat dieksekusi yang dapat diunduh.
- refactor: Tukar CNAME dengan konfigurasi yaml untuk hosting.
- tugas: liputan
- konversikan "dokumen" menjadi variabel yang dapat dikonfigurasi
- tugas: pastikan pengamat tidak membocorkan memori.
- bug: cli.action masih menghasilkan keluaran ke konsol selama pengujian.
- prestasi: GUI
Saya tidak tahu HTML apa pun
Tidak apa-apa. Lihat video ini untuk memulai.
Menu Baris Perintah
Ketika Anda menjalankan npm start dan itu akan memberi Anda opsi berikut.
Bagaimana cara kerjanya
- File di folder "src" dikompilasi (dicetak) menjadi file HTML statis di folder "docs".
- Folder
src/templates berisi template. Ini dikompilasi dengan folder konten untuk menghasilkan halaman HTML statis Anda. - Folder
src/content berisi konten situs Anda, yang disimpan dalam file html yang merupakan potongan kode HTML. - Saat Anda menjalankan
npm run print (atau memilih print dari menu terminal), itu akan mengkompilasi konten dan template Anda ke dalam file HTML statis dan membuat ulang folder docs. (CATATAN: Segala sesuatu di dokumen akan ditimpa jadi hanya simpan konten di direktori src Anda!) - Anda dapat menguji situs Anda secara lokal dengan menjalankan perintah "servis" dari menu.
- Saat Anda siap untuk menyebarkan situs Anda, lakukan saja
npm run save && npm run publish - Anda kemudian dapat mengarahkan server web Anda ke "dokumen" apakah itu Apache, halaman git, nginx, atau apa pun.
- Anda dapat menambahkan stylesheet apa pun yang menargetkan elemen HTML biasa dan itu akan berfungsi :)
Templat
- Tag pada template yang menutup sendiri seperti
<head /> atau <main /> akan mencari file template yang cocok dengan nama yang sama; baik direktori dengan indeks html seperti main/index.html atau hanya file main.html- Tag tidak harus berupa HTML standar. Jika Anda membuat template foo.html di folder templates, Anda dapat menyertakan tag
<foo /> dan itu akan menggantikan isi foo. - Kompilasi templat bersifat rekursif sehingga Anda dapat menggunakan templat di dalam templat, namun templat yang disarangkan harus berupa file yang terdapat di dalam atau berdekatan dengan templat induk. Kalau tidak, itu hanya akan diabaikan.
- Tag
<content/> bersifat khusus dan akan menarik templat dengan nama file yang sama (dengan direktori) atau templat utama ('templates/index.html). - Saat Anda membuat halaman yang Anda inginkan di direktori konten. Direktori yang berhubungan dengan sana akan muncul di situs Anda dengan jalur yang sama. Struktur ini memungkinkan untuk mengatur sendiri folder dan url.
Kendala
- Tidak ada JS
- Tidak ada atribut kecuali href dasar dll.
- Tidak ada kelas. Inilah yang memungkinkan Anda menambahkan stylesheet apa pun yang menargetkan vanilla css
- Tidak ada SASS/SCSS/KURANG. Ini tidak diperlukan dengan elemen HTML sederhana
- Tanpa React, Angular, atau apa pun.
- Atau tidak, Anda dapat meretas apa pun yang Anda inginkan.
Filsafat
HTML dirancang sederhana, dan bagi orang awam untuk membuat dan menggunakan sesuatu di internet. Web saat ini cukup mengagumkan, namun juga menjadi sangat kompleks dan meninggalkan banyak orang. CMS ini kembali ke dasar untuk memberikan orang cara mengekspresikan diri secara bebas dan mudah.
- Kerangka kerja ini mencoba memanfaatkan sebanyak mungkin teknologi dan standar yang ada.
- HTML digunakan untuk semuanya (seperti yang diperintahkan Dewi HTML) alih-alih tag template berpemilik dan sintaksis khusus lainnya. Sistem templating mencari tag HTML yang dapat menutup sendiri dan menggantinya dengan templat atau konten terkait.
- Sistem file dimanfaatkan untuk mencari/menamakan templat dan perutean url.
- Git berfungsi sebagai database sebenarnya untuk CMS bersama dengan file HTML dalam konten dan template.
- Situs "mencetak' ' ke folder "docs' ', dan kemudian Anda "memublikasikan" ke git, tempat Anda dapat mengatur halaman github. Ini agnostik terhadap server web sehingga Anda benar-benar dapat mengambil file di folder dokumen dan meletakkannya di mana pun Anda inginkan dan mengarahkan server web ke file tersebut.
- Tag dimaksudkan untuk tidak memerlukan kelas atau atribut. Hal ini memungkinkan tema baru dimasukkan dengan mulus. Anda dapat menganggap vanilla HTML sebagai antarmuka untuk menerapkan gaya.
- Penggunaan JavaScript tidak disarankan karena tidak diperlukan, meskipun tidak ada kerangka kerja yang menghalangi Anda menggunakannya.
- Anda dapat mengabaikan semua yang baru saja saya tulis dan melakukan apa pun yang Anda inginkan. Itu internet!
Masalah yang sering terjadi
- Ketergantungan bertingkah aneh:
Lerna melakukan beberapa hal untuk menghubungkan Dependensi. Jika Anda memasang modul baru dan semuanya berhenti berfungsi, coba lerna bootstrap dari root. - Direktori pengujian tidak dibersihkan. Jika pengujian gagal, hal ini mungkin menghalangi pembersihan direktori pengujian. Dalam hal ini jalankan
npm run clean-test-dir yang akan menghapusnya secara manual.
Berkontribusi
- jalankan tes di paket/cli untuk memastikan semuanya sudah habis
npm run test - Komit perubahan pada mono repo
npm run commit dan ikuti petunjuknya - lerna terbitkan --force-publish Ini akan mempublikasikan ke NPM serta mendorong tag ke git
