從零開始架設 Hexo 部落格簡易教學（2024年版）

#部落格架設

你是不是早就受夠了那些部落格網站毫無美感的介面，厭倦了無止盡的網站推播，一直很想建立一個專屬自己的部落格，卻被繁瑣的教學和一堆令人頭疼的程式碼給嚇退了呢？那麼恭喜你，這篇文章就是要用最淺顯易懂的方式，手把手教你架設專屬於自己的部落格。你只需要多一點耐心，一步一步跟著做就行了。

Hexo 是一個快速、簡潔又高效的部落格框架，簡直是新手們的救星；而 GitHub 又省去了我們額外租用及部署伺服器的麻煩。所以這篇文章會運用 Hexo 和 GitHub 來架設部落格。

我曾在 2018 年寫過一篇 從零開始搭建博客簡明教程，由於外掛更新，有些細節需要調整，所以這次重新推出 2024 年版的簡易教學。

準備工作

本地架設 Hexo 靜態部落格

$ 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:

設定側邊欄頭像

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

建立分類頁面

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

建立標籤雲頁面

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

建立「關於我」頁面

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

設定側邊欄社群連結

# 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 的網域來瀏覽。這時候如果再用一個簡短的網域綁定到這個部落格上，那就更完美了！

網域購買

網域解析

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

配置完網域解析後，進入部落格目錄，在 source 目錄下新建一個命名為 CNAME 的檔案（請注意要大寫，且沒有副檔名），用記事本打開編輯，寫入購買好的網域，例如：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 %}

修改程式碼區塊樣式

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 {
  opacity: 0.9;
}

//選單欄的透明度設定
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜尋框（local-search）的透明度設定
.popup {
  opacity: 0.9;
}

優化行內程式碼區塊樣式

// 針對Code程式碼標籤的美化
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 檔案

每個專案下通常都會有一個 README.md 檔案，但是使用 Hexo 部署到儲存庫後，專案下的 README.md 檔案會被覆蓋，所以需要設定設定檔來避免覆蓋。

在 Hexo 目錄下的 source 根目錄下新增一個 README.md 檔案，修改網站設定檔 _config.yml，將 skip_render 參數的值設定為：

skip_render: README.md

儲存後即可退出。再次使用 hexo d 指令部署部落格時，就不會渲染 README.md 這個檔案了。

幾個常用外掛

原始檔備份

# 新增前面設定好的部落格儲存庫網址
git remote add https://github.com/your-name/your-name.github.io.git

# 新增並儲存目前變更，並記錄備註
git add .
git commit -m "原始檔更新"

# 建立並切換到新的分支
git checkout -b source

# 將本地 source 分支的全部內容推送到遠端儲存庫的 source 分支
git push origin source:source

用不同電腦撰寫部落格

npm install -g hexo-cli
# 複製儲存庫到本地
git clone https://github.com/your-name/your-name.github.io.git

# 如果本地已經複製，每次更新部落格前都需要拉取最新分支內容
git pull origin

# 切換到對應分支
git checkout source

# 安裝 Hexo 配置下的所有外掛後，就可以開始更新編輯部落格內容了
npm install

# 修改內容後記得及時一條龍備份
git add .
git commit -m "部落格更新xxx"
git push origin source:source

# 發布並推送最新部落格內容到網域站台
hexo clean
hexo g  # 產生靜態檔案
hexo s  # 本地預覽部落格效果
hexo d  # 發布最新部落格內容

幾個常用指令彙整

hexo g
#或 hexo generate，根據原始檔產生靜態網頁
hexo d
#或 hexo deploy，發布並推送到 GitHub Pages
hexo s
#或 hexo server，本地部署測試
hexo clean
# 清空靜態網頁快取 (cache)，然後 hexo d 重新產生