คู่มือฉบับย่อ: สร้างบล็อก Hexo ตั้งแต่เริ่มต้น (เวอร์ชัน 2024)

#การสร้างบล็อก

คุณเบื่อหน่ายกับหน้าตาบล็อกที่ดูไม่สวยงาม หรือรำคาญการแจ้งเตือนที่ขึ้นมาไม่หยุดบ้างไหม? หรือคุณอยากมีบล็อกเป็นของตัวเองมานานแล้ว แต่ต้องมาติดกับคู่มือที่ซับซ้อนและโค้ดที่ชวนปวดหัวใช่หรือเปล่า? ถ้าเป็นอย่างนั้น ขอแสดงความยินดีด้วย! บทความนี้จะสอนคุณสร้างบล็อกเป็นของตัวเองแบบจับมือทำ ด้วยวิธีที่ง่ายที่สุดเท่าที่จะเป็นไปได้ เพียงแค่คุณต้องมีความอดทนเล็กน้อยและทำตามไปทีละขั้นตอนเท่านั้นเอง

Hexo เป็นเฟรมเวิร์กสำหรับบล็อกที่รวดเร็ว เรียบง่าย และมีประสิทธิภาพสูง ซึ่งเรียกได้ว่าเป็นสวรรค์ของมือใหม่เลยก็ว่าได้ ยิ่งไปกว่านั้น GitHub ก็ยังช่วยให้เราไม่ต้องวุ่นวายกับการเช่าและติดตั้งเซิร์ฟเวอร์เพิ่มเติม บทความนี้จึงจะพาคุณสร้างบล็อกโดยใช้ Hexo และ GitHub เป็นหลักครับ

ในปี 2018 ผมเคยเขียนบทความ คู่มือสร้างบล็อกแบบง่ายๆ ตั้งแต่เริ่มต้น ไว้แล้วครั้งหนึ่ง แต่เนื่องจากมีการอัปเดตปลั๊กอิน ทำให้มีรายละเอียดบางส่วนที่ต้องแก้ไข ผมจึงขออัปเดตและนำเสนอคู่มือฉบับย่อปี 2024 นี้อีกครั้งครับ

การเตรียมตัว

การสร้างบล็อก Hexo Static บนเครื่องของคุณ

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

ถูกต้องแล้วครับ! ส่วนหลักของบล็อกเสร็จสมบูรณ์แล้ว มาลองดูผลงานกันเลย รันคำสั่ง:

$ hexo server

ตอนนี้เปิดเบราว์เซอร์ พิมพ์ localhost:4000 คุณก็จะเห็นหน้าตาบล็อกในปัจจุบันแล้วครับ ตื่นเต้นเล็กน้อยแล้วกด Ctrl + C เพื่อดำเนินการขั้นต่อไปได้เลย

การตั้งค่าส่วนบุคคล (เบื้องต้น)

การเปลี่ยนธีม

$ 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 #หรือ hexo generate
hexo server

การตั้งค่าไซต์

# Site
title: 未知的世界                //ชื่อบล็อก
subtitle:
description:  Do something cool //ข้อความสโลแกน
author: LulalaP                 //ผู้เขียน
language: zh-Hans               //ภาษาของเว็บไซต์
timezone:

การตั้งค่ารูปโปรไฟล์ใน Sidebar

avatar:
    url: /uploads/avatar.jpg

การปรับปรุงหน้าบล็อก

การเพิ่มเมนู

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

การสร้างหน้าหมวดหมู่ (Categories)

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

การสร้างหน้ากลุ่มแท็ก (Tag Cloud)

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

การสร้างหน้า “เกี่ยวกับฉัน” (About Me)

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

การตั้งค่าลิงก์โซเชียลใน 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

การเชื่อมโยงบล็อกกับ 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

ตอนนี้ เปิดเบราว์เซอร์และเข้าชม http://your-name.github.io ขอแสดงความยินดีด้วย! บล็อกของคุณสร้างเสร็จเรียบร้อยแล้วครับ

การผูกโดเมน

