Cara Membina dan Menjadi Hos Blog Gatsby

Gatsby: Panduan Pemula untuk Membina dan Mengehos Blog dengan Orbiter

Gatsby, penjana tapak statik terkemuka yang dibina pada React, memudahkan proses mencipta tapak web dinamik. Dilancarkan pada 2015 sebagai projek sumber terbuka, ia kini menjadi pilihan popular untuk pembangun, setelah diperoleh oleh Netlify pada 2023. Walaupun Netlify menawarkan pengehosan yang mantap, Orbiter menyediakan alternatif yang lebih ringkas dan mesra pengguna yang direka khusus untuk tapak Gatsby. Tutorial ini membimbing anda membina dan menggunakan blog Gatsby asas di Orbiter.

Bermula: Prasyarat dan Persediaan Projek

Sebelum bermula, pastikan anda mempunyai perkara berikut:

1. Akaun Orbiter percuma (pendaftaran adalah mudah).
2. Node.js v18 atau lebih baru (boleh dimuat turun dengan mudah jika belum dipasang).
3. Penyunting kod (VSCode, Zed atau pilihan pilihan anda).

Buka terminal anda dan navigasi ke direktori projek anda:

<code class="language-bash">cd my-projects-folder</code>

Kami akan menggunakan templat blog Gatsby pra-bina untuk kemudahan penggunaan. Jalankan arahan ini dalam terminal anda:

<code class="language-bash">npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog</code>

Ini memulakan projek dan memasang kebergantungan yang diperlukan. Terminal kemudiannya akan memaparkan arahan selanjutnya, serupa dengan ini:

<code>  cd gatsby-starter-blog
  gatsby develop</code>

Ikuti arahan ini. Mula-mula, tukar direktori:

<code class="language-bash">cd gatsby-starter-blog</code>

Kemudian, mulakan pelayan pembangunan tempatan:

<code class="language-bash">gatsby develop</code>

Akses blog anda di http://localhost:8000. Anda akan melihat contoh blog dengan siaran pemegang tempat.

Memperibadikan Blog Anda

Buka projek dalam editor kod anda dan cari gatsby-config.js. Fail ini mengandungi metadata tapak. Ubah suai bahagian siteMetadata untuk menggambarkan butiran blog anda. Contohnya:

<code class="language-javascript">siteMetadata: {
  title: `My Gatsby Blog`,
  author: {
    name: `Your Name`,
    summary: `Your brief bio`,
  },
  description: `A description of your blog`,
  siteUrl: ``, // Leave blank initially, or use your future Orbiter URL
  social: {
    twitter: `yourTwitterHandle`,
  },
},</code>

Simpan perubahan anda; pelayar akan mengemas kini secara automatik. Gantikan imej pengarang lalai (src/images/profile-pic.png) dengan imej anda sendiri.

Seterusnya, navigasi ke folder content/blog. Padamkan siaran pemegang tempat yang tidak perlu, tinggalkan satu. Ingat, Gatsby menggunakan struktur folder di mana setiap siaran ialah folder (cth., my-first-post) yang mengandungi index.md fail dan sebarang aset yang berkaitan.

Edit fail index.md yang tinggal untuk menambah kandungan anda. Gunakan sintaks Markdown (atau editor WYSIWYG). Kemas kini bahagian hadapan (bahagian YAML di bahagian atas) untuk melaraskan tajuk dan penerangan siaran.

Selepas menyimpan, perubahan anda akan ditunjukkan di http://localhost:8000.

Menggunakan Blog Anda ke Orbiter

Setelah anda berpuas hati, bina tapak anda:

<code class="language-bash">npm run build</code>

Ini menjana fail yang diperlukan dalam folder public.

Log masuk ke akaun Orbiter anda dan klik "Muat Naik Tapak." Pilih folder public. Pilih subdomain untuk tapak anda dan klik "Buat." Blog anda akan disiarkan seketika!

Untuk mengemas kini tapak anda, bina semula (npm run build), kemudian dalam Orbiter, klik ikon gear, pilih "Kemas Kini Tapak" dan muat naik folder public yang dikemas kini.

Kesimpulan

Gatsby memudahkan penciptaan tapak statik, terutamanya untuk blog. Orbiter menjadikan penggunaan sangat mudah. Mula membina blog Gatsby anda hari ini! Tapak contoh saya boleh didapati di: [URL Pengorbit Anda]. Ingat untuk menggantikan ruang letak ini dengan URL tapak sebenar anda.

Atas ialah kandungan terperinci Cara Membina dan Menjadi Hos Blog Gatsby. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!