Gatsby.js Tutorial

0 student

Selamat datang di Gatsby!

Kami senang Anda ada di sini. Tujuan dari tutorial ini adalah untuk memandu Anda dalam mengatur dan menggunakan situs Gatsby pertama Anda menggunakan template pemula. Saat kami menjalani proses itu, kami akan memperkenalkan beberapa topik pengembangan web yang lebih umum, dan membahas struktur yang mendasari situs Gatsby.

Tutorial lengkap ini dimaksudkan agar dapat diakses oleh orang-orang tanpa banyak pengalaman pengembangan web (belum!) – tidak perlu menjadi seorang ahli. Jika Anda lebih suka melompat langsung ke kode, silakan lewati tutorial langkah demi langkah ini.

Fundamental Gatsby

  1. Siapkan lingkungan pengembangan Anda: Kami akan memperkenalkan Anda pada teknologi inti yang mendukung Gatsby, dan memandu Anda melalui pengaturan lingkungan pengembangan Anda.
  2. Mengenal blok bangunan Gatsby: Memulai proyek baru, mengembangkan, dan menyebarkan situs.
  3. Pengantar menggunakan CSS di Gatsby: Jelajahi perpustakaan seperti Typography.js dan Modul CSS.
  4. Membangun tata letak bersarang di Gatsby: Tata letak adalah bagian dari situs Anda yang digunakan kembali di beberapa halaman seperti header dan footer.

Tutorial tingkat menengah

Dalam tutorial lanjutan ini, Anda akan belajar cara menarik data dari hampir mana saja ke situs Gatsby Anda dengan GraphQL.

  1. Permintaan data di blog: Buat blog dan gunakan permintaan GraphQL untuk menarik judul situs Anda ke header blog.
  2. Plugin sumber dan rendering data yang ditanyakan: Gunakan plugin sumber untuk menarik Markdown posting blog ke situs Anda dan membuat halaman indeks dengan daftar posting blog.
  3. Plugin transformer: Gunakan plugin transformer untuk mengubah posting blog Markdown Anda menjadi bentuk yang dapat diolah oleh blog.
  4. Secara terprogram membuat halaman dari data: Pelajari cara membuat secara terprogram satu set halaman untuk posting blog Anda.
  5. Mempersiapkan situs untuk ditayangkan: Pelajari cara mengaudit situs Anda untuk kinerja dan praktik terbaik untuk aksesibilitas, SEO, dan banyak lagi.

Plugin & Tema tutorial

Plugin Gatsby adalah cara untuk merangkum, menggunakan kembali, dan menyusun fungsionalitas, seperti sumber data. Tema Gatsby adalah jenis plugin yang mengabstraksi konfigurasi default Anda (fungsi bersama, sumber data, desain) dari situs Anda dan menjadi paket yang dapat diinstal.

Pelajari cara membuat dan menggunakan plugin dan tema langkah demi langkah di Plugin dan Tutorial Tema.

Tutorial tambahan

Ada banyak kasus penggunaan untuk Gatsby, beberapa di antaranya tidak tercakup dalam rangkaian tutorial pertama untuk membuat Anda tetap fokus saat belajar. Bagian Tutorial Tambahan Gatsby adalah kumpulan sumber daya yang menunjukkan cara menyelesaikan lebih banyak tugas Gatsby langkah demi langkah, seperti menggunakan plugin sumber untuk gambar dan konten CMS.

Masuk lebih dalam dengan tutorial Gatsby tambahan.

Instructor

User Avatar admin

Free