create static site

create static site

Kategori lainnya

1.0.0

Unduh

Buat Situs Statis

Buat situs web statis tanpa konfigurasi build.

Ringkasan

 npx create-static-site my-site --template hugo
cd my-site
npm start

(npx hadir dengan npm 5.2+ dan lebih tinggi)

Kemudian buka http://localhost:3000/ untuk melihat aplikasi Anda.

Membuat Situs Statis

Anda harus memiliki Node >= 6 di mesin pengembangan lokal Anda . Anda dapat menggunakan nvm (macOS/Linux) atau nvm-windows untuk dengan mudah berpindah versi Node antar proyek yang berbeda.

Untuk membuat aplikasi baru, jalankan:

npx create-static-site my-site --template [template]

Ganti [template] dengan hugo atau jekyll .

Ini akan membuat direktori bernama my-site di dalam folder saat ini.
Di dalam direktori itu, ia akan menghasilkan struktur proyek awal dan menginstal dependensi transitif:

 my-site
├── LICENSE
├── node_modules
├── package.json
├── README.md
├── static-scripts.config.js
├── .browserslistrc
├── .eslintrc.yml
├── .gitignore
├── .postcssrc.js
├── .stylelintrc.yml
├── site/ # Depends on the static site generator
└── src/
    ├── css/
    │   ├── styles.css
    │   └── imports
    │       └── resets.css
    ├── img/
    │   └── svg/
    │       ├── bitbucket.svg
    │       ├── github.svg
    │       └── gitlab.svg
    └── js/
        ├── scripts.js
        └── imports/
            └── index.js

Tidak ada konfigurasi atau struktur folder yang rumit, hanya file yang Anda perlukan untuk membangun situs Anda.
Setelah instalasi selesai, Anda dapat membuka folder proyek Anda:

 cd my-site

Di dalam proyek yang baru dibuat, Anda dapat menjalankan beberapa perintah bawaan:

`npm start` atau `yarn start`

Pengguna Jekyll harus menjalankan bundle install terlebih dahulu

Menjalankan aplikasi dalam mode pengembangan.
Buka http://localhost:3000 untuk melihatnya di browser.

Halaman akan dimuat ulang secara otomatis jika Anda melakukan perubahan pada kode.

`npm build` atau `yarn build`

Membangun situs untuk produksi ke folder dist .

Filsafat

Satu Ketergantungan: Hanya ada satu ketergantungan build. Ini menggunakan Webpack, Babel, ESLint, PostCSS, dan proyek luar biasa lainnya, tetapi memberikan pengalaman kurasi yang kohesif di atasnya.
Tidak Perlu Konfigurasi: Anda tidak perlu mengonfigurasi apa pun. Konfigurasi yang cukup baik untuk pengembangan dan produksi ditangani untuk Anda sehingga Anda dapat fokus pada penulisan kode.
Tanpa Penguncian: Anda dapat “mengeluarkan” ke pengaturan khusus kapan saja. Jalankan satu perintah, dan semua konfigurasi serta dependensi build akan dipindahkan langsung ke proyek Anda, sehingga Anda dapat melanjutkan dari bagian terakhir yang Anda tinggalkan.

Apa yang Termasuk?

Lingkungan Anda akan memiliki semua yang Anda perlukan untuk membangun situs web statis modern:

Generator Situs Statis (Jekyll atau Hugo)
Tambahan bahasa di luar ES6, seperti operator penyebaran objek.
CSS yang diawali otomatis
Pembaruan tanpa kerumitan untuk alat di atas dengan satu ketergantungan.

Keuntungannya adalah alat ini telah dikonfigurasikan untuk bekerja dengan cara tertentu . Jika proyek Anda memerlukan lebih banyak penyesuaian, Anda dapat "mengeluarkan" dan menyesuaikannya, tetapi Anda harus mempertahankan konfigurasi ini.

Situs Statis

Situs statis adalah situs web yang dibangun menggunakan file statis yang tidak berubah. Karena kontennya statis, pengirimannya ke pengguna tidak memerlukan waktu pemrosesan server. Fitur ini membuat situs statis menjadi sangat cepat dan berkinerja.

Generator situs statis adalah cara modern untuk membangun situs statis. Mereka mengonversi file konten sederhana berbasis teks menjadi file statis yang siap digunakan di web.

Mereka bagus untuk pengembang karena sangat cepat, dibuat untuk bekerja dengan kontrol versi, dan memerlukan sedikit atau tanpa pengaturan dibandingkan dengan solusi CMS monolitik yang sudah ada seperti Wordpress.

Saat ini, create-static-site mendukung dua generator situs statis:

Jekyll adalah generator situs statis yang ditulis dalam Ruby dan dibuat oleh pendiri GitHub, Tom Preston Werner.
Hugo adalah generator situs statis yang ditulis dalam GoLang dan dibuat oleh Steve Francia.

Berkontribusi

Kami ingin sekali menerima bantuan Anda dalam create-static-site ! Lihat CONTRIBUTING.md untuk informasi lebih lanjut tentang apa yang kami cari dan bagaimana memulainya.