Saya sangat senang akhirnya meluncurkan situs web baru saya! Dalam hal tumpukan teknologi, saya tetap berada di dunia favorit saya — Vue 😆. Namun kali ini saya memutuskan untuk menggunakan VuePress saja. Pada artikel ini, saya ingin berbagi bagaimana keputusan ini diambil dan apa pendapat saya tentang penggunaan VuePress.

  • Apa yang saya gunakan sebelumnya
  • Mengapa saya beralih dari Nuxt ke VuePress
  • Manfaat VuePress
  • Tantangan VuePress
  • Apakah layak untuk beralih dari Nuxt ke VuePress

Apa yang saya gunakan sebelumnya

Sebelumnya, saya menggunakan Nuxt. Saya memilih Nuxt karena ini adalah satu-satunya yang menawarkan rendering sisi server. Ini penting bagi saya karena memiliki manfaat SEO. Izinkan saya menjelaskan apa maksudnya.

Ini adalah keluaran HTML awal. Vue kemudian mengambil alih dan memasukkan semua komponen Anda ke bagian id=app. Itu sebabnya di Vue, Anda harus selalu menunjukkan elemen yang ingin Anda lampirkan aplikasi vue Anda. Sebagai pengguna, Anda tidak terlalu memperhatikan hal ini karena terjadi sangat cepat (tergantung kecepatan internet Anda).

Aplikasi Vue

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
  </body>
</html>

Seperti yang Anda lihat, ini cukup kosong pada pemuatan awal. Dan ini mempersulit bot mesin pencari kami untuk merayapi dan menambang data berharga Anda karena tidak ada data apa pun di sana.

Namun, dengan Nuxt, aplikasi Anda dibuat di sisi server terlebih dahulu. Jadi begitu masuk ke browser Anda, semua halaman Anda sudah terisi.

Aplikasi Baru

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <h1>Hello there</h1>
    </div>
    <script src="/js/app.js"></script>
  </body>
</html>

Inilah cara saya membandingkannya. Vue seperti makanan celemek biru (tidak disponsori) yang harus Anda kumpulkan di rumah. Dan Nuxt seperti memesan makanan untuk dibawa pulang dari restoran, semuanya datang siap untuk disantap 😋

Bagaimanapun, saya tidak mencoba membangun situs yang mewah. Saya hanya mencoba membangun situs konten untuk menampilkan informasi kode dan artikel saya 😄. Jadi saya tidak memerlukan Aplikasi Satu Halaman. Saya hanya perlu beberapa HTML biasa yang bagus. Dan itulah mengapa Nuxt cocok untuk saya!

#Mengapa saya beralih dari Nuxt ke VuePress

Jika Nuxt begitu hebat, mengapa harus beralih. Kenapa tidak dilanjutkan saja. Yah, karena aku malas haha. Hal hebat tentang Nuxt adalah ia sangat dapat dikonfigurasi. Itu juga kelemahannya, saya harus mengonfigurasi semuanya sendiri. Saya tidak ingin melakukan itu lagi. Ini seperti memilih untuk membeli properti. Anda bisa membeli sebidang tanah kosong atau rumah yang sudah dibangun sebelumnya. Tanahnya bagus karena Anda bisa membangun rumah apa pun yang Anda inginkan di atasnya, pada dasarnya Anda memulai dari awal. Tapi bagi saya, saya ingin rumah siap pakai di mana saya bisa tinggal di dalamnya tanpa khawatir tentang apa pun.

Dan bagi saya itu adalah VuePress. Ini memiliki plugin pencarian bawaan, penurunan harga super mewah yang sudah disiapkan dengan banyak fitur keren seperti penyorotan kode, dan dirancang untuk situs konten statis. Itulah tepatnya yang sedang saya bangun. Jadi saya beralih!

Juara kedua: Mengerikan

Aku hampir saja memilih Gridsome. Ini menyediakan semua yang saya inginkan untuk membuat situs konten statis. Namun tim Vue hadir dengan alternatif mereka sendiri, VuePress. Jadi saya pikir jika tim Vue yang membuat ini, saya ikut! Kalau dipikir-pikir, saya pikir saya seharusnya melihat hal ini lebih dalam karena ada beberapa tantangan dengan VuePress. Lebih lanjut tentang ini nanti.

Manfaat VuePress

