🖋️ Dasar Lengkap buat website di Quarto

Panduan praktis untuk mahasiswa dan asisten laboratorium pemula di bidang matematika, statistika, dan aktuaria yang ingin membuat website atau dokumentasi online secara gratis menggunakan Quarto dan GitHub Pages. Tidak perlu pengalaman pemrograman.

Keywords

panduan membuat website dari nol, quarto website pemula, github pages untuk mahasiswa, dokumentasi lab asisten, markdown dan YAML dasar, blog mahasiswa statistika aktuaria, dokumentasi praktikum, personal site untuk asisten lab, publikasi ilmiah mahasiswa, website gratis tanpa coding

📚 Pendahuluan

Mahasiswa tingkat awal dan asisten laboratorium baru di bidang matematika, statistika, dan aktuaria sering kali dihadapkan pada kebutuhan mendokumentasikan kegiatan, membuat catatan, atau membangun portofolio digital. Sayangnya, membuat website terdengar seperti sesuatu yang rumit, memerlukan keahlian pemrograman, atau biaya mahal untuk hosting.

Panduan ini dirancang untuk membantumu membuat website secara gratis menggunakan Quarto dan GitHub Pages, tanpa harus jago coding. Kamu akan belajar langkah demi langkah mulai dari instalasi, penulisan konten dengan Markdown, pengaturan tampilan, hingga publikasi. Semua dijelaskan secara modular, visual, dan cocok dipelajari di sela-sela aktivitas kuliah atau laboratorium.

Dengan mengikuti panduan ini, kamu bisa membangun blog belajar, dokumentasi praktikum, portofolio akademik, hingga situs publikasi ilmiah dengan cara yang rapi, profesional, dan mudah diakses.

📑 Daftar Isi

📄 Membuat Website
🧭 Navigasi Website

1. 📄 Membuat Website

1.1 🧭 Gambaran Ikhtisar

Quarto Websites adalah cara yang nyaman untuk mempublikasikan kumpulan dokumen 📄. Dokumen-dokumen ini dipublikasikan sebagai bagian dari sebuah website 🌐 yang berbagi elemen navigasi, opsi rendering, dan gaya visual 🎨.

Navigasi website bisa ditampilkan lewat navbar global 🧱, sidebar dengan tautan 🧾, atau kombinasi keduanya untuk situs dengan banyak tingkat konten 📚. Kamu juga bisa menyalakan fitur 🔍 full text search untuk memudahkan pencarian.

Website Quarto bisa dipublikasikan ke berbagai platform seperti GitHub Pages, Netlify, Posit Connect, atau server web statis dan intranet 🚀. Lihat dokumentasi lengkapnya di Publishing Websites.

1.2 ⚡ Quick Start

Ikuti panduan Quick Start sesuai alat yang kamu pakai 🛠️ agar website kamu langsung bisa jalan. Setelah paham dasarnya, lanjutkan untuk mempelajari fitur-fitur lanjutan 🔍.

Untuk membuat proyek website baru di VS Code:

Jalankan perintah Quarto: Create Project lewat Command Palette.

membuka command pallete di VS Code dengan ctrl + shift + p

Pilih opsi Website Project 🌍.

pilih opsi website project setelah memilih create project quarto sebelumnya

Pilih direktori induk dan beri nama direktori proyekmu 📂.

gambar menunjukkan kolom memberikan nama proyek direktori

Lalu, tekan tombol Preview ▶️ untuk melihat hasilnya secara langsung di jendela preview. Saat kamu re-render file seperti index.qmd atau about.qmd, preview akan otomatis diperbarui 🔁.

gambar menunjukkan tombol preview untuk melihat sementara website buatan pemogram

Preview ini akan menunjukkan tepat ke sumber file. Ketika re-render index.qmd atau render files lainnya seperti about.qmd, preview otomatis diperbarui.

Untuk membuat proyek website di RStudio:

Gunakan menu New Project dan pilih Quarto Website 🆕.

Isi nama direktori dan opsi lainnya, lalu klik Create Project.

Gunakan tombol Render ▶️ untuk melihat preview websitemu langsung di RStudio.

Preview ini akan menunjukkan tepat ke sumber file. Ketika re-render index.qmd atau render files lainnya seperti about.qmd, preview otomatis diperbarui.

Untuk membuat project website baru dari Terminal, gunakan quarto create project command, diikuti prompt untuk memiliki tipe dan memberi nama untuk projek tersebut (yang akan digunakan untuk nama direktori tersebut):

Terminal

quarto create project website mysite

Ini akan membuat panggung untuk website sederhana di dalam mysite sub-directory. Gunakan quarto preview command untuk render dan preview website:

Terminal

quarto preview mysite

Website akan dibuka di browser 🌐 dan akan otomatis ter-update saat kamu menyimpan perubahan. Ketika kamu edit dan simpan index.qmd (atau file lain seperti about.qmd) preview ini otomatis diperbarui.

1.3 🔄 Alur Kerja (Workflow)

Setelah memahami cara membuat dan mengedit website sederhana, sekarang saatnya mempelajari alur kerja yang lebih dalam 🔧.

1.3.1 ⚙️ File Konfigurasi `_quarto.yml`

Semua pengaturan website dikontrol lewat file _quarto.yml. Contoh konfigurasi sederhana:

_quarto.yml

project:
  type: website

website:
  title: "today"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

📚 Lihat dokumentasi Navigasi Website untuk info lebih lanjut.

1.3.2 👀 Preview Website

Di VS Code dan RStudio, kamu bisa klik tombol Preview atau Render untuk menjalankan quarto preview langsung di jendela editor. Atau, jalankan lewat terminal:

Terminal

# preview the website in the current directory
quarto preview

💡 Perhatikan bahwa ketika preview sebuah site (entah gunakan VS Code / RStudio alat terintegrasi atau dari terminal) perubahan file configurasi (yakni _quarto.yml) sebagai sumber data situs (yakni thema atau file CSS) akan secara otomatis memperbaharui website.

Kamu dapat mengkustomisasi perilaku bagaimana server preview (port, apakah di buka di browser terbuka dll.) gunakan opsi command line atau _quarto.yml file config. Lihat quarto preview help atau project file reference untuk detail tambahan.

Important

⚠️ Perubahan besar seperti pada _quarto.yml butuh re-render penuh sebelum kamu deploy. Selalu jalankan quarto render sebelum menerbitkan websitemu.

1.3.3 🏗️ Render Website

Untuk merender tanpa preview, jalankan:

Terminal

# merender website dalam direktori ini
quarto render

Website akan dihasilkan (secara default) di folder _site 📁.

Lihat artikel Project Basics untuk mempelajari lebih tentang pekerjaan terkait dengan projects, termasuk secara spesifik list eksplisit file untuk dirender, sebagaimana tambahan custom pre dan post render scripts untuk project kamu.

🎯 Render Targets

Secara default, semua input Quarto yang valid (.qmd, .ipynb, .md, .Rmd) di dalam direktori project akan di render, simpan salah satu dari:

