Panduan Ringkas Membina Blog Hexo dari Sifar (Versi 2024)

#Pembinaan Blog

Adakah anda sudah lama bosan dengan antaramuka laman blog yang hambar dan tidak menarik? Adakah anda muak dengan notifikasi laman web yang tidak berkesudahan? Adakah anda sudah lama teringin nak bina blog sendiri, tetapi terhenti kerana tutorial yang rumit dan kod-kod yang memeningkan kepala? Kalau begitu, tahniah! Artikel ini akan membimbing anda secara langkah demi langkah untuk membina blog sendiri dengan cara yang paling mudah difahami. Anda cuma perlukan sedikit kesabaran, dan ikut sahaja setiap langkah.

Hexo, sebagai sebuah rangka kerja blog yang pantas, ringkas dan cekap, sememangnya berita baik untuk para pemula. Manakala GitHub pula membebaskan kita daripada kerumitan menyewa dan menguruskan pelayan tambahan. Oleh itu, artikel ini akan menunjukkan cara membina blog menggunakan Hexo dan GitHub.

Saya pernah menulis sebuah artikel pada tahun 2018 bertajuk Panduan Ringkas Membina Blog dari Sifar. Disebabkan kemas kini pada pemalam, ada beberapa perincian yang perlu diubah. Justeru, versi ringkas tutorial ini untuk tahun 2024 diterbitkan semula.

Persediaan Awal

Membina Blog Statik Hexo Secara Lokal

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

Ya, bahagian utama blog anda telah selesai. Mari lihat hasilnya. Jalankan:

$ hexo server

Pada ketika ini, buka pelayar web, taip localhost:4000, dan anda akan dapat melihat rupa blog anda sekarang. Berasa teruja seketika, kemudian tekan Ctrl + C untuk meneruskan langkah seterusnya.

Penyesuaian Peribadi (Permulaan)

$ 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 Laman Web

# Site
title: Dunia Tidak Diketahui                //Nama blog
subtitle:
description:  Do something cool //Kata-kata hikmat
author: LulalaP                 //Penulis
language: zh-Hans               //Bahasa laman web
timezone:

Menetapkan Gambar Profil Bar Sisi

avatar: 
    url: /uploads/avatar.jpg

Melengkapkan Halaman Blog

Menambah 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

Mencipta Halaman Kategori

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

Mencipta Halaman Awan Tag

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

Mencipta Halaman “Tentang Saya”

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

Menetapkan Pautan Sosial Bar Sisi

# 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

Mengaitkan 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

Pada masa ini, buka pelayar web, lawati http://your-name.github.io. Tahniah! Blog anda telah siap sepenuhnya.

Mengikat Nama Domain

Setakat ini, blog anda telah berjaya dibina sepenuhnya dan boleh diakses melalui domain GitHub. Mengikatnya dengan nama domain yang lebih ringkas akan menjadikannya lebih sempurna.

Pembelian Nama Domain

Resolusi Nama Domain

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Setelah konfigurasi resolusi domain selesai, masuk ke direktori blog. Di bawah direktori source, cipta fail baharu bernama CNAME (perhatikan huruf besar, tiada sambungan fail). Buka dengan Notepad dan tulis nama domain yang telah dibeli, contohnya: www.philoli.com.

hexo g
hexo d

Sekarang, buka pelayar web, taip nama domain anda, tekan Enter. Tahniah, anda kini mempunyai blog dengan nama domain anda sendiri.

Menerbitkan Artikel Baharu

title Tajuk artikel
date Tarikh cipta (tarikh fail dicipta)
updated Tarikh ubah suai (tarikh fail diubah suai)
comments Adakah komen diaktifkan true
tags Tag
categories Kategori
permalink Nama dalam URL (nama fail)
hexo g
hexo d

Penyesuaian Peribadi (Lanjutan)

Berikut adalah beberapa tetapan gaya blog peribadi lanjutan. Pemula boleh melangkau bahagian ini terlebih dahulu.

Menambah 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 Halaman Utama

    <!--more-->

Memusatkan Teks Petikan dalam Artikel

{% centerquote %}
Petikan teks
{% endcenterquote %}