Baiklah, mari kita bahas beberapa hal yang saya sukai tentang VuePress. Inilah 3 teratas saya:

1. Fitur Penurunan Harga

Inilah alasan utama saya beralih ke VuePress. Saya ingat saya mengalami kesulitan dalam mengatur penurunan harga di Nuxt. Tapi itu mungkin karena pengalaman pemrograman saya yang terbatas saat itu. Jadi saya hanya menerapkan minimal saja agar bisa berfungsi. Dengan VuePress, saya hampir tidak perlu melakukan pekerjaan apa pun agar fitur-fitur keren ini berfungsi!

Penyorotan Garis

<p>I am not highlighted</p>
<p>I am highlighted</p>

Menggunakan Vue dalam penurunan harga

# My markdown
<VueComponent />

Tautan Internal

[Home](/) <!-- I can use relative links -->

Anda dapat melihat seluruh Ekstensi Penurunan Harga di sini

2. Cari

Siapa sangka fitur sekecil itu bisa memberikan dampak sebesar itu. Di situs lama saya, tidak ada fitur pencarian. Jadi saya akan menggunakan Google untuk mencari situs saya sendiri untuk menemukan informasi spesifik. Saya terkejut saya tidak pernah menerima email keluhan mengenai hal ini. Mungkin orang-orang itu berhenti menggunakan situs saya secara bersamaan 😳 Saya tidak menyalahkan ya 🤦‍♀️

Dan coba tebak! VuePress memiliki fitur pencarian bawaan. Ini adalah plugin pencarian berbasis header. Artinya, ia akan merayapi semua file penurunan harga Anda, dan mengembalikan header yang cocok dengan kueri Anda. Fantastis!

3. Bagian depan

Frontmatter seperti data untuk file penurunan harga Anda. Saat Anda menulis artikel penurunan harga, sering kali Anda ingin menyertakan beberapa informasi tambahan di dalamnya. Misalnya nama penulis, tanggal pembuatan, tanggal modifikasi…dll. Bagaimana Anda menyampaikan informasi dalam penurunan harga Anda. Itu dengan blok frontmatter.

---
author: Samantha Ming
created: Jan 26
modified: Jan 30
---
# My new blog post

Saya menginginkan fitur ini untuk situs lama saya. Saya tidak bisa membuatnya berfungsi, jadi saya membuat objek JavaScript yang berisi semua data artikel saya. Hal ini membuat ide kreatif pengembang saya bekerja. Ketika Anda tidak berhasil, Anda mencari cara lain. Itulah hebatnya mengerjakan proyek Anda sendiri. Itu tidak harus sempurna. Selama Anda bisa sampai ke tujuan Anda. Meskipun itu berarti memakan waktu yang lama, tidak apa-apa. Karena ini pesta Anda, jadi Anda yang harus menetapkan aturannya! 😂

Tantangan VuePress

Saya berharap saya dapat mengatakan bahwa perjalanan membangun situs saya di VuePress ini sempurna. Sayangnya, ternyata tidak. VuePress sangat bagus untuk membangun situs dokumentasi teknis. Tapi situs saya pada dasarnya seperti blog. Jadi di sini saya mencoba membentuk VuePress sesuai dengan kebutuhan saya. Dan ini sulit.

Dokumentasi Kurang Contoh untuk Tugas yang Dapat Dikonfigurasi

Dokumentasi VuePress meskipun bagus untuk fitur-fitur utama. Agak menantang untuk tugas-tugas yang lebih maju atau dapat dikonfigurasi. Saya menemukan dokumennya kurang berisi contoh. Izinkan saya memberi Anda sebuah contoh (tos pada contoh transisi yang mulus 😂).

Saya mencoba memasang vue-fontawesome ke dalam aplikasi saya sehingga saya dapat menggunakan ikon Font Awesome. Saya tidak tahu bagaimana melakukan itu. Untungnya, saya mendapat bimbingan dan akhirnya menemukan jawabannya. Saya berharap di dokumen, mereka tidak memiliki beberapa contoh kasus penggunaan. Saya pikir itu pasti akan membantu saya. Jika Anda pernah membaca dokumentasi Vue, dokumentasinya penuh dengan contoh dan sangat mudah dibaca. Kabar baiknya adalah saya tahu tim VuePress sedang mencoba memperbaiki hal ini. Jadi kami sangat bersemangat untuk hal itu terjadi 👏