ตอนนี้บล็อกของคุณสร้างเสร็จสมบูรณ์แล้ว และสามารถเข้าถึงได้ผ่านโดเมนของ GitHub แต่จะดีกว่านี้ถ้าคุณผูกโดเมนสั้นๆ เข้ากับบล็อกของคุณ

การซื้อโดเมน

การตั้งค่า Domain Resolution

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

หลังจากตั้งค่า Domain Resolution เสร็จแล้ว ให้เข้าไปที่ไดเรกทอรีบล็อก สร้างไฟล์ชื่อ CNAME (โปรดสังเกตว่าต้องเป็นตัวพิมพ์ใหญ่ และไม่มีนามสกุลไฟล์) ในโฟลเดอร์ source เปิดไฟล์นั้นด้วย Notepad (หรือโปรแกรมแก้ไขข้อความอื่น) แล้วใส่ชื่อโดเมนที่คุณซื้อมา เช่น www.philoli.com

hexo g
hexo d

ตอนนี้เปิดเบราว์เซอร์ พิมพ์ชื่อโดเมนของคุณแล้วกด Enter ขอแสดงความยินดีด้วย! คุณมีบล็อกที่มีโดเมนเป็นของตัวเองแล้ว

การเผยแพร่บทความใหม่

title หัวข้อบทความ
date วันที่สร้าง (วันที่สร้างไฟล์)
updated วันที่แก้ไข (วันที่แก้ไขไฟล์)
comments เปิดใช้งานคอมเมนต์ (true)
tags แท็ก
categories หมวดหมู่
permalink ชื่อใน URL (ชื่อไฟล์)
hexo g
hexo d

การตั้งค่าส่วนบุคคล (ขั้นสูง)

ต่อไปนี้คือการตั้งค่าบล็อกส่วนตัวขั้นสูงบางส่วน ผู้เริ่มต้นสามารถข้ามไปก่อนได้

การเพิ่ม RSS

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

การตัดข้อความบทความบนหน้าแรก

    <!--more-->

การจัดข้อความอ้างอิงในบทความให้อยู่กึ่งกลาง

{% centerquote %}
引用正文
{% endcenterquote %}

{% centerquote %} 引用正文 {% endcenterquote %}

การแก้ไขสไตล์ Code Block

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:

การตั้งค่าเวลาสร้างไซต์

since: 2024

การปรับปรุงสไตล์ลิงก์บทความ

// 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;
  }
}

การเพิ่มรูปภาพพื้นหลังให้กับบล็อก

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //รูปภาพไม่ครอบคลุมทั้งหน้า จะซ้ำหรือไม่และซ้ำอย่างไร
    background-attachment:fixed;    //รูปภาพจะเลื่อนตามการสกรอลล์หรือไม่
    background-size: cover;         //ครอบคลุม
    background-position:50% 50%;    //ตำแหน่งรูปภาพ
}

การตั้งค่าพื้นหลังเนื้อหาบล็อกให้โปร่งแสง


//ทำให้เนื้อหาบล็อกโปร่งใส
//ตั้งค่าความโปร่งใสของเนื้อหาบทความ
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;
  }
}


//ตั้งค่าความโปร่งใสของ Sidebar
.sidebar {
  opacity: 0.9;
}

//ตั้งค่าความโปร่งใสของแถบเมนู
.header-inner {
  background: rgba(255,255,255,0.9);
}

//ตั้งค่าความโปร่งใสของช่องค้นหา (local-search)
.popup {
  opacity: 0.9;
}

การปรับปรุงความสวยงามของ Inline Code Block

// ปรับปรุงความสวยงามของแท็กโค้ด
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

การเพิ่มจำนวนผู้เข้าชมที่ท้ายเว็บไซต์

# ค้นหาส่วนแท็ก copyright แล้วเพิ่มโค้ดภายในแท็กนั้น

<div class="copyright">
# ......มีการตั้งค่าบางส่วนอยู่แล้วที่นี่
# เพิ่มโค้ดใหม่ตรงนี้
</div>

