Panduan Singkat Membangun Blog Hexo dari Nol (Versi 2024)

#Membangun Blog

Apakah kamu sudah bosan dengan antarmuka situs blog yang kurang estetis? Muak dengan notifikasi atau rekomendasi situs yang tak ada habisnya? Sudah lama ingin punya blog sendiri, tapi terhalang oleh tutorial yang rumit dan deretan kode yang bikin pusing kepala? Kalau begitu, selamat! Artikel ini hadir untuk memandu kamu langkah demi langkah membangun blog impianmu dengan cara yang paling mudah dipahami. Kamu hanya perlu sedikit kesabaran dan mengikuti setiap langkahnya.

Hexo, sebagai framework blog yang cepat, ringkas, dan efisien, benar-benar anugerah bagi para pemula. Ditambah lagi, GitHub menghilangkan kerumitan kita untuk menyewa dan mengelola server secara terpisah. Oleh karena itu, artikel ini akan memandu kamu membangun blog menggunakan Hexo dan GitHub.

Dulu, di tahun 2018, saya pernah menulis Panduan Singkat Membangun Blog dari Nol. Karena ada pembaruan plugin dan beberapa detail yang perlu disesuaikan, maka saya kembali menghadirkan panduan singkat versi 2024 ini.

Persiapan Awal

Membangun Blog Statis Hexo Secara Lokal

$ npm install -g hexo-cli
$ hexo init
$ npm install

Betul sekali, bagian utama blogmu sudah selesai! Mari kita lihat hasilnya. Jalankan perintah:

$ hexo server

Sekarang, buka browser dan ketik localhost:4000. Kamu akan bisa melihat tampilan blogmu saat ini. Rasakan sedikit kegembiraan, lalu tekan Ctrl + C untuk melanjutkan langkah berikutnya.

Pengaturan Kustomisasi (Awal)

Mengganti Tema

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g #atau hexo generate
hexo server

Konfigurasi Situs

# Site
title: Dunia Tak Dikenal                //Nama blog
subtitle:
description:  Do something cool //Slogan
author: LulalaP                 //Penulis
language: zh-Hans               //Bahasa situs
timezone:

Mengatur Foto Profil di Sidebar

avatar: 
    url: /uploads/avatar.jpg

Melengkapi Halaman Blog

Menambahkan Menu

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Membuat Halaman Kategori

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Membuat Halaman Tag Cloud

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

Membuat Halaman ‘Tentang Saya’

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

Mengatur Tautan Media Sosial di Sidebar

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Menghubungkan Blog dengan GitHub

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

Sekarang, buka browser dan kunjungi http://your-name.github.io. Selamat! Blogmu sudah berhasil dibangun sepenuhnya.

Menghubungkan Domain

Sejauh ini, blogmu sudah selesai dibangun dan bisa diakses melalui domain GitHub. Akan lebih sempurna lagi jika kamu mengaitkan domain pendek ke blog ini.

Pembelian Domain

Resolusi Domain

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Setelah selesai mengonfigurasi resolusi domain, masuk ke direktori blogmu. Di dalam folder source, buat file baru bernama CNAME (pastikan huruf kapital semua dan tanpa ekstensi). Buka dengan Notepad atau editor teks lain, lalu tuliskan domain yang sudah kamu beli, misalnya: www.philoli.com

hexo g
hexo d

Sekarang buka browser, masukkan domainmu, tekan Enter. Selamat! Kamu kini punya blog dengan domain independen milikmu sendiri.

Menerbitkan Artikel Baru

title Judul artikel
date Tanggal pembuatan (tanggal pembuatan file)
updated Tanggal modifikasi (tanggal modifikasi file)
comments Apakah komentar diaktifkan true
tags Tag
categories Kategori
permalink Nama di URL (nama file)
hexo g
hexo d

Pengaturan Kustomisasi (Lanjutan)

Berikut adalah beberapa pengaturan kustomisasi gaya blog yang lebih lanjut. Pemula bisa melewati bagian ini terlebih dahulu.

Menambahkan RSS

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Pemotongan Artikel di Halaman Utama

    <!--more-->

Perataan Tengah Teks Kutipan dalam Artikel

