Skip to main content

Panduan Konfigurasi Dasar Docusaurus

Selamat datang di panduan konfigurasi dasar untuk Docusaurus! Dalam tutorial ini, kami akan membahas cara mengonfigurasi Docusaurus untuk membuat website dokumentasi dan blog.

Langkah 1: Mengedit File Konfigurasi Docusaurus​

Konfigurasi utama Docusaurus dapat ditemukan di file docusaurus.config.js. Kamu bisa mengedit file ini untuk menyesuaikan pengaturan website kamu. Buka file tersebut dengan editor teks favorit kamu, seperti nano atau vim.

nano docusaurus.config.js

Berikut adalah beberapa bagian yang perlu kamu konfigurasi.

Bagian Konfigurasi Utama​

Di bagian ini, kamu bisa mengatur beberapa pengaturan dasar seperti title, tagline, favicon, dan URL situs.

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'Title Kalian', // Ganti dengan judul website kamu
  tagline: 'Welcome', // Tagline situs kamu
  favicon: 'img/favicon.ico', // Ganti dengan favicon situs kamu

  // Setel URL situs produksi di sini
  url: 'https://example.com', // Ganti dengan URL yang sesuai
  // Setel pathname /<baseUrl>/ tempat situs kamu dilayani
  baseUrl: '/',
};
  • title: Ganti dengan judul website atau proyek kamu.
  • tagline: Ganti dengan tagline singkat yang menggambarkan situs kamu.
  • favicon: Ganti dengan file favicon untuk website kamu.

Pengaturan Nama Organisasi dan Proyek​

Bagian ini digunakan untuk mengonfigurasi nama organisasi dan nama proyek. Ini penting jika kamu berencana untuk menghosting situs kamu di GitHub Pages.

organizationName: 'ryanachmad12', // Nama organisasi atau username GitHub kamu
projectName: 'Blogging And Documentations', // Nama repo GitHub kamu

Pengaturan Tautan yang Rusak​

Jika ada tautan yang rusak di situs kamu, kamu bisa mengonfigurasi apa yang harus dilakukan. Jika ingin Docusaurus menampilkan peringatan saat ada tautan yang rusak, kamu bisa setel seperti ini:

onBrokenLinks: 'throw', // Menghentikan proses jika ada tautan yang rusak
onBrokenMarkdownLinks: 'warn', // Menampilkan peringatan untuk tautan Markdown yang rusak

Konfigurasi Lokalisasi​

Jika kamu ingin situs kamu mendukung beberapa bahasa, kamu bisa mengonfigurasi bagian i18n di bawah ini:

i18n: {
  defaultLocale: 'en', // Bahasa default
  locales: ['en'], // Daftar bahasa yang didukung
},

Menambahkan Google Tag Manager​

Untuk menambahkan Google Analytics, kamu bisa menggunakan plugin @docusaurus/plugin-google-gtag. Tambahkan kode berikut di dalam file docusaurus.config.js:

sebelum menggunakan plugin kita menginstall terlebih dahulu modulenya dengan cara

npm install @docusaurus/plugin-google-gtag
plugins: [
  [
    '@docusaurus/plugin-google-gtag',
    {
      trackingID: 'G-xxxxxxxx', // Ganti dengan tracking ID kamu dari Google Analytics
      anonymizeIP: true, // Anonimkan alamat IP pengguna
    },
  ],
],

Menyesuaikan themeConfig​

Bagian ini digunakan untuk menyesuaikan tema website kamu, seperti navbar, footer, dan pengaturan prism untuk highlight kode.

themeConfig: {
  image: 'img/docusaurus-social-card.jpg', // Ganti dengan gambar sosial card untuk proyek kamu
  navbar: {
    title: 'Ops Linux Hub', // Ganti dengan judul navbar
    logo: {
      alt: 'My Site Logo', // Alt teks untuk logo
      src: 'img/logo.svg', // Ganti dengan sumber gambar logo
    },
    items: [
      {
        type: 'docSidebar',
        sidebarId: 'tutorialSidebar',
        position: 'left',
        label: 'Tutorial',
      },
      {to: '/blog', label: 'Blog', position: 'left'},
      {
        href: 'https://github.com/ryanachmad12',
        label: 'GitHub',
        position: 'right',
      },
    ],
  },
  footer: {
    style: 'dark',
    links: [
      {
        title: 'Docs',
        items: [
          {
            label: 'Introduction',
            to: '/docs/intro',
          },
        ],
      },
      {
        title: 'Community',
        items: [
          {
            label: 'GitHub',
            href: 'https://github.com/ryanachmad12',
          },
        ],
      },
      {
        title: 'More',
        items: [
          {
            label: 'Blog',
            to: '/blog',
          },
          {
            label: 'Instagram',
            href: 'https://instagram.com/ryan_achmad78',
          },
        ],
      },
    ],
    copyright: `Copyright © ${new Date().getFullYear()} Ops Linux Sec, RyanAchmad.`,
  },
  prism: {
    theme: prismThemes.github,
    darkTheme: prismThemes.dracula,
  },
},

Penjelasan:​

  • image: Gambar sosial card yang akan ditampilkan ketika halaman kamu dibagikan di media sosial.
  • navbar: Pengaturan untuk navbar di bagian atas halaman. Kamu bisa menambah, mengubah, atau menghapus item di navbar.
  • footer: Pengaturan untuk footer di bagian bawah halaman. Kamu bisa menyesuaikan link dan informasi copyright.
  • prism: Pengaturan untuk syntax highlighting. Kamu bisa memilih tema yang digunakan.

Langkah 2: Simpan dan Jalankan Website​

Setelah selesai mengedit file docusaurus.config.js, simpan perubahan kamu dan jalankan server Docusaurus:

npm run start

Atau

npm run start -- --port 80

Website kamu akan berjalan di http://localhost:3000 atau http://localhost.