Hướng dẫn ngắn gọn xây dựng blog Hexo từ A đến Z (phiên bản 2024)

#Xây dựng blog

Chắc hẳn bạn đã quá chán ngán những giao diện blog thiếu thẩm mỹ, mệt mỏi với những thông báo phiền phức không ngừng nghỉ? Bạn đã ấp ủ ý định xây dựng một blog cho riêng mình từ lâu, nhưng lại ngại bắt đầu vì những hướng dẫn phức tạp và hàng loạt đoạn mã đau đầu? Vậy thì xin chúc mừng bạn, bài viết này sẽ từng bước hướng dẫn bạn cách xây dựng blog của riêng mình một cách dễ hiểu nhất. Bạn chỉ cần một chút kiên nhẫn và làm theo từng bước là được.

Hexo, với tư cách là một framework blog nhanh chóng, gọn gàng và hiệu quả, thực sự là một cứu cánh cho những người mới bắt đầu. Hơn nữa, GitHub lại giúp chúng ta không còn phải lo lắng về việc thuê và triển khai máy chủ. Vì vậy, bài viết này sẽ hướng dẫn bạn cách xây dựng blog bằng Hexo và GitHub.

Tôi từng viết một bài hướng dẫn tương tự vào năm 2018 mang tên Xây dựng blog từ đầu với hướng dẫn ngắn gọn. Tuy nhiên, do các plugin đã được cập nhật, có một số chi tiết cần điều chỉnh, vì thế tôi xin giới thiệu lại phiên bản hướng dẫn ngắn gọn năm 2024 này.

Chuẩn bị

Xây dựng blog tĩnh Hexo cục bộ

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

Đúng vậy, phần chính của blog đã hoàn thành! Giờ hãy xem thành quả nhé. Chạy lệnh:

$ hexo server

Bây giờ, hãy mở trình duyệt và nhập localhost:4000 để xem blog của bạn trông như thế nào. Vui mừng một chút rồi nhấn Ctrl + C để tiếp tục các bước sau.

Cài đặt cá nhân hóa (Bước đầu)

Thay đổi Theme

$ 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 #hoặc hexo generate
hexo server

Cấu hình trang web

# Site
title: Thế giới chưa biết                //Tên blog
subtitle:
description:  Do something cool //Một câu khẩu hiệu
author: LulalaP                 //Tác giả
language: zh-Hans               //Ngôn ngữ trang web
timezone:

Đặt ảnh đại diện cho thanh bên

avatar: 
    url: /uploads/avatar.jpg

Hoàn thiện các trang blog

Thêm 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

Tạo trang Danh mục (Categories)

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

Tạo trang Đám mây Thẻ (Tag Cloud)

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

Tạo trang “Về tôi” (About Me)

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

Cài đặt liên kết mạng xã hội trên thanh bên

# 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

Liên kết blog với 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

Bây giờ, mở trình duyệt, truy cập http://your-name.github.io. Chúc mừng bạn, đến đây blog của bạn đã hoàn thành!

Liên kết tên miền riêng

Đến đây, blog đã được xây dựng hoàn chỉnh và có thể truy cập qua tên miền của GitHub. Sẽ càng tuyệt vời hơn nếu bạn liên kết blog này với một tên miền ngắn gọn, dễ nhớ.

Mua tên miền

Cấu hình phân giải tên miền

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Sau khi cấu hình phân giải tên miền, vào thư mục blog, tạo một file mới có tên CNAME (lưu ý viết hoa, không có phần mở rộng) trong thư mục source. Mở file bằng Notepad và điền tên miền đã mua vào, ví dụ: www.philoli.com.

hexo g
hexo d

Bây giờ, mở trình duyệt, nhập tên miền, nhấn Enter. Chúc mừng bạn đã sở hữu một blog với tên miền riêng!

Đăng bài viết mới

title Tiêu đề bài viết
date Ngày tạo (ngày tạo file)
updated Ngày sửa đổi (ngày sửa file)
comments Có bật bình luận không? true
tags Thẻ
categories Danh mục
permalink Tên trong URL (tên file)
hexo g
hexo d

Cài đặt cá nhân hóa (Nâng cao)

Dưới đây là một số cài đặt tùy chỉnh nâng cao cho giao diện blog, người mới bắt đầu có thể bỏ qua phần này trước.

Thêm RSS

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

Ngắt bài viết trên trang chủ

    <!--more-->