# หลังจากเพิ่มแล้วจะเป็นแบบนี้:
<div class="copyright">
  # ......มีการตั้งค่าบางส่วนอยู่แล้วที่นี่
  # เพิ่มโค้ดใหม่ตรงนี้
  {%- 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
# ยืนยันว่าไม่มีปัญหาแล้วเผยแพร่
hexo d

การเพิ่มไฟล์ README.md ไปยัง Repository

โดยปกติแล้วทุกโปรเจกต์จะมีไฟล์ README.md แต่เมื่อใช้ Hexo ในการ Deploy ไปยัง Repository ไฟล์ README.md ของโปรเจกต์จะถูกเขียนทับ ดังนั้นจึงจำเป็นต้องตั้งค่าในไฟล์คอนฟิกเพื่อป้องกันการเขียนทับ

เพิ่มไฟล์ README.md ในไดเรกทอรีรูท source ภายใต้ไดเรกทอรี Hexo จากนั้นแก้ไขไฟล์คอนฟิกไซต์ _config.yml โดยตั้งค่าพารามิเตอร์ skip_render เป็น:

skip_render: README.md

บันทึกและออก เมื่อใช้คำสั่ง hexo d เพื่อ Deploy บล็อกอีกครั้ง ไฟล์ README.md นี้ก็จะไม่ถูก Render แล้ว

ปลั๊กอินยอดนิยมบางส่วน

การสำรองไฟล์ต้นฉบับ

# เพิ่มที่อยู่ Repository ของบล็อกที่ตั้งค่าไว้ก่อนหน้านี้
git remote add https://github.com/your-name/your-name.github.io.git

# เพิ่มและบันทึกการเปลี่ยนแปลงปัจจุบัน พร้อมบันทึกข้อความ
git add .
git commit -m "源文件更新"

# สร้างและสลับไปยัง Branch ใหม่
git checkout -b source

# พุชเนื้อหาทั้งหมดของ Branch source ในเครื่องไปยัง Branch source ของ Remote Repository
git push origin source:source

การเขียนบล็อกบนคอมพิวเตอร์เครื่องอื่น

เมื่อต้องการเขียนบล็อกบนคอมพิวเตอร์เครื่องอื่น คุณจะต้องติดตั้งซอฟต์แวร์พื้นฐาน จากนั้นดึง Repository ที่สำรองไว้บน GitHub มายังเครื่องของคุณ เพื่ออัปเดตบล็อก

npm install -g hexo-cli
# Clone Repository มายังเครื่อง
git clone https://github.com/your-name/your-name.github.io.git

# หากมีการ Clone อยู่แล้ว ทุกครั้งก่อนอัปเดตบล็อกต้องดึงเนื้อหา Branch ล่าสุด
git pull origin

# สลับไปยัง Branch ที่เกี่ยวข้อง
git checkout source

# หลังจากติดตั้งปลั๊กอินทั้งหมดภายใต้การตั้งค่า Hexo แล้ว ก็สามารถเริ่มอัปเดตและแก้ไขเนื้อหาบล็อกได้
npm install

# หลังจากแก้ไขเนื้อหาแล้ว อย่าลืมสำรองข้อมูลทันที
git add .
git commit -m "博客更新xxx"
git push origin source:source

# เผยแพร่และพุชเนื้อหาบล็อกล่าสุดไปยังโดเมนเว็บไซต์
hexo clean
hexo g  # สร้างไฟล์ Static
hexo s  # ดูตัวอย่างบล็อกบนเครื่อง
hexo d  # เผยแพร่เนื้อหาบล็อกล่าสุด

สรุปคำสั่งยอดนิยมบางส่วน

hexo g
# หรือ hexo generate, สร้างหน้าเว็บ Static จากไฟล์ต้นฉบับ
hexo d
# หรือ hexo deploy, เผยแพร่และพุชไปยัง GitHub Pages
hexo s
# หรือ hexo server, ติดตั้งและทดสอบบนเครื่อง
hexo clean
# ล้างแคชของหน้าเว็บ Static จากนั้น hexo d เพื่อสร้างใหม่