Membuat Blog Dengan Nuxt Content

March 26, 2021 5 min read
Belajar bagaimana membuat blog statis berbasis Nuxtjs dengan menggunakan modul Nuxt Content.

Untuk membuat blog berbasis NuxtJS, kita akan menggunakan modul Nuxt Content. Modul Nuxt Content adalah Headless CMS berbasis file git yang memiliki berbagai fitur canggih untuk menulis blog, situs dokumentasi, atau hanya sekedar menambahkan konten ke situs web kita.

Ada beberapa cara untuk membuat blog dengan Nuxt content, namun kali ini kita akan menggunakan cara tercepat, yaitu menggunakan starter template dari José Silva.

Starter template ini memiliki tampilan seperti Blog Nuxtjs. Starter template ini juga yang saya gunakan untuk membuat blog ini. Jadi kurang lebih tampilannya akan jadi seperti blog ini, gak mirip 100% karena beberapa bagian sudah saya ubah.

Atau coba kunjungi link demo berikut untuk melihat secara detail https://default-template.vercel.app.

Install Starter Template

Untuk mempercepat proses pembuatan blog, langsung saja kita install menggunakan paket create-nuxt-blog.

npx create-nuxt-blog nama-project-mu

Setelah proses selesai langsung masuk ke direktori project yang baru saja kamu buat.

cd nama-project-mu

Lalu jalankan npm run dev, dan lihat hasilnya di http://localhost:3000. Atau kunjungi http://localhost:3000/_tailwind/ untuk melihat komponen CSS yang digunakan starter template ini.

Mulai Menulis Blog

Untuk membuat postingan, kamu harus membuat file dengan format .md di dalam direktori content.

content/
  blog-post-1.md
  blog-post-2.md

Starter template ini sudah dilengkapi dengan modul Internationalization (i18n), jadi jika kamu memiliki lebih dari satu terjemahan (misalnya id dan en), kamu bisa menambahkannya sebelum format .md.

content/
  blog-post-1.md
  blog-post-1.en.md
  blog-post-2.md
  blog-post-2.en.md

Selain itu, kita juga bisa membuat subfolder di dalam direktori content untuk mengelompokkan postingan.

content/
  vuejs/
    tutorial-vuejs-1/
      tutorial-vuejs-1-part-1.md
      tutorial-vuejs-1-part-2.md
      tutorial-vuejs-1-part-3.md
      tutorial-vuejs-1-part-4.md
    tutorial-vuejs-2.md
    tutorial-vuejs-3.md
  nuxtjs/
    tutorial-nuxtjs-1.md
    tutorial-nuxtjs-2.md

Format Penulisan

Dalam setiap file .md yang kita buat, harus di awali dengan YAML front matter berikut.

---
title: Judul Konten
description: Deskripsi Konten
publishedAt: 2020-04-08
---

Isi konten disini

Ketiga bidang diatas, yaitu title, description, dan publishedAt WAJIB ada di setiap file markdown konten blog kita.

Kalau ada bidang lain bagaimana? Tenang, kita bisa menambahkan bidang lain seperti gambar, author, ataupun tag.

---
image: url-gambar.png
authors:
  - name: Nama Kamu
    avatarUrl: isi dengan link avatarmu
    link: isi dengan link social media atau link apapun sesuai keinginanmu
tags:
  - daftar
  - tag
  - yang
  - kamu
  - pakai
---

Isi konten disini

Isi di dalam konten harus ditulis dalam format markdown, bingung bagaimana format markdown? Baca Markdown Basic Syntax.

Komponen Markdown

Starter template ini memiliki 3 komponen yang bisa kita gunakan di saat menulis konten, yaitu <alert>, <code-group>, dan <code-sandbox>.

Alert

Untuk menggunakan komponen <alert> di dalam postingan, gunakan syntax berikut.

<alert>Info pengumuman!</alert>

Hasilnya seperti berikut ini

Info pengumuman!

Code-Group

Untuk menggunakan komponen <code-group> di dalam postingan, gunakan syntax berikut.

<code-group>
  <code-block label="NPM" active>

  ```bash
  npm install nuxt-linkedin
  \``` # Hapus backslash pada baris ini

  </code-block>
</code-group>

Dan hasilnya seperti berikut ini

 npm install nuxt-linkedin

Code-Sandbox

Untuk menggunakan komponen <code-sandbox> di dalam postingan, gunakan syntax berikut.

---
link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark
---

<code-sandbox :src="link"></code-sandbox>

Dan hasilnya seperti berikut

Loading CodeSandbox...

Perlu di ingat, untuk menggunakan <code-sandbox>, link harus di definisikan terlebih dahulu di YAML front matter.

Untuk mengubah logo blog, ubah konfigurasi logo pada nuxt.config.js, perlu di ingat logo harus ada di folder static.

export default theme({
  ...
  publicRuntimeConfig: {
    ...
    logo: 'logo.png'
    ...
  },
  ...
}

Jika kamu memiliki 2 logo yang berbeda, misalnya untuk versi terang dan versi gelap, kamu juga harus mengaturnya di nuxt.config.js.

export default theme({
  ...
  publicRuntimeConfig: {
    ...
    logoLight: 'logo-light.png',
    logoDark: 'logo-dark.png'
    ...
  },
  ...
}

Selain menggunakan cara diatas, kamu juga bisa mengubah logo dengan membuat komponen bernama AppLogo.vue di dalam direktori components.

Mengubah Welcome Section

Welcome Section berada tepat diatas list potingan yang ada di home, untuk mengubahnya, cukup kamu ubah komponen bernama AppWelcome.vue yang ada di direktori ```components``.

Secara default, daftar link eksternal bisa dikonfigurasi untuk ditampilkan atau tidak di footer blog pada setiap halaman.

Konfigurasi ini ada di properti publicRuntimeConfig.footerLinks di file nuxt.config.js.

export default theme({
  ...
  publicRuntimeConfig: {
    ...
    footerLinks: {
      social: [{
        text: 'Github',
        href: 'https://github.com/devsourceid/'
      },
      {
        text: 'Linkedin',
        href: 'https://www.linkedin.com/in/hamknw/'
      },
      {
        text: 'Twitter',
        href: 'https://twitter.com/ywskarepmu'
      }],
      support: [{
        key: 'footer.links.support.sponsor',
        href: 'https://github.com/sponsors/devsourceid'
      }]
    },
    ...
  },
  ...
}

Sampai disini kita sudah bisa berhasil membuat blog menggunakan starter template dari José Silva.

Beberapa langkah lain yang mungkin bisa mengoptimasi blog sebagai berikut.

SEO

Modul/Plugin

Referensi

NuxtJS Blog Starter Template.


Terima kasih sudah membaca artikel "Membuat Blog Dengan Nuxt Content"
Bagikan
Silahkan Login untuk berkomentar.