{% centerquote %} Petikan teks {% endcenterquote %}

Mengubah Gaya Blok Kod

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:

Menetapkan Masa Pembinaan Laman Web

since: 2024

Memperbaiki Gaya Pautan 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;
  }
}

Menambah Gambar Latar Belakang pada Blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Jika imej tidak boleh memenuhi, sama ada mengulang dan cara mengulang
    background-attachment:fixed;    //Sama ada imej mengikut skrol
    background-size: cover;         //Tutup sepenuhnya
    background-position:50% 50%;    //Kedudukan imej
}

Menjadikan Latar Belakang Kandungan Blog Separuh Lutsinar


//Ketelusan kandungan blog
//Tetapan ketelusan kandungan 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;
  }
}


//Tetapan ketelusan bar sisi
.sidebar {
  opacity: 0.9;
}

//Tetapan ketelusan bar menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Tetapan ketelusan kotak carian (local-search)
.popup {
  opacity: 0.9;
}

Mengoptimumkan Gaya Blok Kod Separis

// Untuk mencantikkan tag kod
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Menambah Bilangan Pelawat di Bahagian Bawah Laman Web

# Cari bar tag copyright ini, kemudian tambah kod di dalam tag

<div class="copyright">
# ......Di sini sudah ada beberapa konfigurasi
# Tambah kod baharu di sini
</div>

# Setelah ditambah, ia akan kelihatan seperti ini:
<div class="copyright">
  # ......Di sini sudah ada beberapa konfigurasi
  # Tambah kod baharu 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
# Terbitkan setelah pasti tiada masalah
hexo d

Menambah Fail README.md pada Repositori

Setiap projek biasanya mempunyai fail README.md, tetapi apabila Hexo diatur gerak ke repositori, fail README.md dalam projek akan ditimpa. Oleh itu, fail konfigurasi perlu ditetapkan untuk mengelakkan penimpaan.

Di bawah direktori akar source dalam direktori Hexo, tambah fail README.md. Ubah fail konfigurasi tapak _config.yml, dan tetapkan nilai parameter skip_render kepada:

skip_render: README.md

Simpan dan keluar. Apabila anda menggunakan perintah hexo d lagi untuk mengatur gerak blog, fail README.md ini tidak akan diproses.

Beberapa Pemalam Lazim

Sandaran Fail Sumber

# Tambah alamat repositori blog yang telah ditetapkan sebelum ini
git remote add https://github.com/your-name/your-name.github.io.git

# Tambah dan simpan perubahan semasa, serta catatkan komen
git add .
git commit -m "Kemas kini fail sumber"

# Cipta dan tukar ke cawangan baharu
git checkout -b source

# Hantar semua kandungan cawangan sumber tempatan ke cawangan sumber di repositori jauh
git push origin source:source
npm install -g hexo-cli
# Klon repositori ke tempatan
git clone https://github.com/your-name/your-name.github.io.git

# Jika anda sudah mengklon secara tempatan, anda perlu menarik kandungan cawangan terkini sebelum setiap kemas kini blog
git pull origin

# Tukar ke cawangan yang sepadan
git checkout source

# Setelah semua pemalam di bawah konfigurasi Hexo dipasang, anda boleh mula mengemas kini dan mengedit kandungan blog
npm install

# Selepas mengubah kandungan, ingat untuk membuat sandaran segera bagi keseluruhan proses
git add .
git commit -m "Kemas kini blog xxx"
git push origin source:source

# Terbitkan dan hantar kandungan blog terkini ke laman domain
hexo clean
hexo g  # Jana halaman web statik
hexo s  # Pratonton kesan blog secara tempatan
hexo d  # Terbitkan kandungan blog terkini

Ringkasan Beberapa Perintah Lazim

hexo g
#atau hexo generate, menjana halaman web statik daripada fail sumber
hexo d
#atau hexo deploy, menerbitkan dan menghantar ke GitHub Pages
hexo s
#atau hexo server, menguji penyebaran secara tempatan
hexo clean
# Kosongkan cache halaman web statik, kemudian hexo d untuk menjana semula