Hosting Situs Web Astro Gratis di GitHub Pages

Hosting Astro – Jika Anda ingin membangun situs web yang cepat dan efisien dengan Astro dan ingin menghemat biaya hosting, Anda berada di tempat yang tepat. Dalam panduan ini, kami akan mengajarkan Anda cara hosting situs web Astro secara gratis menggunakan layanan GitHub Pages. GitHub Pages adalah layanan hosting statis yang diberikan oleh GitHub, yang dapat Anda gunakan untuk meng-host situs web Anda tanpa biaya tambahan. Dengan menggabungkannya dengan Astro, Anda dapat membuat situs web yang ringan dan cepat tanpa harus membayar biaya hosting.

Apa itu Astro?

Sebelum kita masuk ke langkah-langkahnya, mari kita pahami apa itu Astro. Astro adalah kerangka kerja pengembangan situs web yang dirancang untuk membangun situs web yang cepat dengan bantuan komponen-komponen Svelte. Astro menghasilkan situs web statis yang sangat efisien dengan memuat hanya kode JavaScript yang diperlukan untuk halaman tertentu, sehingga memastikan pengalaman pengguna yang cepat.

Langkah 1: Buat Proyek Astro

Langkah pertama adalah membuat proyek Astro. Untuk melakukannya, pastikan Anda telah menginstal Node.js di komputer Anda. Kemudian, buka terminal dan jalankan perintah berikut:

npm create astro@latest

Jika Anda sudah memliki proyek Astro maka Anda bisa melewati langkah pertama.

Langkah 2: Konfigurasi Proyek Astro

Setelah proyek Astro dibuat, Anda perlu mengkonfigurasinya untuk digunakan dengan GitHub Pages. Buka file astro.config.mjs dan tambahkan konfigurasi berikut di dalamnya:

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://isonnymichael.github.io',
  base: '/isonnymichael',
})

• site harus sesuai dengan alamat GitHub Pages Anda : https://<YOUR_USERNAME>.github.io (Tutorial GitHub Pages)
• base harus sesuai dengan nama repository Anda di github

Buat folder dan file baru seperti berikut : .github/workflows/deploy.yml kemudian copas kode di bawah ini:

name: Deploy to GitHub Pages

on:
  # Trigger the workflow every time you push to the `main` branch
  # Using a different branch name? Replace `main` with your branch’s name
  push:
    branches: [ main ]
  # Allows you to run this workflow manually from the Actions tab on GitHub.
  workflow_dispatch:

# Allow this job to clone the repo and create a page deployment
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v3
      - name: Install, build, and upload your site
        uses: withastro/action@v1
        # with:
          # path: . # The root location of your Astro project inside the repository. (optional)
          # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

Selanjutnya buat file baru dengan nama .nojekyll

Sampai di tahap ini sebanarnya Anda sudah berhasil menjalankan Astro di GitHub Pages. Lakukan commit dan push ke Github Anda. Jika Anda belum membuat repository dan membuat GitHub Pages maka ikuti langkah berikutnya.

Langkah 3: Buat Repositori GitHub

Buat repositori GitHub baru untuk proyek Astro Anda. Anda dapat memberikan nama yang sesuai, misalnya “my-astro-website” di GitHub. Setelah membuat repositori, pergilah ke direktori proyek Astro Anda di terminal dan jalankan perintah berikut:

git init
git add .
git commit -m "Inisialisasi proyek Astro"
git branch -M main
git remote add origin https://github.com/username/my-astro-website.git
git push -u origin main

Pastikan Anda mengganti username dengan nama pengguna GitHub Anda dan my-astro-website sesuai dengan nama repositori yang Anda buat.

Langkah 4: Hosting dengan GitHub Pages

Sekarang proyek Astro Anda telah diunggah ke repositori GitHub. Untuk meng-hostnya di GitHub Pages, ikuti langkah berikut:

1. Buka repositori GitHub Anda.
2. Pergi ke tab “Settings” (Pengaturan).
3. Gulir ke bawah hingga Anda menemukan bagian “GitHub Pages.”
4. Di bawah “Source” (Sumber), pilih “main” sebagai branch yang akan di-host.
5. Klik “Save” (Simpan).

Situs web Astro Anda akan tersedia di alamat https://username.github.io/my-astro-website, dengan username adalah nama pengguna GitHub Anda.

Kesimpulan

Sekarang Anda telah berhasil meng-host situs web Astro Anda secara gratis di GitHub Pages. Anda dapat mengaksesnya secara online dan membagikannya dengan orang lain. Selamat mengembangkan situs web Astro Anda yang cepat dan efisien!

Hosting situs web Astro di GitHub Pages adalah pilihan yang bagus untuk membuat situs web yang cepat tanpa biaya hosting tambahan. Teruslah mengembangkan situs web Anda dan memperluas pengetahuan Anda dalam pengembangan web yang efisien. Semoga panduan ini bermanfaat bagi Anda!