gatsby template
1.0.0
Mulai proyek Anda dengan templat ini. Peluncur ini dilengkapi dengan file dan pengaturan Gatsby paling penting yang mungkin Anda perlukan untuk memulai dan menjalankannya dengan kecepatan tinggi dengan generator aplikasi secepat kilat untuk React.
Buat situs web Gatsby.
Gunakan Gatsby CLI untuk membuat situs baru, tentukan Templat ini.
# Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-templateMulai berkembang.
Navigasikan ke direktori situs baru Anda dan luncurkan.
cd my-project/
gatsby developBuka kodenya dan mulailah 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 menanyakan data Anda. Pelajari lebih lanjut cara menggunakan alat ini di [tutorial Gatsby](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).
Buka direktori my-project di editor kode pilihan Anda dan edit src/pages/index.js . Simpan perubahan Anda dan browser akan memperbarui secara real time!
Aplikasi Web Progresif adalah istilah yang digunakan untuk menunjukkan metodologi pengembangan perangkat lunak baru. Tidak seperti aplikasi tradisional, Aplikasi Web Progresif dapat dilihat sebagai evolusi gabungan antara halaman web biasa dan aplikasi seluler.
Manifes aplikasi web (bagian dari spesifikasi PWA) yang didukung oleh plugin manifes , memungkinkan pengguna menambahkan situs web Anda ke layar beranda di sebagian besar browser seluler - lihat di sini. Manifes menyediakan konfigurasi dan ikon untuk telepon.
Plugin ini menyediakan beberapa fitur selain konfigurasi manifes untuk memudahkan hidup Anda, yaitu:
Masing-masing fitur ini memiliki konfigurasi ekstensif yang tersedia sehingga Anda selalu memegang kendali.
Di mana mencari Plugin ini? Klik di sini dan cari
Sekilas tentang file dan direktori tingkat atas yang akan Anda lihat di template Gatsby ini.
.
├── node_modules
├── config/
│ └── MetaData.js
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── logo.png
│ ├── components/
│ ├── Pages/
| │ └── index.js
│ ├── posts/
| │ └── 2020-04-08--nosso-primeiro-post/
| │ └── index.md
│ ├── styles/
│ | ├── themes/
│ | └── GlobalStyles.js
│ ├── templates/
│ | ├── post.js
│ | └── tag.js
│ └── html.js
├── static/
│ ├── favicon.ico
│ └── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
| File/Folder | Keterangan |
|---|---|
| /node_modules | Direktori ini berisi semua modul kode tempat proyek Anda bergantung (paket npm) yang diinstal secara otomatis. |
| /src | Direktori ini akan berisi semua kode yang terkait dengan apa yang akan Anda lihat di bagian depan situs web Anda (apa yang Anda lihat di browser), seperti header situs web atau templat halaman. src adalah konvensi untuk "kode sumber". |
| .gitignore | File ini memberi tahu git file mana yang tidak boleh dilacak/tidak dipertahankan riwayat versinya. |
| .prettierrc | ini adalah file konfigurasi untuk Prettier. Prettier adalah alat untuk membantu menjaga format kode Anda tetap konsisten. |
| * gatsby-browser.js | Di dalam file inilah Gatsby mengharapkan untuk menemukan penggunaan API browser Gatsby (jika ada). Ini memungkinkan penyesuaian/perluasan pengaturan default Gatsby yang memengaruhi browser. |
| gatsby-config.js | Ini adalah file konfigurasi utama untuk situs web Gatsby. Di sinilah Anda dapat menentukan informasi tentang situs Anda (metadata) seperti judul dan deskripsi situs Anda, plugin Gatsby mana yang ingin Anda sertakan, dll. (Periksa dokumen konfigurasi untuk lebih jelasnya). |
| gatsby-node.js | File ini adalah tempat Gatsby mengharapkan untuk menemukan penggunaan apa pun dari API Gatsby Node (jika ada). Hal ini memungkinkan penyesuaian/perluasan pengaturan default Gatsby yang memengaruhi bagian proses pembuatan situs. |
| gatsby-ssr.js | Di dalam file inilah Gatsby mengharapkan untuk menemukan penggunaan API rendering server Gatsby (jika ada). Hal ini memungkinkan penyesuaian pengaturan default Gatsby yang memengaruhi rendering sisi server. |
| LISENSI | Gatsby dilisensikan di bawah Lisensi MIT |
| paket-lock.json | (lihat package.json di bawah, pertama). Ini adalah file yang dibuat secara otomatis berdasarkan versi persis dari dependensi npm yang telah diinstal untuk proyek Anda. (Anda tidak mengubah file ini secara langsung). |
| paket.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 berguna tentang proyek Anda. |
| **** |
Mencari panduan lebih lanjut? Dokumentasi lengkap Gatsby ada [di situs web] (https://www.gatsbyjs.org/). Berikut beberapa tempat untuk memulai:
Bagi sebagian besar pengembang, saya sarankan memulai dengan [tutorial mendalam untuk membuat situs web dengan Gatsby] (https://www.gatsbyjs.org/tutorial/). Ini dimulai dengan nol asumsi tentang tingkat kemampuan Anda dan melewati setiap langkah prosesnya.
Untuk mendalami contoh kode secara langsung, kunjungi [dokumentasi] (https://www.gatsbyjs.org/docs/). Secara khusus, lihat bagian Panduan , Referensi API , dan Tutorial Lanjutan di Sidebar.
