staticfy

Staticfy

Basic Starter Kit untuk situs statis berdasarkan Gatsby.js.

Awal yang cepat

Mulailah berkembang.

Arahkan ke direktori situs baru Anda dan memulainya.

 cd my-site/
gatsby develop

Buka kode sumber dan mulai mengedit!

Situs Anda sekarang berjalan di http://localhost:8000 !

Catatan: Anda juga akan melihat tautan kedua: http://localhost:8000/___graphql . Ini adalah alat yang dapat Anda gunakan untuk bereksperimen dengan meminta data Anda. Pelajari lebih lanjut tentang menggunakan alat ini di tutorial Gatsby.

Buka direktori my-site di editor kode pilihan Anda dan edit src/pages/index.js . Simpan perubahan Anda dan browser akan diperbarui secara real time!

? Apa yang ada di dalamnya

Fitur

• Gatsby
• Naskah
• Sass, spectre.css, postcss
• Tslint
• Lebih cantik
• Stylelint
• Lint yang dipentaskan, serak, kait git

Struktur proyek

Pandangan cepat pada file dan direktori tingkat atas yang akan Anda lihat dalam proyek Gatsby.

 .
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

/node_modules : Direktori ini berisi semua modul kode yang bergantung pada proyek Anda (paket NPM) diinstal secara otomatis.

/src : Direktori ini akan berisi semua kode yang terkait dengan apa yang akan Anda lihat di front-end situs Anda (apa yang Anda lihat di browser) seperti header situs Anda atau templat halaman. src adalah konvensi untuk "kode sumber".

.gitignore : File ini memberi tahu git file mana yang tidak boleh dilacak / tidak mempertahankan riwayat versi.

.prettierrc : Ini adalah file konfigurasi untuk lebih cantik. Prettier adalah alat untuk membantu menjaga pemformatan kode Anda konsisten.

gatsby-browser.js : File ini adalah tempat Gatsby mengharapkan untuk menemukan penggunaan API browser Gatsby (jika ada). Ini memungkinkan kustomisasi/perpanjangan pengaturan Gatsby default yang mempengaruhi browser.

gatsby-config.js : Ini adalah file konfigurasi utama untuk situs Gatsby. Di sinilah Anda dapat menentukan informasi tentang situs Anda (metadata) seperti judul dan deskripsi situs, plugin Gatsby mana yang ingin Anda sertakan, dll. (Lihat dokumen konfigurasi untuk lebih detail).

gatsby-node.js : File ini adalah tempat Gatsby mengharapkan untuk menemukan penggunaan API Node Gatsby (jika ada). Ini memungkinkan kustomisasi/perpanjangan pengaturan Gatsby default yang mempengaruhi potongan -potongan proses pembangunan situs.

gatsby-ssr.js : File ini adalah tempat Gatsby mengharapkan untuk menemukan penggunaan API rendering sisi server Gatsby (jika ada). Ini memungkinkan kustomisasi pengaturan Gatsby default yang mempengaruhi rendering sisi server.

LICENSE : Gatsby dilisensikan di bawah lisensi MIT.

package-lock.json (lihat package.json di bawah, pertama). Ini adalah file yang dihasilkan secara otomatis berdasarkan versi yang tepat dari dependensi NPM Anda yang diinstal untuk proyek Anda. (Anda tidak akan mengubah file ini secara langsung).

package.json : File manifes untuk proyek node.js, yang mencakup hal -hal seperti metadata (nama proyek, penulis, dll). Manifes ini adalah bagaimana NPM mengetahui paket mana yang akan diinstal untuk proyek Anda.

README.md : File teks yang berisi informasi referensi yang berguna tentang proyek Anda.

yarn.lock : YARN adalah alternatif manajer paket untuk NPM. Anda dapat menggunakan benang atau NPM, meskipun semua Referensi Dokumen Gatsby NPM. File ini pada dasarnya memiliki tujuan yang sama dengan package-lock.json , hanya untuk sistem manajemen paket yang berbeda.

Penyebaran

Untuk penempatan Anda dapat menggunakan Gitlab CI. Dalam proyek adalah dua file-sampel .gitlab-ci.yml dan untuk S3 menggunakan .gitlab-ci-s3.yml .