{% centerquote %}
Teks kutipan
{% endcenterquote %}

{% centerquote %} Teks kutipan {% endcenterquote %}

Mengubah Gaya Blok Kode

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Menentukan Waktu Pembuatan Situs

since: 2024

Memperbaiki Gaya Tautan Artikel

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Menambahkan Gambar Latar Belakang pada Blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Apakah gambar akan diulang jika tidak memenuhi, dan bagaimana cara pengulangannya
    background-attachment:fixed;    //Apakah gambar akan ikut bergulir
    background-size: cover;         //Menutupi seluruh area
    background-position:50% 50%;    //Posisi gambar
}

Mengatur Latar Belakang Konten Blog agar Semi-Transparan


// Transparansi konten blog
// Pengaturan transparansi konten artikel
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// Pengaturan transparansi sidebar
.sidebar {
  opacity: 0.9;
}

// Pengaturan transparansi bilah menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Pengaturan transparansi kotak pencarian (local-search)
.popup {
  opacity: 0.9;
}

Mengoptimalkan Gaya Blok Kode Inline

// Peningkatan estetika untuk tag kode
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Menambahkan Jumlah Pengunjung di Bagian Bawah Situs

# Cari bagian tag copyright, lalu tambahkan kode di dalam tag tersebut.

<div class="copyright">
# ......Sudah ada beberapa konfigurasi di sini
# Tambahkan kode baru di sini
</div>

# Setelah ditambahkan akan menjadi seperti ini:
<div class="copyright">
  # ......Sudah ada beberapa konfigurasi di sini
  # Tambahkan kode baru di sini
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Setelah yakin tidak ada masalah, publikasikan
hexo d

Menambahkan File README.md ke Repositori

Setiap proyek biasanya memiliki file README.md. Namun, ketika Hexo di-deploy ke repositori, file README.md yang ada di proyek akan tertimpa. Oleh karena itu, kamu perlu mengonfigurasi pengaturan untuk mencegah penimpaan ini.

Di dalam direktori root source yang berada di direktori Hexo, tambahkan file README.md. Kemudian, ubah file konfigurasi situs _config.yml dan atur nilai parameter skip_render menjadi:

skip_render: README.md

Simpan dan keluar. Saat kamu menggunakan perintah hexo d lagi untuk deploy blog, file README.md ini tidak akan di-render.

Beberapa Plugin Populer

Pencadangan File Sumber

# Tambahkan alamat repositori blog yang sudah diatur sebelumnya
git remote add https://github.com/your-name/your-name.github.io.git

# Tambahkan dan simpan perubahan saat ini, serta catat dalam pesan commit
git add .
git commit -m "Pembaruan file sumber"

# Buat dan beralih ke branch baru
git checkout -b source

# Dorong (push) seluruh isi branch source lokal ke branch source di repositori remote
git push origin source:source
npm install -g hexo-cli
# Kloning repositori ke lokal
git clone https://github.com/your-name/your-name.github.io.git

# Jika sudah dikloning secara lokal, setiap kali sebelum memperbarui blog, kamu perlu menarik (pull) konten branch terbaru
git pull origin

# Beralih ke branch yang sesuai
git checkout source

# Setelah menginstal semua plugin di bawah konfigurasi Hexo, kamu bisa mulai memperbarui dan mengedit konten blog
npm install

# Setelah mengubah konten, jangan lupa untuk segera mencadangkan seluruhnya
git add .
git commit -m "Pembaruan blog xxx"
git push origin source:source

# Publikasikan dan dorong (push) konten blog terbaru ke situs domain
hexo clean
hexo g  # Menghasilkan file statis
hexo s  # Pratinjau efek blog secara lokal
hexo d  # Mempublikasikan konten blog terbaru

Ringkasan Perintah Umum

hexo g
#atau hexo generate, menghasilkan halaman web statis dari file sumber
hexo d
#atau hexo deploy, mempublikasikan dan mendorong ke GitHub Pages
hexo s
#atau hexo server, deploy dan uji coba secara lokal
hexo clean
# Membersihkan cache halaman web statis, lalu hexo d untuk menghasilkan ulang