Sebuah file atau prefix direktori . (hidden files)
Sebuah file atau prefix direktori _ (secara tipe digunakan untuk file non top-level, yakni termasuk A file or directory prefix of _ (typically used for non top-level files, yakni satu included di file lain)
File bernama README.md atau README.qmd (yang mana secara tipe tidak aktual render targets tapi konten informational sedikit sumber kode untuk dilihat di dalam web UI version control).

Jika kalian tidak ingin render semua target dokumen di dalam sebuah project, atau kalian harapkan untuk urutan secara precise rendering, kalian dapat menambahkanproject: render: [files] entry untuk metadata project kalian. Contoh:

yaml

project:
  render:
    - section1.qmd
    - section2.qmd

Perhatikan bahwa kalian dapat menggunakan wildcards ketikan mendefinisikan list render. Misalnya:

yaml

project:
  render:
    - section*.qmd

Kalian dapat juga menggunakan prefix (awalan ! untuk menghiraukan beberapa file atau direktori dalam list render. Perhatikan bahwa kasus kalian butuh dimulai dengan menspesifikasikan semua yang kalian ingin render. Misalnya:

yaml

project:
  render:
    - "*.qmd"
    - "!ignored.qmd"
    - "!ignored-dir/"

pengguna Hugo

Jika sebuah nama dari file output membutuhkan dimulai dengan . atau _ (misalnya _index.md untuk pengguna Hugo), Kalian harus memberi nama Quarto file input tanpa prefix (misalnya index.qmd) dan tambahkan secara eksplisit output-file parameter di dalam YAML seperti.

yaml

output-file: "_index.md"

1.4 🔗 Linking antar Halaman

Ketika membuat link di antara halaman site kamu, kamu dapat memberikan sumber file sebagai target link (daripada .html file). kamu juga dapat memberikan identifier hash (tanda pagar #) ke sumber file jika kamu ingin ke link bagian secara khusus di dokumen. Misalnya:

[about](about.qmd)
[about](about.qmd#section)

Salah satu keuntungan dari penggunaan style ini dari link mengarah ke targeting .html files secara langsung itu jika kamu pada titik tertentu ingin mengubah website ke buku dasar file ini akan menautkan secara otomatis ke bagian link untuk format yang menghasilkan single file (misalnya PDF atau MS Word).

1.5 🎨 Tema Website

Tampilan website mu dikontrol via HTML themes. Opsi ini telah diatur dibawah opsi format dalam website configuration file mu:

_quarto.yml

format:
  html:
    theme: cosmo
    css: styles.css

Lihat HTML Theming untuk eksplorasi tema lebih lanjut.

📚 Pelajari Lebih Lanjut

Begitu websitemu sudah jalan, kamu bisa:

🔗 Tambahkan navigasi: Website Navigation mendeskripsikan berbagai cara untuk menambahkan navigasi ke website, termasuk bar navigasi tingkat tinggi, sidebar atau menggunakan kedua desain hybrid. Bagian ini juga meliputi penambahan pencarian full-text dan juga footer situs yang lebar.
🧰 Tambahkan fitur sosial & analytics: Website Tools meliputi penambahan metadata social (seperti kartu twitter) dan analitik Google untuk situsmu, sebagaimana pengguna memverifikasi toggle di antara skema warna terang dan gelap.
⚙️ Kustomisasi opsi website: Website Options menyajikan referensi komprehensif kepada semua opsi website yang tersedia.
🧮 Optimalkan eksekusi kode: Code Execution menyajikan tips untuk optimisasi merender website dengan banyak dokumen atau komputasi yang mahal.
🚀 Publikasikan websitemu: Publishing Websites menyebutkan berbagai opsi untuk menerbitkan situs web termasuk Halaman GitHub, Netlify, dan Posit Connect.

2. 🧭 Navigasi Website

2.1 😗 Gambaran Ikhtisar

Ada berbagai opsi yang tersedia untuk menyediakan navigasi situs web, termasuk:

Menggunakan navigasi atas (navbar) dengan sub-menu opsional.📌
Menggunakan navigasi samping dengan hierarki halaman.📑
Menggabungkan navigasi atas dan samping (di mana navigasi atas menautkan ke berbagai bagian situs dengan navigasi sampingnya sendiri).🔀

Selain itu, kamu dapat menambahkan pencarian teks lengkap ke antarmuka navigasi atas atau samping.

2.2 😁 Top Navigation

Untuk menambahkan navigasi teratas ke situs web, tambahkan entri navbar ke konfigurasi `website di _quarto.yml. Misalnya, YAML berikut:

yaml

website:
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        href: index.qmd
      - talks.qmd
      - about.qmd

Menghasilkan bilah navigasi yang terlihat seperti ini:

Di atas kami menggunakan opsi kiri untuk menentukan item untuk sisi kiri bilah navigasi. kamu juga dapat menggunakan opsi kanan untuk menentukan item untuk sisi kanan.

Teks untuk item bilah navigasi akan diambil dari judul dokumen target yang mendasarinya. Perhatikan bahwa dalam contoh di atas kami menyediakan nilai text: "Home" khusus untuk index.qmd.

kamu juga dapat membuat menu bilah navigasi dengan menyertakan menu (yang merupakan daftar item seperti kiri dan kanan).

Contoh lainnya bisa dibuat menarik seperti berikut:

yaml

project:
  type: website

website:
  title: "My Site"
  navbar:
    search: true
    left:
      - href: index.qmd
        text: Home 🏠
      - about.qmd
      - text: Blog ✍️
        menu:
          - href: blog/post1.qmd
            text: Post 1
          - href: blog/post2.qmd
            text: Post 2
  sidebar:
    style: floating
    contents:
      - section: "Tutorial"
        contents:
          - href: intro.qmd
            text: Pengenalan 📘
          - href: dasar.qmd
            text: Dasar-Dasar ⚙️

Kamu juga bisa membuat menu dropdown di navbar dengan menu: seperti contoh Blog di atas 🧺.

Misalnya:

yaml

left:
  - text: "More"
    menu:
      - talks.qmd
      - about.qmd

Berikut adalah semua opsi yang tersedia untuk navigasi teratas ( Top Navigation ):

Opsi	Deskripsi
`title`	Judul navbar (menggunakan `site: title` jika tidak ada yang ditentukan). Gunakan `title: false` untuk menekan tampilan judul di bilah navigasi.
`logo`	Gambar logo yang akan ditampilkan di sebelah kiri judul.
`logo-alt`	Teks alternatif untuk gambar logo.
`logo-href`	Targetkan href dari logo /title navbar. Secara default, logo dan tautan judul ke halaman root situs (`/index.html`).
`background`	Warna Latar Belakang (“primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, or hex color).
`foreground`	Warna latar depan (“primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, or hex color). Warna latar depan akan digunakan untuk mewarnai elemen navigasi, teks, dan tautan yang muncul di bilah navigasi.
`search`	Sertakan kotak pencarian (true or false).
`tools`	Daftar alat navbar (seperti link ke github atau twitter, dll.). Lihat Navbar Tools untuk detail.
`left` / `right`	Daftar item navigasi untuk sisi kiri dan kanan navbar.
`pinned`	Selalu tampilkan bilah navigasi (true or false). Defaults ke false, dan menggunakan headroom.js untuk menampilkan bilah navigasi secara otomatis saat pengguna menggulir ke atas pada halaman.
`collapse`	Menciutkan item navbar ke dalam menu hamburger saat tampilan menjadi sempit (defaults ke true).
`collapse-below`	Breakpoint responsif untuk menciutkan item navbar ke menu hamburger (“sm”, “md”, “lg”, “xl”, or “xxl”, defaults ke “lg”).
`toggle-position`	Posisi menu hamburger navbar yang diciutkan saat dalam mode responsif (“left” or “right”, defaults ke “left”).
`tools-collapse`	Perkecil alat ke dalam menu navbar saat tampilan menjadi sempit.

Berikut adalah opsi yang tersedia untuk item navigasi individual:

Opsi	Deskripsi
`href`	Tautkan ke file yang berisi proyek atau URL eksternal.
`text`	Teks yang akan ditampilkan untuk item navigasi (default ke `title` dokumen jika tidak disediakan).
`icon`	Nama salah satu standar Bootstrap 5 icons (misalnya “github”, “twitter”, “share”, dll.).
`aria-label`	Accessible label untuk item navigasi.
`rel`	Nilai untuk rel atribut. Beberapa nilai yang dipisahkan spasi diizinkan.
`target`	Nilai untuk target atribut. Misalnya `_blank` untuk buka di tab baru.
`menu`	Daftar item navigasi untuk mengisi menu tarik-turun.

Untuk informasi selengkapnya tentang mengontrol tampilan bilah navigasi menggunakan tema HTML, lihat HTML Themes - Navigation.

⛏️ Navbar Tools

Selain navigasi tradisional, navbar juga dapat menampilkan seperangkat alat (misalnya social actions, GitHub view atau edit actions dll.) Definisi alat terdiri dari nama ikon dan href untuk diikuti saat diklik. Untuk ikon, gunakan nama ikon dari salah satu dari 1.300+ Ikon Bootstrap.

Contoh:

website:
  navbar:
    tools:
      - icon: twitter
        href: https://twitter.com
      - icon: github
        menu:
          - text: Source Code
            href:  https://code.com
          - text: Report a Bug
            href:  https://bugs.com

Bagian kanan navbar Kuarto berisi logo Twitter dan Github. Logo Github dipilih dan ada menu di bawahnya dengan dua item: 'Kode Sumber' dan 'Laporkan Bug'

Alat yang ditentukan untuk bilah navigasi akan muncul di sisi kanan Bilah Navigasi. Jika kamu menentukan tema gelap atau mode pembaca untuk situs web kamu, kontrol untuk opsi tersebut akan muncul dengan alat apa pun yang ditentukan.

Saat bilah navigasi diciutkan menjadi menu di layar yang lebih kecil, alat akan ditempatkan di bagian bawah menu.

2.3 📑 Side Navigation

Jika situs kamu terdiri dari lebih dari beberapa dokumen. Maka kamu mungkin lebih suka menggunakan navigasi samping, yang memungkinkan kamu menampilkan hierarki artikel yang sangat dalam.

Jika kamu membaca halaman ini di perangkat desktop. Maka kamu akan melihat tampilan navigasi sisi default di sebelah kiri (jika tidak, kamu akan melihat bilah judul di bagian atas yang dapat kamu klik atau sentuh untuk membuka navigasi).

Untuk menambahkan navigasi samping ke situs web, tambahkan entri sidebar ke bagian websitedi _quarto.yml. Misalnya:

yaml

website:
  sidebar:
    style: "docked"
    search: true
    contents:
      - text: "Introduction"
        href: introduction.qmd
      - section: "Basics"
        href: basics-summary.qmd
        contents:
          - index.qmd
          - basics-knitr.qmd
          - basics-jupyter.qmd
      - section: "Layout"
        contents:
          - layout.qmd
          - layout-knitr.qmd
          - layout-jupyter.qmd
      - section: advanced.qmd
        contents:
          - raw-code.qmd
          - custom-theme.qmd
      - acknowlegment.qmd

Ada dua gaya navigasi samping yang tersedia: “docked” yang menampilkan navigasi di bilah sisi dengan warna latar belakang yang berbeda, dan “floating” yang menempatkannya lebih dekat ke teks isi utama. Seperti inilah tampilan gaya “docked” dan “floating” (masing-masing):

Tangkapan layar dokumen Quarto dengan bilah sisi berwarna abu-abu.

Berikut adalah semua opsi yang tersedia untuk navigasi samping ( side Navigation ):

Opsi	Deskripsi
`id`	ID opsional (dipakai hanya untuk navigasi hybrid, dijelaskan nanti) 🆔.
`title`	Judul sidebar 📝. Kalau tidak diisi, akan pakai title dari project secara otomatis.
`logo`	Gambar logo opsional 🖼️.
`logo-alt`	Teks alternatif untuk gambar logo (buat aksesibilitas dan SEO) 🔤.
`logo-href`	Link tujuan saat logo diklik 🔗. Secara default akan diarahkan ke halaman utama (`/index.html`).
`search`	Tampilkan kotak pencarian 🔍. Kalau `true`, sidebar akan punya fitur pencarian (kecuali sudah ada di navbar).
`tools`	Daftar tools tambahan 🛠️ (contoh: link ke `GitHub`, `Twitter`, dll – lihat bagian berikutnya).
`contents`	Daftar isi navigasi yang mau ditampilkan 📚. Biasanya berisi daftar halaman utama dan sub-halaman.
`style`	Gaya tampilan sidebar: `docked` 📌 (menempel) atau `floating` 🧭 (melayang).
`type`	Warna tema sidebar: `dark` 🌑 atau `light` ☀️. Ini hanya sebagai petunjuk, warnanya bisa disesuaikan.
`background`	Warna latar belakang 🎨. Pilihannya: “`none`”, “`primary`”, “`secondary`”, “`success`”, “`warning`”, “`info`”, “`light`”, “`dark`”, “`white`”. Default: “`light`”.
`foreground`	Warna teks dan elemen di sidebar ✏️. Bisa pilih nama warna atau kode hex.
`border`	Tampilkan garis tepi di sidebar atau tidak? 📏 Gunakan `true` atau `false`.
`alignment`	Posisi teks/isi sidebar: `left` ↖️, `right` ↘️, atau `center` 🎯.
`collapse-level`	Level kedalaman menu yang ditampilkan langsung (sisanya disembunyikan/di-collapse) 📂. Default: 2.
`pinned`	Selalu tampilkan tombol judul yang bisa membuka sidebar di layar sempit 📱. Default-nya `false` dan akan muncul otomatis saat pengguna scroll ke atas (pakai `headroom.js`).

📌 Cara Menentukan Sidebar Khusus untuk Halaman Tertentu

Kalau kamu ingin pakai sidebar tertentu hanya di satu halaman (atau sekelompok halaman), kamu tinggal menambahkan id sidebar ke bagian front matter halaman tersebut, atau ke file _metadata.yml 🛠️

Misalnya, kalau sidebar kamu punya:

yaml

id: tutorials

Lalu kamu ingin sidebar ini tampil di halaman tertentu, tambahkan ini di front matter halaman tersebut:

yaml

sidebar: tutorials

2.4 ⚙️ Pembuatan Navigasi Sidebar Otomatis

Sebelumnya, kita sudah bahas cara mengisi contents sidebar secara manual dengan daftar navigasi. Nah, Quarto juga mendukung pembuatan sidebar otomatis berdasarkan struktur folder dan file di proyek kamu 📁✨

Cara termudah adalah dengan menulis:

yaml

sidebar:
  contents: auto

🧭 Jika kamu menulis contents: auto di level root, maka semua dokumen di situs kamu akan otomatis masuk ke sidebar (kecuali halaman utama — halaman utama tetap bisa diakses lewat tautan judul di atas).

🔍 Aturan Pembentukan Navigasi Otomatis

Navigasi otomatis akan dibentuk dengan aturan berikut:

🏷 Judul item diambil dari kolom title di metadata file .qmd atau .ipynb.
📂 Folder akan membentuk section tersendiri, dengan judul otomatis berdasarkan nama folder (huruf besar diawal, tanda strip dan underscore diganti spasi). ➕ Kalau kamu ingin judul section yang lebih rapi, cukup tambahkan file index.qmd di dalam folder, lalu isi title di metadata-nya.
🔤 Urutan file ditentukan secara alfabet berdasarkan nama file — kecuali jika kamu memberi nilai numerik order di metadata masing-masing file.

🧹 Hanya Isi dari Folder Utama (Tanpa Subfolder)

Secara default, sidebar otomatis akan ikut menyertakan isi dari subfolder. Tapi kalau kamu hanya ingin dokumen di folder utama saja, tuliskan seperti ini:

yaml

sidebar:
  contents: /*

🎯 Menentukan Folder atau Pola File Tertentu

Daripada menyertakan semua file, kamu juga bisa menentukan folder tertentu atau menggunakan pola file (glob pattern). Berikut ini contoh yang sah:

yaml

sidebar:
  contents: reports        # semua isi dalam folder "reports"

sidebar:
  contents: reports/*      # hanya isi langsung (tanpa subfolder) dari "reports"

sidebar:
  contents: "*.ipynb"      # hanya file Jupyter Notebook di folder utama

📌 Catatan: Kalau kamu memakai simbol * (asterisk), wajib diberi tanda kutip agar YAML bisa membacanya dengan benar.

🧱 Gabungkan dengan Navigasi Biasa

Sidebar otomatis juga bisa digabung dengan item sidebar manual lainnya. Misalnya, kamu ingin membuat section khusus Reports secara otomatis dari folder:

yaml

sidebar:
  contents:
    - about.qmd
    - contributing.qmd
    - section: Reports
      contents: reports

Atau kamu ingin menyisipkan daftar otomatis di tengah-tengah daftar sidebar manual:

yaml

sidebar:
  contents:
    - about.qmd
    - contributing.qmd
    - auto: "*-report.qmd"

⚠️ Ingat lagi: kalau ada simbol *, pastikan kamu selalu pakai tanda kutip (” atau ’) supaya tidak error saat dibaca YAML.

2.5 🧰 Sidebar Tools (Alat Tambahan di Sidebar)

Selain untuk navigasi 🔽, sidebar di Quarto juga bisa menampilkan alat-alat tambahan seperti:

Tautan ke media sosial 🌐
Aksi ke GitHub: lihat kode sumber, laporkan bug 🐞
Dan lainnya yang bisa kamu sesuaikan sesuai kebutuhan

🛠️ Cara Menambahkan Tools ke Sidebar

Setiap alat didefinisikan dengan dua hal:

icon — nama ikon dari Bootstrap Icons (ada lebih dari 1.300 ikon siap pakai!) 🎨
href — tautan tujuan saat ikon diklik 🔗

Contoh implementasi dalam YAML:

yaml

website:
  sidebar:
    tools:
      - icon: twitter
        href: https://twitter.com
      - icon: github
        menu:
          - text: Source Code
            href:  https://code.com
          - text: Report a Bug
            href:  https://bugs.com

📌 Pada contoh di atas:

Ikon Twitter langsung mengarah ke situs Twitter.
Ikon GitHub punya menu dropdown dengan dua pilihan:
- 🔹 Source Code → menuju halaman kode
- 🔹 Report a Bug → menuju halaman pelaporan bug

2.6 🧭 Navigasi Hybrid (Gabungan)

Kalau situs kamu punya banyak halaman — bahkan sampai puluhan atau ratusan 📄📄📄 — maka navigasi hybrid adalah pilihan yang sangat membantu. Dengan navigasi hybrid, kamu bisa:

Menampilkan navigasi atas (navbar) untuk mengakses bagian-bagian besar dari situs (seperti Tutorials, How-To, dst) 🔝
Menampilkan navigasi samping (sidebar) yang berbeda untuk setiap bagian 📚

🔗 Cara Menghubungkan Navbar dan Sidebar

Agar bisa menjalankan navigasi hybrid, kamu harus:

Membuat beberapa entri sidebar: di konfigurasi situs (masing-masing untuk bagian yang berbeda).
Menyocokkan title: dari sidebar: tersebut dengan entri di navbar:.
Menjadikan halaman yang ditautkan di navbar: sebagai item pertama di daftar contents: dalam sidebar:.

💡 Misalnya, kalau kamu mengikuti struktur dokumentasi Diátaxis Framework, kamu mungkin akan punya bagian terpisah untuk:

Tutorial 👨‍🏫
How-To 💡
Penjelasan dasar 📘
Referensi 🗂️

Kalau pengguna mengklik “Tutorials” di navbar, maka akan diarahkan ke halaman tutorial dengan navigasi sidebar khusus untuk tutorial.

🧩 Contoh Konfigurasi YAML untuk Navigasi Hybrid

yaml

website:
  title: ProjectX
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        href: index.qmd
      - text: "Tutorials"
        href: tutorials.qmd
      - text: "How-To"
        href: howto.qmd
      - text: "Fundamentals"
        href: fundamentals.qmd
      - text: "Reference"
        href: reference.qmd

  sidebar:
    - title: "Tutorials"
      style: "docked"
      background: light
      contents:
        - tutorials.qmd
        - tutorial-1.qmd
        - tutorial-2.qmd

    - title: "How-To"
      contents:
        - howto.qmd

    - title: "Fundamentals"
      contents:
        - fundamentals.qmd

    - title: "Reference"
      contents:
        - reference.qmd

📝 Catatan: Sidebar pertama (Tutorials) punya beberapa pengaturan tambahan (style, background, dst), yang akan diwarisi secara otomatis oleh sidebar lain jika tidak ditentukan ulang.

⬇️ Alternatif: Sidebar dari Dropdown di Navbar

Kamu juga bisa membuat sidebar muncul sebagai dropdown di navbar — praktis untuk situs besar!

Untuk ini, kamu perlu:

Memberi id: unik pada setiap entri sidebar
Mengacu pada sidebar:id tersebut di navbar:

📄 Contoh YAML untuk Sidebar via Dropdown

yaml

website:
  title: ProjectX
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        href: index.qmd
      - sidebar: tutorials
      - sidebar: howto
      - sidebar: fundamentals
      - sidebar: reference

  sidebar:
    - id: tutorials
      title: "Tutorials"
      style: "docked"
      background: light
      collapse-level: 2
      contents: 
        # daftar navigasi untuk tutorial
        
    - id: howto
      title: "How-To"
      contents:
        # daftar navigasi untuk how-to
        
    - id: fundamentals
      title: "Fundamentals"
      contents:
        # daftar navigasi untuk dasar
        
    - id: reference
      title: "Reference"
      contents: 
        # daftar navigasi untuk referensi

Note

Jika sebuah halaman tidak muncul di sidebar manapun, maka secara default akan menampilkan sidebar pertama yang tidak punya id: atau title:. Kalau kamu tidak ingin sidebar muncul di suatu halaman, tinggal tambahkan ini di bagian atas halaman tersebut:

yaml

sidebar: false

2.7 🧩 Navigasi Jejak Halaman (Breadcrumbs)

Secara default, Quarto akan menampilkan breadcrumbs (jejak halaman) di atas judul halaman 🧭 — tapi hanya untuk halaman yang terletak lebih dalam dari satu level dalam struktur navigasi sidebar.

Contoh struktur sidebar: berikut:

yaml

website:
  sidebar:
    - contents:
      - section: "Tutorials"
        contents:
          - text: "Tutorial Landing"
            href: tutorials.qmd

Akan menghasilkan tampilan breadcrumbs seperti ini pada halaman tutorials.html:

🚫 Menonaktifkan Breadcrumbs untuk Seluruh Website

Kalau kamu ingin breadcrumbs tidak muncul sama sekali, kamu bisa menonaktifkannya lewat file konfigurasi _quarto.yml:

yaml

website:
  bread-crumbs: false

🚫 Menonaktifkan Breadcrumbs untuk Halaman Tertentu

Kamu juga bisa mematikan breadcrumbs hanya untuk halaman tertentu saja, cukup tambahkan opsi berikut di bagian front matter halaman tersebut:

yaml

---
title: Halaman tanpa breadcrumbs
bread-crumbs: false
---

2.8 📄 Navigasi Antar Halaman

Kalau situs kamu punya banyak halaman dalam satu bagian atau sub-bagian, sangat membantu untuk menyediakan navigasi antar halaman di bagian bawah halaman — biar pembaca bisa langsung lanjut ke halaman berikutnya atau kembali ke sebelumnya 🧭.

Navigasi ini akan muncul secara otomatis di bagian bawah halaman kalau memang ada halaman sebelum atau sesudahnya (termasuk yang ada di bagian atau sub-bagian lain).

🟢 Fitur ini secara default aktif untuk proyek bertipe buku, tapi untuk situs biasa harus diaktifkan secara manual.

✅ Kamu bisa mengaktifkan fitur ini untuk seluruh situs menggunakan konfigurasi berikut:

_quarto.yml

website:
  page-navigation: true

🧩 Ketika sudah diaktifkan, navigasi akan tampil otomatis di bagian bawah halaman, selama memang ada halaman selanjutnya atau sebelumnya. Fitur ini membuat pengalaman membaca jadi lebih mulus!

🔧 Kamu juga bisa mengatur navigasi per halaman dengan menambahkan page-navigation di YAML front matter halaman tertentu.

basics.qmd

---
page-navigation: false
---

📂 Atau kalau kamu ingin mengatur semua halaman dalam satu folder sekaligus, kamu bisa menaruh pengaturan ini di file _metadata.yml:

_metadata.yml

page-navigation: false

➗ Separator (Pemisah Navigasi)

Kalau kamu menyisipkan garis pemisah di sidebar (baik di antara bagian maupun item), maka kontrol navigasi halaman tidak akan muncul untuk melanjutkan ke bagian setelah pemisah itu. Misalnya, dalam sidebar berikut:

yaml

website:
  sidebar:
    contents:
      - section: "First Section"
        contents:
          - href: document1.qmd
          - href: document2.qmd
          - href: document3.qmd
      - text: "---"
      - section: "Second Section"
        contents:
          - href: document4.qmd
          - href: document5.qmd
          - href: document6.qmd

Saat pengguna mencapai bagian bawah dari document3.qmd, mereka akan melihat tombol navigasi sebelumnya untuk kembali ke document2.qmd, tetapi tidak akan melihat tombol berikutnya untuk melanjutkan ke document4.qmd.

🧩 Perilaku ini berguna jika kamu memiliki bagian-bagian konten yang tidak saling terhubung secara urutan. Gunakan separator sebagai garis horizontal di sidebar untuk menandai bahwa urutan berhenti di sana dan pagination otomatis diputuskan.

2.9 🔝 Kembali ke Atas (Back to Top)

Kamu bisa menambahkan tautan “Kembali ke atas” di bagian bawah dokumen dalam situsmu dengan menggunakan opsi back-to-top-navigation.

yaml

website:
  back-to-top-navigation: true

Catatan: Kamu juga bisa menonaktifkan fitur “Kembali ke atas” ini per halaman, dengan menambahkan back-to-top-navigation: false di bagian YAML halaman tersebut.

2.10 🦶 Footer Halaman

Gunakan opsi page-footer untuk menambahkan footer yang konsisten di semua halaman dalam sebuah website. Footer paling sederhana cukup menampilkan teks di tengah halaman dengan jenis huruf yang lebih ringan 🕊️.

_quarto.yml

website:
  page-footer: "Copyright 2021, Norah Jones"

Kamu juga bisa mengatur bagian left, right, dan center dari footer secara terpisah. Misalnya, bagian kanan bisa diisi dengan ikon media sosial seperti GitHub dan Twitter 🐙🐦, bukan hanya teks.

_quarto.yml

website:
  page-footer: 
    left: "Copyright 2021, Norah Jones" 
    right: 
      - icon: github
        href: https://github.com/
      - icon: twitter 
        href: https://twitter.com/

Untuk mengontrol tampilan footer lebih lanjut, kamu bisa menggunakan opsi background, foreground, dan border 🎨:

Secara default, footer tidak punya warna latar belakang dan hanya ada garis batas di atas.
Untuk menghilangkan garis batas ➖:

_quarto.yml

website:
  page-footer:
    border: false

Untuk menggunakan latar belakang terang (misalnya agar cocok dengan navbar):

_quarto.yml

website:
  page-footer:
    background: light

Catatan: Jika foreground tidak ditentukan, warnanya akan otomatis disesuaikan agar cukup kontras dengan warna latar belakang footer.

2.11 🙈 Menyembunyikan Navigasi

Untuk halaman tertentu (terutama yang tata letaknya sepenuhnya kustom), kamu bisa menyembunyikan navigasi — baik itu navbar, sidebar, atau keduanya.

yaml

# Hides the sidebar on this page
sidebar: false

# Hides the navbar on this page
navbar: false

sidebar: false untuk menyembunyikan sidebar di halaman itu.
navbar: false untuk menyembunyikan navbar di halaman itu.

2.12 📖 Mode Pembaca (Reader Mode)

Kalau kamu ingin pengguna dapat menyembunyikan navigasi samping dan daftar isi agar pengalaman membacanya lebih fokus 📚, kamu bisa mengaktifkan reader-mode.

Saat diaktifkan, akan muncul tombol mode pembaca di navbar (jika ada) atau di sidebar. Ketika ditekan, tombol ini akan menyembunyikan (roll-up) sidebar dan daftar isi.

Tombol mode pembaca muncul di navigasi atas halaman.

yaml

# Aktifkan reader-mode
website:
  reader-mode: true

2.13 🔎 Pencarian di Situs (Site Search)

Kamu bisa menambahkan fitur pencarian 🔍 di situs dengan menyisipkan search: true baik di site-navbar maupun site-sidebar. Contohnya sebagai berikut.

yaml

website:
  sidebar:
    style: "docked"
    search: true
    contents:
      - section: "Basics"
        contents:
          - index.qmd
          - basics-jupyter.md
        # etc

2.14 🔗 Tautan GitHub

Kamu bisa menambahkan berbagai tautan ke repositori GitHub tempat kode sumber situsmu disimpan — misalnya untuk mengedit halaman ✍️, melihat sumber 📄, atau melaporkan masalah 🐛. Untuk melakukannya, tambahkan repo-url beserta satu atau lebih repo-actions.

yaml

website:
  repo-url: https://github.com/quarto-dev/quarto-demo
  repo-actions: [edit, source, issue]

Tautan-tautan ini akan ditampilkan tepat di bawah daftar isi halaman 📑.

Tangkapan layar dari dokumen Quarto. Di bawah daftar isi halaman di sisi kanan, terdapat tiga opsi: 'Edit halaman ini', 'Lihat sumber', dan 'Laporkan masalah'. Ada ikon GitHub di sebelah kiri teks 'Edit halaman ini'.

Kamu juga bisa menyesuaikan perilaku tautan ke repositori dengan opsi tambahan berikut 🛠️:

repo-subdir: Subdirektori dalam repositori tempat file sumber berada (default-nya adalah root direktori).
repo-branch: Cabang repositori yang memuat file sumber (default-nya main).
issue-url: URL khusus untuk aksi ‘Report an Issue’.
repo-link-target: Atribut target untuk tautan, misalnya _blank untuk membuka di tab/jendela baru.
repo-link-rel: Atribut rel untuk tautan.

Jika kamu ingin menyembunyikan tautan GitHub hanya pada halaman tertentu, atur repo-actions: false di YAML dokumen tersebut.

page.qmd

---
repo-actions: false
---

2.15 🔁 Redirect (Pengalihan Halaman)

Kalau kamu mengganti nama atau memindahkan suatu halaman di situsmu 🗂️, kamu bisa mengatur pengalihan dari URL lama ke yang baru, supaya tautan lama tidak rusak 🔗🚫.

Misalnya, kamu mengganti nama page.qmd menjadi renamed-page.qmd. Maka, kamu bisa menambahkan aliases ke halaman baru seperti ini:

renamed-page.qmd

---
title: "Renamed Page"
aliases:
  - page.html
---

📁 Pengalihan karena Reorganisasi Struktur Direktori

Pengalihan juga berguna ketika kamu menyusun ulang konten di situsmu menjadi struktur direktori yang berbeda 🧱, atau saat kamu memecah satu artikel panjang menjadi beberapa bagian 📄➡️📄📄.

Untuk kasus reorganisasi ke dalam struktur direktori baru, kamu mungkin perlu menggunakan path absolut (dengan awalan /). Misalnya, jika kamu memindahkan file dari /old-directory/index.md ke /new-directory/index.md:

/new-directory/index.md

---
title: "Halaman yang Disusun Ulang"
aliases: 
  - "/old-directory/index.html"
---

Hal ini juga berguna saat kamu mengatur ulang struktur direktori situs atau memecah artikel panjang menjadi beberapa bagian. Kamu bisa menambahkan URL hash (#) dari bagian yang sebelumnya berada dalam artikel lama, dan mengarahkannya ke halaman baru.

learning-more.qmd

---
title: "Learning More"
aliases:
  - overview.html#learning-more
---

💡 Tips

Tergantung pada tempat kamu menyimpan situsnya, ada juga alat pengalihan (redirect) yang lebih kuat berdasarkan pola tertentu. Contohnya:

Netlify dengan file _redirects
Apache dengan file .htaccess

Coba cari dokumentasi dari penyedia hostingmu dengan kata kunci “redirects” 🔍.

2.16 ❌ Halaman 404

Kalau browser nggak bisa menemukan halaman web yang diminta, maka akan muncul error 404 yang menandakan file-nya tidak ditemukan. Tampilan default 404 dari browser biasanya cukup ‘kering’ 🏜️, jadi kamu mungkin ingin membuat halaman kustom yang lebih ramah 😊 dan memberikan petunjuk agar pengguna bisa menemukan apa yang mereka cari.

Sebagian besar platform hosting website (seperti Netlify, GitHub Pages, dll) akan memakai file bernama 404.html di root situs kamu sebagai halaman error kustom — kalau kamu menyediakannya.

Kamu bisa menyertakan halaman 404 kustom di situs Quarto dengan membuat file markdown bernama 404.qmd di direktori utama proyek kamu.

404.qmd

---
title: Page Not Found
---

The page you requested cannot be found (perhaps it was moved or renamed).

You may want to try searching to find the page's new location.

📃 Catatan Penting! Kamu bisa menggunakan HTML barengan dengan markdown di file 404.qmd agar tampilan dan layout-nya benar-benar sesuai keinginan.

Halaman 404 ini akan tetap muncul dalam kerangka tampilan situsmu (misalnya: font, CSS, layout, navigasi, dll). Tujuannya agar pengguna nggak merasa “keluar dari situsmu” sepenuhnya saat dapat error 404. Tapi kalau kamu nggak ingin perilaku seperti ini, maka sediakan 404.html langsung, bukan 404.qmd.

🔗 Berikut contoh halaman 404 keren dari berbagai website populer: https://blog.fluidui.com/top-404-error-page-examples/

📁 Jalur Situs Non-Root

Kalau situs kamu di-deploy dari root domain (misalnya https://contoh.com/), maka cukup dengan membuat file 404.qmd seperti penjelasan di atas.

Tapi, kalau situs kamu tidak di-deploy dari root domain — misalnya https://contoh.com/situsku/ — kamu perlu menambahkan konfigurasi ekstra supaya resource (seperti CSS situs kamu) bisa dimuat dengan benar di halaman 404.

yaml

website:
  title: "Situs ku"
  site-path: "/situsku/"

🧭 Catatan Tambahan! Kalau kamu sudah menyetel site-url (yang dibutuhkan untuk sitemap dan pratinjau metadata sosial), kamu cukup memasukkan path situs langsung ke site-url.

yaml

website:
  title: "Situs ku"
  site-url: "https://contoh.com/situsku/"

3. 📖 Fitur Blog di Quarto

3.1 📝 Gambaran Umum

Situs web Quarto punya dukungan bawaan untuk fitur blog. Blog terdiri dari kumpulan postingan ✍️ disertai halaman navigasi yang menampilkannya secara urut dari yang terbaru. Blog juga bisa punya halaman profil khusus, menerbitkan RSS feed 📡, dan menggunakan beragam tema keren 🎨.

Kamu bisa bikin:

Situs web yang hanya berisi blog 📚
Situs dengan beberapa blog 🧩
Atau menambahkan blog ke situs yang punya konten lain 📦

3.2 ⚡ Mulai Cepat (Quick Start)

Ikuti langkah Mulai Cepat sesuai alat yang kamu gunakan untuk membuat blog sederhana yang langsung bisa jalan. Setelah memahami dasar-dasarnya, lanjut baca bagian berikutnya untuk fitur blog yang lebih canggih 🔧.

Untuk membuat proyek blog baru di dalam VS Code: 1. Jalankan perintah Quarto: Create Project dari command palette.

Pilih Blog Project dari daftar pilihan.

Tentukan direktori induk dan nama folder untuk proyek blog kamu.

Klik tombol Preview ▶️ untuk melihat pratinjau blog.

Preview akan otomatis diperbarui saat kamu menyimpan atau merender ulang index.qmd atau file lainnya seperti about.qmd.

Untuk membuat proyek blog baru di RStudio:

Gunakan perintah New Project & Pilih Quarto Blog

Masukkan nama folder dan pengaturan lain sesuai kebutuhan

Klik tombol Render ▶️ untuk melihat pratinjau

Preview akan muncul di sisi kanan file sumber, dan otomatis diperbarui setiap kamu merender ulang index.qmd atau file lain seperti about.qmd.

Untuk membuat proyek blog dari Terminal:

Terminal

quarto create project blog myblog

📂 Setelah membuat proyek blog dengan quarto create, struktur dasar blog akan disiapkan di folder tujuan. Kamu bisa menggunakan quarto preview untuk merender dan menampilkan blog di browser.

Terminal

quarto preview myblog

Preview akan terbuka otomatis di browser 🧭 dan akan diperbarui setiap kamu menyimpan atau merender ulang file seperti index.qmd dan about.qmd.

📁 Ringkasan File Proyek Blog

Berikut ini adalah ringkasan file penting yang dibuat saat kamu memulai proyek blog dengan template bawaan Quarto:

File	Deskripsi 📄
`_quarto.yml`	File utama konfigurasi proyek Quarto
`index.qmd`	Halaman utama blog 🏠
`about.qmd`	Halaman tentang penulis 📃
`posts/`	Folder berisi semua postingan 📂
`posts/_metadata.yml`	Pengaturan bersama untuk postingan ⚙️
`styles.css`	CSS kustom untuk tampilan situs 🎨

🎯 Di bagian selanjutnya, kita akan bahas satu per satu komponen ini lebih dalam.

3.3 🏠 Halaman Utama Blog

Halaman utama blog kamu adalah listing page — yaitu halaman daftar semua dokumen yang ada di folder posts. Postingan ditampilkan secara otomatis dalam urutan terbaru ke terlama 🕒:

Gambar menampilkan: Navbar berisi judul blog ('myblog') di kiri dan tautan 'About', ikon GitHub, ikon Twitter, serta ikon Search di kanan. Di bawahnya ada daftar postingan dengan judul, tag, deskripsi, dan preview yang diurutkan berdasarkan tanggal. Di sisi kanan tampak daftar kategori dan jumlah post tiap kategori.

🛠️ Ketika kamu membuat post baru, daftar ini akan otomatis diperbarui — post terbaru akan muncul di bagian paling atas.

Peringatan penting:

Sebaiknya jangan gunakan tanggal dinamis seperti today atau last-modified di post blog kamu. Ini akan mengacaukan urutan postingan di halaman utama dan RSS feed karena akan berubah setiap kali file dirender ulang.

🏷️ Kategori di Halaman Blog

Halaman daftar post (listing page) bisa menampilkan kategori 📚 di sisi kanan halaman, yang membantu pembaca menjelajahi konten berdasarkan topik.

yaml

---
title: "myblog"
listing:
  categories: true
---

Kategori ini diambil dari metadata (bagian depan) setiap dokumen yang ditampilkan. Misalnya, kamu bisa memberi label seperti news, code, atau analysis ke dalam satu post agar lebih mudah ditemukan 💡.

yaml

---
title: "Post With Code"
description: "Post description"
author: "Fizz McPhee"
date: "5/22/2021"
categories:
  - news
  - code
  - analysis
---

Lihat artikel Categories untuk mempelajari lebih lanjut.

3.4 ℹ️ Halaman Tentang (About)

File about.qmd digunakan untuk memberikan informasi tambahan tentang blog kamu dan penulisnya ✍️. Misalnya, kamu bisa menampilkan foto profil, nama, deskripsi singkat, dan tautan ke media sosial seperti Twitter atau GitHub 🌐.

about.qmd

---
title: "About"
image: profile.jpg
about:
  template: jolla
  links:
    - icon: twitter
      text: Twitter
      href: https://twitter.com
    # (additional links excluded for brevity)
---

## About this blog

This is the contents of the about page for my blog.

Kamu bisa menggunakan berbagai gaya tampilan (template) untuk halaman ini, salah satunya adalah template jolla yang tampak modern dan terstruktur rapi.

Screenshot halaman about dengan foto di tengah atas, nama besar, teks deskripsi, dan dua tombol untuk Twitter & GitHub.

Untuk mempelajari lebih banyak pengaturan halaman About, lihat artikel About Pages.

3.5 📂 Direktori Postingan

Semua konten blog kamu tersimpan dalam folder posts. Untuk menambah post baru, cukup buat sub-folder di dalam posts/ lalu tambahkan file index.qmd di dalamnya. Post tersebut akan otomatis muncul di halaman utama setelah kamu render 🆕.

📌 Post terbaru akan muncul paling atas secara otomatis.

📝 Draft (Draf)

Kamu bisa menandai sebuah post sebagai draf jika belum siap dipublikasikan. Cukup tambahkan draft: true di metadata post.

yaml

---
title: "My Post"
description: "Post description"
author: "Fizz McPhee"
date: "5/22/2021"
draft: true
---

📌 Post dengan status draft akan muncul saat kamu preview situs, tapi tidak akan muncul di hasil render akhir, listing, navigasi, peta situs, maupun fitur pencarian 🔒.

Untuk mempublikasikannya, cukup hapus draft: true lalu render ulang post-nya ✅.

---
draft: true
---

📅 Pembaruan Terakhir (Last Updated)

Untuk menampilkan tanggal modifikasi terakhir tanpa mengubah tanggal publikasi asli, kamu bisa menambahkan date-modified di metadata post.

yaml

---
title: "My Post"
description: "Post description"
author: "Fizz McPhee"
date: "5/22/2021"
date-modified: "5/23/2021"
---

Ini berguna agar pembaca tahu kapan konten terakhir diperbarui 🔄.

---
date-modified: "5/23/2021"
---

🧊 Membekukan Hasil Eksekusi Post (Freezing Posts)

Kalau blog kamu punya post dengan kode program, mungkin akan sulit di-render di masa depan — misalnya karena paketnya sudah berubah ⚠️. Juga, post dengan perhitungan berat bisa bikin waktu render seluruh situs jadi lama 🐢.

Solusinya: freeze hasil render post kamu. Saat kamu menggunakan freeze: true, hasil render disimpan dan tidak dihitung ulang tiap kali kamu render situs ⛔🖥️.

Ini membuat situs tetap stabil dan cepat, walaupun ada banyak post dengan kode dan analisis rumit. Kamu hanya perlu re-render post tersebut kalau memang perlu diubah.

📦 Default blog dari Quarto menyertakan file _metadata.yml di dalam folder posts/ untuk menetapkan freeze: true ke semua post dalam folder itu secara otomatis.

🗂️ Metadata Bersama di Blog Default

Pada blog default, Quarto menyertakan sebuah file bernama _metadata.yml yang berfungsi untuk menetapkan metadata bersama untuk semua dokumen di dalam folder posts 📄.

Di dalam file ini, kita bisa menentukan agar semua post secara default menggunakan freeze: true ❄️ — artinya hasil eksekusi kode akan disimpan dan tidak dihitung ulang saat situs dirender.

# options apply to all posts in this folder
freeze: true

3.6 🎨 Tema Blog

Blog di Quarto bisa memakai salah satu dari 25 tema Bootswatch yang sudah tersedia. Kamu juga bisa membuat tema sendiri jika ingin tampilan yang lebih personal 🧑‍🎨.

Secara default, proyek blog yang dibuat menggunakan quarto create project akan memakai tema cosmo.

Beberapa contoh tema yang bisa kamu pilih di antaranya:

litera

solar

morph

Setiap tema punya tampilan berbeda, jadi kamu bisa pilih yang sesuai dengan gaya blog kamu ✨.

3.7 📡 RSS Feed untuk Blog

Blog biasanya menyertakan RSS Feed agar pembaca bisa mengikuti konten terbaru menggunakan feed reader 📬 atau aplikasi lainnya.

Untuk mengaktifkan RSS, kamu perlu melakukan dua langkah penting:

1️⃣ Tambahkan site-url dan description di file _quarto.yml agar Quarto bisa menghasilkan feed 📄.

website:
  title: "myblog"
  site-url: https://www.myblogexample.io
  description: "A great sample blog"

2️⃣ Aktifkan opsi feed: true di halaman utama blog (index.qmd) agar feed otomatis dibuat ketika situs dirender 🔄.

---
title: "myblog"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  feed: true
---

Untuk belajar lebih lanjut tentang RSS feed.

Tip

💡 Menambahkan Tautan RSS di Navbar

Kalau kamu ingin pengunjung mudah berlangganan RSS feed blog kamu, kamu bisa menambahkan ikon RSS ke navigasi atas (navbar) 🧭.

website:
  title: "myblog"
  site-url: https://www.myblogexample.io
  description: "A great sample blog"
  navbar:
    right:
      - icon: rss
        href: index.xml

📁 Feed Berdasarkan Kategori

Kamu juga bisa membuat RSS feed khusus untuk kategori tertentu dalam blogmu.

Misalnya, kalau kamu punya kategori news dan posts, kamu bisa menghasilkan feed seperti index-news.xml dan index-posts.xml secara otomatis 🗃️.

---
title: "myblog"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  feed:
    categories: [news, posts]
---

📂 Ini akan menghasilkan file index.xml berisi RSS feed utama untuk semua postingan, serta file index-news.xml dan index-posts.xml yang berisi RSS feed khusus untuk kategori news dan posts 📰📬.

3.8 🚀 Publikasi

Ada banyak cara untuk mempublikasikan blog Quarto kamu. Secara default, konten blog akan ditulis ke dalam sub-direktori _site. Proses publikasi hanyalah soal menyalin direktori ini ke server web atau layanan hosting yang kamu gunakan 🗂️➡️🌐.

Artikel Publikasi Website menjelaskan lebih detail cara mempublikasikan ke layanan berikut ini:

3.9 📬 Langganan (Subscriptions)

Kamu bisa memberikan opsi kepada pembaca blog agar bisa berlangganan update via email ✉️📥. Untuk ini, kamu bisa menggunakan layanan email pihak ketiga untuk mengelola dan mengirimkan email langganan tersebut.

Biasanya, layanan email pihak ketiga ini akan menerima input dari RSS Feed kamu (misalnya: https://www.myblogexample.io/index.xml) dan memberi HTML widget langganan yang bisa kamu pasang di blog.

🧩 Tempat terbaik untuk meletakkan widget ini biasanya di margin kanan blog kamu.

Berikut langkah-langkah untuk menambahkan widget langganan:

Gunakan fitur dari layanan email kamu (seperti Mailchimp) untuk membuat HTML widget langganan 📄🔧.

html

<span style="font-weight: 600;">Subscribe</span>

<!-- Awal dari Formulir Pendaftaran Mailchimp -->

<link href="http://cdn-images.mailchimp.com/embedcode/slim-10_7_dtp.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:170px;}
    /* Tambahkan penyesuaian gaya formulir Mailchimp milikmu sendiri dalam stylesheet situs atau di dalam blok <style> ini.
       Kami menyarankan untuk memindahkan blok ini dan link CSS sebelumnya ke bagian HEAD dari file HTML kamu. */
    #mc-embedded-subscribe-form{margin-left:-5px;}
</style>

<div id="mc_embed_signup">
<form action="<site_url>" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- Orang sungguhan sebaiknya tidak mengisi bagian ini dan berharap hasil baik – jangan hapus bagian ini agar terhindar dari pendaftaran bot -->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
        <input type="text" name="b_f718424fc5df77c22533bdaa6_a3c37fb57b" tabindex="-1" value="">
    </div>

    <div class="optionalParent">
        <div class="clear foot" style="margin-top: 10px;">
            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
            <p class="brandingLogo"></p>
        </div>
    </div>

    </div>
</form>
</div>

<!-- Akhir dari Formulir Pendaftaran Mailchimp -->

Warning

⚠️ HTML widget di atas tidak akan langsung bekerja di blog kamu karena HTML untuk langganan harus berisi informasi yang spesifik untuk blog kamu (seperti alamat situs dan pengaturan unik lainnya). Silakan ikuti panduan dari penyedia layanan email yang kamu gunakan untuk menghasilkan widget langganan yang sesuai.

Buat file subscribe.html di root proyek kamu 📁.
Tempelkan kode HTML widget langganan ke dalam file subscribe.html dan simpan 💾.
Tambahkan subscribe.html ke bagian margin-header di file _quarto.yml seperti ini:

website:
  # (metadata tambahan disembunyikan)
  margin-header: subscribe.html

Gambar blog menunjukkan bagian Subscribe di sisi kanan halaman, dengan kolom input bertuliskan 'email address' dan tombol bertuliskan 'Subscribe'.

4. 🦫 Draft Website

4.1 📝 Ikhtisar: Konsep Draf

Gunakan fitur draft (draf) untuk meninjau dan merencanakan konten sebelum benar-benar dipublikasikan. Secara default, halaman draf akan tampil kosong di situs yang dirender, dan tidak akan muncul di navigasi, daftar postingan, hasil pencarian, atau sitemap 🕵️‍️. Di bagian ini, kamu akan belajar cara menandai halaman sebagai draf, mengatur bagaimana draf ditampilkan di situs akhir, dan seperti apa tampilannya saat preview situs. Di halaman ini, kamu akan belajar cara:

Menandai halaman sebagai draft
Mengatur tampilan draft di situs yang dirender
Meninjau draft melalui pratinjau situs

4.2 ✍️ Menandai Halaman Sebagai Draft

Untuk menandai halaman atau postingan sebagai draft, tambahkan draft: true pada YAML dokumen:

---
title: "Postingan dengan Kode"
draft: true
---

Untuk menjadikan seluruh dokumen dalam suatu direktori sebagai draf, gunakan draft: true di metadata direktori.

posts/_metadata.yml

draft: true

Sebagai alternatif, kamu bisa juga menentukan opsi drafts di bagian website dalam file _quarto.yml.

_quarto.yml

website:
  title: "Cool Website."
  drafts:
    - posts/post-with-code/index.qmd

Kalau kamu ingin menyimpan daftar path draf dalam file terpisah, gunakan fitur metadata include. Misalnya, kamu bisa menulis daftar draf ke dalam drafts.yml.

drafts.yml

website:
  drafts:
    - posts/post-with-code/index.qmd

Lalu tambahkan file tersebut ke bagian metadata-files di _quarto.yml.

_quarto.yml

website:
  title: "Cool Website."

metadata-files:
  - drafts.yml

Opsi drafts di bagian website juga bisa dikonfigurasi lewat project profiles.

4.3 🎨 Tampilan Halaman Draf

Kamu bisa menggunakan opsi draft-mode untuk mengatur apakah konten draf akan ditampilkan dan bisa diakses di situs akhir. Nilai yang tersedia untuk draft-mode adalah:

gone (default) — Tidak ditampilkan dan tidak memiliki tautan ❌
unlinked — Ditampilkan tapi tidak ditautkan 🔗🚫
visible — Ditampilkan dan ditautkan 🌐✅

URL untuk halaman kosong tetap akan tersedia, tetapi isi halamannya akan kosong. Halaman draf yang dirender juga akan menampilkan spanduk Draft di atasnya.

Cuplikan layar dari sebuah postingan berjudul 'Post With Code', menampilkan spanduk bertuliskan 'Draft' di bagian atas halaman. — A rendered draft document will include a “Draft” banner

Jika draf disetel sebagai unlinked, maka halaman tersebut tidak akan muncul di hasil pencarian, daftar, sitemap, maupun navigasi (seperti sidebar, navbar, atau footer). Kalau halaman lain menautkan ke draf ini, tautannya akan dihilangkan — hanya isi teks tautan yang ditampilkan tanpa hyperlink-nya.

Contoh konfigurasi lengkap seperti berikut:

Bilah navigasi untuk situs berjudul 'Cool Website.' hanya menampilkan satu item navigasi 'Item 1'. — Listing 1:

Namun, stuff/item2.qmd masih bisa diakses lewat URL stuff/item2.html dan menampilkan spanduk Draft.

Cuplikan layar dari halaman web berjudul 'Item 2'. Bilah navigasi hanya menampilkan 'Item 1'. Di atas navbar terdapat spanduk bertuliskan 'Draft'.

4.4 🔍 Meninjau Halaman Draf

Terlepas dari nilai yang kamu atur di draft-mode, saat kamu menjalankan quarto preview, semua halaman draf akan diperlakukan sebagai visible. Artinya, halaman akan ditampilkan lengkap dengan spanduk Draft, dan semua tautan atau item navigasi menuju draf akan aktif dan terlihat.

Misalnya, saat preview dari situs yang dikonfigurasi di atas dijalankan, tautan ke stuff/item2.html akan muncul di navigasi.

Cuplikan layar dari halaman web berjudul 'Item 2'. Bilah navigasi menampilkan dua item: 'Item 1' dan 'Item 2'. Di atas navbar terdapat spanduk bertuliskan 'Draft'.

Perilaku ini juga berlaku untuk tombol Render di RStudio dan Preview di VS Code. 🧪💡

5. 🔍 Pencarian Website

5.1 📝 Ikhtisar Fitur Pencarian

Quarto mendukung pencarian teks penuh di dalam situs kamu. Secara default, Quarto akan membuat indeks lokal dari konten situs kamu supaya bisa dicari dengan mudah. Kalau kamu butuh solusi yang lebih canggih dan terhosting, kamu juga bisa menggunakan Algolia.

5.2📍 Penempatan Pencarian

Pencarian diaktifkan secara otomatis di website dan buku. Kalau situs kamu punya navbar, UI pencarian akan muncul di navbar. Kalau tidak, maka pencarian akan muncul di sidebar. Kamu bisa mengatur lokasi ini dengan opsi berikut:

Opsi	Deskripsi
`location`	Posisi pencarian: `navbar` atau `sidebar` (default-nya `navbar` jika ada)
`type`	Jenis tampilan: `overlay` (pop-up) atau `textbox` (langsung di navbar)

Contohnya:

website:
  search: 
    location: navbar
    type: overlay

🔘 Opsi Lokasi:

navbar: Pencarian muncul di bilah navigasi atas.
sidebar: Pencarian muncul di bilah samping.

🖊️ Opsi Tampilan:

overlay: Tombol yang membuka jendela pencarian pop-up.

Halaman Quarto dengan overlay pencarian Algolia dalam mode 'terpisah'. Latar belakang halaman digelapkan dan dialog pencarian muncul dengan hasil pencarian di bawahnya.

textbox: Kotak input langsung di navbar/sidebar.

Pencarian Algolia dengan textbox di navbar. Dialog pencarian muncul sebagai dropdown di sisi kanan layar.

Secara default, textbox pencarian tidak memiliki teks placeholder. Kamu bisa menambahkan teks ini dengan opsi search-text-placeholder di bagian language.

language: 
  search-text-placeholder: Search

⚠️ Catatan: Opsi ini adalah default, jadi tidak wajib ditulis kecuali ingin mengubahnya.

5.3 ⌨️ Pintasan Keyboard

Selain klik, pencarian juga bisa dibuka dengan pintasan keyboard:

Kamu juga bisa mengganti pintasannya. Misalnya:

website:
  search:
    keyboard-shortcut: ["?", "H"]

Contoh: Pencarian bisa dibuka dengan tombol ? atau H.

5.4 🎨 Kustomisasi Hasil Pencarian

Kamu bisa mengatur bagaimana hasil pencarian ditampilkan dengan opsi berikut:

Opsi	Deskripsi
`limit`	Jumlah maksimal hasil pencarian yang ditampilkan (default: 20).
`collapse-after`	Jumlah bagian hasil yang ditampilkan sebelum disembunyikan dalam link “more matches”. (default: 2)

`copy-button`	Menambahkan ikon salin URL hasil pencarian ke clipboard. Berguna untuk berbagi pencarian tertentu.

`show-item-context`	Menampilkan konteks halaman di hasil pencarian (contoh: `Panduan > Menulis > Gambar`)

5.5 🌐 Menggunakan Algolia

Kalau kamu mau pakai sistem pencarian eksternal yang lebih kuat, Quarto bisa dikonfigurasi untuk menggunakan Algolia. Saat membuat situs, Quarto akan menghasilkan file search.json di folder output situs — ini bisa digunakan untuk memperbarui indeks Algolia. 📦 Untuk informasi lebih lanjut tentang membuat indeks dengan Algolia, lihat panduan Mengirim dan Memperbarui Data Anda menggunakan Algolia.

🔧 Konfigurasi Dasar

Agar Quarto bisa tersambung dengan indeks Algolia-mu, kamu perlu menyertakan informasi berikut di file proyek _quarto.yml:

Contoh:

website:
  search:
    algolia:
      index-name: <my-index-name>
      application-id: <my-application-id>
      search-only-api-key: <my-search-only-api-key>

🛠️ Skema Indeks Khusus (Custom Index Schema)

Kalau kamu tidak menggunakan search.json default dari Quarto, kamu harus memberi tahu Quarto struktur data apa yang digunakan di indeks Algolia kamu.

You can enable this using:

🧩 Opsi Skema: - href: URL dari hasil pencarian (wajib). - title: Judul dari hasil pencarian (wajib). - text: Teks konten (wajib). - section: Bagian/subjudul dari dokumen (opsional).

Contoh: hasil pencarian dikelompokkan berdasarkan URL dan teks.

📊 Algolia Insights

Algolia otomatis menyediakan statistik performa pencarian. Kalau kamu ingin melacak klik dan konversi pengguna lebih lanjut, aktifkan opsi ini:

You can enable this using:

📍 Catatan: Tracking menggunakan cookie anonim. Kalau situsmu pakai sistem izin cookie, maka tracking hanya aktif setelah pengguna menyetujui.

⚙️ Konfigurasi Lanjutan

Kamu juga bisa mengirim parameter khusus ke Algolia untuk membatasi hasil berdasarkan tag atau kategori tertentu.

You can enable this using:

Contoh: Batasi hasil pencarian hanya untuk tag tertentu seperti tag1 dan tag2.

📚 Dokumentasi lengkap: Search API Parameters

5.6 🚫 Menonaktifkan atau Memaksa Pencarian

Untuk menonaktifkan pencarian di satu dokumen, tambahkan search: false di metadata YAML.

You can enable this using:

Kalau kamu ingin menonaktifkan pencarian untuk seluruh situs, tambahkan website.search: false di _quarto.yml

📌 Memaksa elemen tertentu ikut diindeks

Kalau ada bagian dari dokumen yang ingin kamu paksa masuk ke hasil pencarian, tambahkan kelas berikut:

<div class="quarto-include-in-search-index">Konten penting ini akan selalu bisa dicari!</div>

Gunakan tag <span> atau <div> di sekeliling teks yang ingin dipastikan masuk indeks.

📚 Pendahuluan

1. 📄 Membuat Website

1.1 🧭 Gambaran Ikhtisar

1.2 ⚡ Quick Start

1.3 🔄 Alur Kerja (Workflow)

1.3.1 ⚙️ File Konfigurasi _quarto.yml

1.3.2 👀 Preview Website

1.3.3 🏗️ Render Website

🎯 Render Targets

1.4 🔗 Linking antar Halaman

1.5 🎨 Tema Website

📚 Pelajari Lebih Lanjut

2. 🧭 Navigasi Website

2.1 😗 Gambaran Ikhtisar

2.2 😁 Top Navigation

⛏️ Navbar Tools

2.3 📑 Side Navigation

📚 Cara Kerja sidebar di Quarto

📌 Cara Menentukan Sidebar Khusus untuk Halaman Tertentu

🎨 Kustomisasi Tampilan Sidebar

2.4 ⚙️ Pembuatan Navigasi Sidebar Otomatis

🔍 Aturan Pembentukan Navigasi Otomatis

🧹 Hanya Isi dari Folder Utama (Tanpa Subfolder)

🎯 Menentukan Folder atau Pola File Tertentu

🧱 Gabungkan dengan Navigasi Biasa

2.5 🧰 Sidebar Tools (Alat Tambahan di Sidebar)

🛠️ Cara Menambahkan Tools ke Sidebar

2.6 🧭 Navigasi Hybrid (Gabungan)

🔗 Cara Menghubungkan Navbar dan Sidebar

🧩 Contoh Konfigurasi YAML untuk Navigasi Hybrid

⬇️ Alternatif: Sidebar dari Dropdown di Navbar

📄 Contoh YAML untuk Sidebar via Dropdown

2.7 🧩 Navigasi Jejak Halaman (Breadcrumbs)

🚫 Menonaktifkan Breadcrumbs untuk Seluruh Website

🚫 Menonaktifkan Breadcrumbs untuk Halaman Tertentu

2.8 📄 Navigasi Antar Halaman

➗ Separator (Pemisah Navigasi)

2.9 🔝 Kembali ke Atas (Back to Top)

2.10 🦶 Footer Halaman

2.11 🙈 Menyembunyikan Navigasi

2.12 📖 Mode Pembaca (Reader Mode)

2.13 🔎 Pencarian di Situs (Site Search)

2.14 🔗 Tautan GitHub

2.15 🔁 Redirect (Pengalihan Halaman)

2.16 ❌ Halaman 404

📁 Jalur Situs Non-Root

3. 📖 Fitur Blog di Quarto

3.1 📝 Gambaran Umum

3.2 ⚡ Mulai Cepat (Quick Start)

3.3 🏠 Halaman Utama Blog

🏷️ Kategori di Halaman Blog

3.4 ℹ️ Halaman Tentang (About)

3.5 📂 Direktori Postingan

📝 Draft (Draf)

📅 Pembaruan Terakhir (Last Updated)

🧊 Membekukan Hasil Eksekusi Post (Freezing Posts)

🗂️ Metadata Bersama di Blog Default

3.6 🎨 Tema Blog

3.7 📡 RSS Feed untuk Blog

📁 Feed Berdasarkan Kategori

3.8 🚀 Publikasi

3.9 📬 Langganan (Subscriptions)

4. 🦫 Draft Website

4.1 📝 Ikhtisar: Konsep Draf

4.2 ✍️ Menandai Halaman Sebagai Draft

4.3 🎨 Tampilan Halaman Draf

4.4 🔍 Meninjau Halaman Draf

5. 🔍 Pencarian Website

5.1 📝 Ikhtisar Fitur Pencarian

5.2📍 Penempatan Pencarian

🔘 Opsi Lokasi:

🖊️ Opsi Tampilan:

5.3 ⌨️ Pintasan Keyboard

5.4 🎨 Kustomisasi Hasil Pencarian

5.5 🌐 Menggunakan Algolia

🔧 Konfigurasi Dasar

🛠️ Skema Indeks Khusus (Custom Index Schema)

📊 Algolia Insights

⚙️ Konfigurasi Lanjutan

5.6 🚫 Menonaktifkan atau Memaksa Pencarian

1.3.1 ⚙️ File Konfigurasi `_quarto.yml`