Căn giữa văn bản trích dẫn trong bài viết

{% centerquote %}
Nội dung trích dẫn
{% endcenterquote %}

{% centerquote %} Nội dung trích dẫn {% endcenterquote %}

Sửa đổi kiểu dáng khối mã

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:

Đặt thời gian thành lập trang web

since: 2024

Cải thiện kiểu dáng liên kết bài viết

// Kiểu liên kết
.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;
  }
}

Thêm ảnh nền cho blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Khi ảnh không đủ lấp đầy, có lặp lại không và cách lặp lại
    background-attachment:fixed;    //Ảnh có cuộn theo trang không
    background-size: cover;         //Bao phủ
    background-position:50% 50%;    //Vị trí ảnh
}

Đặt nền nội dung blog bán trong suốt


// Làm trong suốt nội dung blog
// Cài đặt độ trong suốt cho nội dung bài viết
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;
  }
}


// Cài đặt độ trong suốt cho thanh bên
.sidebar {
  opacity: 0.9;
}

// Cài đặt độ trong suốt cho thanh menu
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Cài đặt độ trong suốt cho ô tìm kiếm (local-search)
.popup {
  opacity: 0.9;
}

Tối ưu hóa kiểu dáng khối mã nội dòng

// Tùy chỉnh làm đẹp cho thẻ mã Code
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Thêm số lượng khách truy cập vào cuối trang web

# Tìm thẻ copyright, sau đó thêm mã vào bên trong thẻ.

<div class="copyright">
# ......Ở đây đã có một số cấu hình.
# Thêm mã mới vào đây.
</div>

# Sau khi thêm sẽ trông như thế này:
<div class="copyright">
  # ......Ở đây đã có một số cấu hình.
  # Thêm mã mới vào đây.
  {%- 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
# Xác nhận không có vấn đề gì thì xuất bản
hexo d

Thêm file README.md vào repository

Mỗi dự án thường có một file README.md, nhưng khi triển khai bằng Hexo lên repository, file README.md trong dự án sẽ bị ghi đè. Vì vậy, cần cấu hình để tránh việc ghi đè này.

Thêm một file README.md vào thư mục gốc source trong thư mục Hexo, sau đó chỉnh sửa file cấu hình trang web _config.yml, đặt giá trị cho tham số skip_render là:

skip_render: README.md

Lưu và thoát. Khi bạn triển khai blog bằng lệnh hexo d lần nữa, file README.md này sẽ không bị render.

Một số plugin thông dụng

Sao lưu file nguồn

# Thêm địa chỉ repository blog đã cài đặt trước đó.
git remote add https://github.com/your-name/your-name.github.io.git

# Thêm và lưu các thay đổi hiện tại, kèm theo ghi chú.
git add .
git commit -m "Cập nhật file nguồn"

# Tạo và chuyển sang một nhánh mới.
git checkout -b source

# Đẩy toàn bộ nội dung của nhánh source cục bộ lên nhánh source trên repository từ xa.
git push origin source:source

Viết blog trên các máy tính khác nhau

npm install -g hexo-cli
# Clone repository về máy cục bộ.
git clone https://github.com/your-name/your-name.github.io.git

# Nếu đã clone cục bộ, mỗi lần cập nhật blog đều cần kéo nội dung nhánh mới nhất.
git pull origin

# Chuyển sang nhánh tương ứng.
git checkout source

# Sau khi cài đặt tất cả các plugin theo cấu hình Hexo, bạn có thể bắt đầu cập nhật và chỉnh sửa nội dung blog.
npm install

# Sau khi sửa đổi nội dung, hãy nhớ sao lưu ngay lập tức bằng các lệnh sau:
git add .
git commit -m "Cập nhật blog xxx"
git push origin source:source

# Xuất bản nội dung blog mới nhất lên trang web tên miền.
hexo clean
hexo g  # Tạo các file tĩnh.
hexo s  # Xem trước hiệu ứng blog cục bộ.
hexo d  # Xuất bản nội dung blog mới nhất.

Tổng hợp một số lệnh thông dụng

hexo g
# hoặc hexo generate, tạo trang web tĩnh từ các file nguồn.
hexo d
# hoặc hexo deploy, xuất bản và đẩy lên GitHub Pages.
hexo s
# hoặc hexo server, triển khai và kiểm tra cục bộ.
hexo clean
# Xóa cache các trang web tĩnh, sau đó hexo d để tạo lại.