Omong-omong, inilah cara Anda menginstal plugin agar berfungsi dengan VuePress, jika Anda penasaran.

Tautan GitHub

Dukungan Meta Data Terbatas

Saat saya menggunakan Nuxt, ada plugin luar biasa bernama vue-meta. Ini memungkinkan untuk membuat metadata untuk halaman Anda secara terprogram. Ini sangat penting untuk SEO dan untuk membuat kartu berbagi Twitter atau Facebook.

Ya, VuePress mendukung ini. Anda dapat mengatur yang umum di file config Anda. Dan Anda dapat mengaturnya satu per satu di file penurunan harga Anda. Ingat yang saya sebutkan karena kegagalan saya mengatur frontmatter di aplikasi Nuxt saya. Saya akhirnya menggunakan objek JavaScript yang sangat besar untuk menyimpan semua data saya untuk setiap artikel saya. Itu juga berisi semua metadata saya. Jadi saya ingin menetapkan tanggal meta saya secara terprogram. Ya, saya menemukan beberapa plugin tidak resmi. Tapi mereka terutama mengandalkan metadata yang diatur di bagian depan. Jadi itu tidak berhasil.

Ingat ketika saya menyebutkan opsi runner up saya, Gridsome. Mereka MEMILIKINYA! Ugh 🤦‍♀️ Itu adalah bagian dari paket mereka. Di bawah tenda mereka, mereka menggunakan vue-meta. Saya hampir beralih ke Gridsome hanya untuk fitur ini. Tapi sejauh ini saya memutuskan untuk tetap menggunakan VuePress. Dan Anda mungkin bertanya, mengapa Anda tidak mengkonfigurasi vue-meta saja dengan VuePress. Pertanyaan bagus! Jika Anda mengetahui caranya, silakan kirim email kepada saya! Bukannya aku tidak mau, aku hanya tidak bisa memahaminya. Dan waktu terus berjalan, jadi saya memutuskan untuk melanjutkan. Ngomong-ngomong, saya perlu menyiapkan vue-meta dengan Server Side Rendering. Jadi komplikasinya sedikit lebih tinggi.

Bagaimanapun, solusi yang saya miliki saat ini adalah menggunakan plugin khusus saya sendiri yang secara terprogram menarik metadata saya dari objek JavaScript saya dan menetapkannya di bagian depan melalui plugin khusus. Masalahnya adalah ketika situs saya diterapkan, saya sekarang memiliki duplikat metadata (yang baru saja saya temukan). Ugh, itu masuk ke dalam keranjang masalah. Saya akan mengatasinya nanti 🤦‍♀️ (Akan memposting pembaruan jika saya menemukan solusinya 🤞)

Saya juga membuat masalah di repo resmi VuePress, jadi semoga mereka mempertimbangkan untuk menambahkan ini. Jangan ragu untuk ikut serta jika Anda juga menyukai fitur ini:

Permintaan Fitur VuePress

Apakah layak untuk beralih dari Nuxt ke VuePress

Ya, 100% Ya!!!! Saya membutuhkan waktu 2 bulan penuh untuk bekerja sepanjang waktu untuk menyelesaikan situs ini. VuePress memiliki begitu banyak fitur luar biasa yang sudah terpasang di dalamnya, saya menghemat banyak waktu tanpa harus bekerja keras membuatnya sendiri. Kecepatan adalah permainannya di sini! Saya tidak ingin menghabiskan waktu untuk mengonfigurasi apa pun. Saya tidak ingin membangun apa pun yang tidak perlu saya bangun. Saya ingin menghabiskan waktu saya, hanya mengeksekusi. Itu sebabnya saya ingin memilih sesuatu yang memiliki banyak hal yang sudah dibuat sebelumnya. Oleh karena itu, memilih VuePress.

Semoga Anda menikmati ringkasan pengalaman dan masukan saya dalam menggunakan VuePress.

Posting berikutnya yang ingin saya bahas adalah mengapa saya memutuskan untuk mengganti kerangka CSS dan menggunakan Tailwindcss. Jadi pantau terus 😊

Sumber daya

Terima kasih telah membaca ❤

Ucapkan Halo!Instagram | Twitter | SamanthaMing.com | Blog