hexo 實戰：（二）個人獨立部落格豪華裝修合集

北桥苏發表於2024-06-15

前言

上次介紹了使用 Hexo+GitHub Pages，零成本搭建一個專屬自己的獨立部落格網站。我覺得那篇文章是沒有入門門檻的，不管你是什麼行業，只要想打造個人 IP，又不太想受部落格平臺約束，那麼讀完後動手操作一下也能輕鬆完成。而這次呢，上篇也說了 Hexo 會出三篇內容，這裡就要在前者基礎上做進一步升級，將完成下面七個主要的部落格常用功能。

指標

Hexo 如何安裝 Butterfly 主題並配置？
Hexo 如何建立頁面和新增文章？
Hexo 如何新增第三方評論系統？
Butterfly 主題如何新增站內搜尋？
Butterfly 主題如何新增百度統計？
Butterfly 主題如何新增文章置頂功能？
Butterfly 主題如何配置 RSS 和 404 頁面？
如何配合 Typora 完成 md 的同步與本地備份？

主題新增與配置

Hexo 官網專門有一個欄目的主題列表，這裡我選的 “butterfly”，首先拉取主題程式碼到 themes 目錄下，然後在 Hexo 的配置中啟動主題。

拉取主題包

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

啟動主題

theme: butterfly

基礎配置

基礎配置主要是設定網站的標題、描述、SEO、選單等項，下面我就列出 hexo 的 config（根目錄下_config.yml），和主題 Butterfly 的 config（themes 的 Butterfly 下_config.yml），並註釋相關項的簡介僅供參考。

hexo_config.yml

title: ZERO開發                           #網站標題
subtitle: 一個獨立開發者的部落格               #網站副標題
description: 公眾號：ZERO開發               #網站描述
keywords: 技術部落格、獨立開發者、PHP開發、Pthon開發、人工智慧、物聯網、遊戲開發
author: 北橋蘇              #您的名字
language: zh-CN            #網站使用的語言
timezone:                   #網站時區。Hexo 預設使用您電腦的時區

# URL 網址
## 如果您的網站存放在子目錄中，
## 例如 http://yoursite.com/blog，則請將您的 url 
## 設為 http://yoursite.com/blog 並把 root 設為 /blog/。
url: http://z11r00.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory 目錄配置
source_dir: source       #原始檔夾，這個資料夾用來存放內容。
public_dir: public       #公共資料夾，這個資料夾用於存放生成的站點檔案。
tag_dir: tags            #標籤資料夾
archive_dir: archives    #歸檔資料夾
category_dir: categories #分類資料夾
code_dir: downloads/code #nclude code 資料夾
i18n_dir: :lang          #國際化（i18n）資料夾
skip_render:             #跳過指定檔案的渲染，您可使用 glob 表示式來匹配路徑。

# Writing 文章
new_post_name: :title.md # 新建文章預設檔名
default_layout: post     # 預設佈局
titlecase: false # Transform title into titlecase
external_link: true # 在新標籤中開啟一個外部連結，預設為true
filename_case: 0    #轉換檔名，1代表小寫；2代表大寫；預設為0，意思就是建立文章的時候，是否自動幫你轉換檔名，預設就行，意義不大。
render_drafts: false  #是否渲染_drafts目錄下的文章，預設為false
post_asset_folder: false #啟動 Asset 資料夾
relative_link: false    #把連結改為與根目錄的相對位址，預設false
future: true        #顯示未來的文章，預設false
syntax_highlighter: highlight.js
highlight:    #程式碼塊的設定
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Category & Tag 分類和標籤的設定
default_category: uncategorized        #預設分類
category_map:                          #分類別名
tag_map:                               #標籤別名

# 全域性日期格式化
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: 'mtime'
pagination_dir: page    #分頁目錄

## 外掛index，用於顯示分頁和排序配置
index_generator:
  path: ''
  per_page: 5    # 0.關閉分頁功能  >0.每頁條數
  order_by:
    top: -1        # 置頂排序： -1.倒序 1.正序
    date: -1    # 日期排序： -1.倒序 1.正序

# 主題啟動配置
theme: butterfly

# Deployment github部署配置
deploy:
  type: git
  repository: https://github.com/z11r00/z11r00.github.io
  branch: main
  
##hexo-generator-search搜尋外掛配置
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  
## rss配置
feed:
  type: atom
  path: atom.xml
  limit: 20

## rss位置
rss: /atom.xml

hexo_butterfly_config.yml

nav:
  logo: /img/logo.png  # 導航欄左側LOGO
  display_title: true
  fixed: true # 是否置頂導航欄

## 選單圖示配置
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

# Menu 選單跳轉配置
menu:
  首頁: / || fas fa-home
  時間軸: /archives/ || fas fa-archive
  標籤: /tags/ || fas fa-tags
  分類: /categories/ || fas fa-folder-open
  #清單||fa fa-heartbeat:
    #音樂: /music/ || fas fa-music
    #照片: /Gallery/ || fas fa-images
    #電影: /movies/ || fas fa-video
  友鏈: /link/ || fas fa-link
  關於: /about/ || fas fa-heart

# Code Blocks (程式碼相關)
# --------------------------------------
highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false   # 程式碼是否自動換行

# Social Settings (社交圖示設定)
social:
  fab fa-github: https://github.com/z11r00 || Github || '#24292e'
  fas fa-envelope: 2652364582@qq.com || Email || '#4a7dbe'
  fas fa-rss: /atom.xml || RSS
  

# Image (圖片設定)
# --------------------------------------

# Favicon（網站圖示）
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
  img: /img/avatar.png
  effect: false

# 是否禁用所有跳轉頁的頂部圖片
disable_top_img: true

# 首頁圖
index_img: /img/index_img.jpg

# 所有頁面的預設頂部圖
default_top_img: /img/default_top_img.jpeg

# 歸檔（時間線）頁面頂部圖
archive_img: /img/archive_img.jpg

# 標籤頁面頂部圖
tag_img:

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:

# 分類頁面頂部圖
category_img:

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:

## 封面配置
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  (當沒有設定cover時，預設的封面顯示)
  default_cover:
    - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# 404 頁面配置
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/404.jpg

## 文章配置
post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是建立日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是建立日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

# 錨點配置
anchor:
  # when you scroll, the URL will update according to header id.
  auto_update: false
  # Click the headline to scroll and update the anchor
  click_to_scroll: false

# figcaption (圖片描述文字)
photofigcaption: false

# 複製功能的配置
# copyright: Add the copyright information after copied content (複製的內容後面加上版權資訊)
copy:
  enable: true      # 是否開啟網站複製許可權
  copyright:
    enable: false   # 是否開啟複製版權資訊新增
    limit_count: 50 # 字數限制，當複製文字大於這個字數限制時，將在複製的內容後面加上版權資訊

# Post
# --------------------------------------

# toc (文章的目錄配置)
toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false 
  scroll_percent: true

# 文章版權設定
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# Sponsor/reward 文章打賞
reward:
  enable: true
  text: 打賞一下~
  QR_code:
    - img: /img/qrcode/wechat_trade.jpg
      link:
      text: 微信
    - img: /img/qrcode/alipay_trade.jpg
      link:
      text: 支付寶

# 文章編輯器配置
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

# 文章推薦配置
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示建立日或者更新日

# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1

# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
  enable: false
  style: flat # style: simple/flat
  limit_day: 500 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

# Footer Settings（頁尾設定）
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2017
  custom_text: Copyright© ZERO開發-獨立開發者的日常總結<br/><a href="https://beian.miit.gov.cn/" target="_blank">贛ICP備16002525號-1</a>
  # copyright: true # Copyright of theme and framework
  copyright: false
  

# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: left # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fas fa-video
      text: 關注我
      link: https://space.bilibili.com/286666708/
  card_announcement:
    enable: true
    content: 微信公眾號：ZERO開發，致力於為猿友們提供有價值的內容
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    orderby: random # Order of tags, random/name/length
    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
  card_post_series:
    enable: true
    series_title: false # The title shows the series name
    orderBy: 'date' # Order by title or date
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending

# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

# Time difference between publish date and now (網頁執行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: false
  publish_date:

# Aside widget - 最新評論
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true

# Bottom right button (右下角按鈕)
# --------------------------------------

# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
  enable: false
  # The text of a button
  default: 繁
  # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
  defaultEncoding: 2
  # Time delay
  translateDelay: 0
  # The text of the button when the language is Simplified Chinese
  msgToTraditionalChinese: '繁'
  # The text of the button when the language is Traditional Chinese
  msgToSimplifiedChinese: '簡'

# Read Mode (閲讀模式)
readmode: true

# Local search (hexo-generator-search建立搜尋)
local_search:
  enable: true
  # Preload the search data when the page loads.
  preload: false
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  CDN:

# Docsearch
docsearch:
  enable: false
  appId:
  apiKey:
  indexName:
  option:

# Share System (分享)
# --------------------------------------
# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true
  sites: weibo,wechat,qq,facebook,twitter

# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

# Comments System （評論系統）
# --------------------------------------
# 評論配置
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: gitalk # Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

# disqus
# https://disqus.com/
disqus:
  shortname:
  apikey: # For newest comments widget

# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論列表，相容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
  shortname:
  apikey:
  option:

# livere (來必力)
# https://www.livere.com/
livere:
  uid:

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: Ov23…………1C6fM
  client_secret: 4304…………44433f77352
  repo: z11r00.github.io
  owner: z11r00
  admin: z11r00
  option:

# Analysis （第三方統計配置）
# --------------------------------------

# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics: 74270…………………………………………

# Advertisement
# --------------------------------------

# Google Adsense (谷歌廣告)
google_adsense:
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true

# Verification (站長驗證)
# --------------------------------------

site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

建立選單頁面

頁面包括標籤頁（tags）、分類頁（categories）、友鏈頁（link）、關於頁（about），當然也可以自行新增，比如音樂電影之類。不過新增這種頁面方式都大同小異，以下以標籤頁舉例。

執行命令

hexo new page tags

編輯 MD

執行命令後，會在 source 下根據 butterfly 模板生成對應的 md 檔案，tags 就是 tags，不過要將 md 檔案的 type 修改為對應的型別，型別見上。

title: 標籤頁 date: 2024-05-02 21:01:24 type: "tags"

Page（頁面）front-matter

title: 頁面名稱
date:  建立日期
type: （tags,link,categories這三個頁面需要配置）
comments: (是否需要顯示評論，預設true)
description: 用於SEO最佳化
top_img: (設定頂部圖)
mathjax: (數學公式顯示是否支援)
katex:   (Tex公式顯示是否支援)

建立文章

寫文章，可以透過命令建立，也可以在 source/_posts 目錄下，自行新建 markedown 檔案，因為命令也是在_posts 資料夾下新建。

執行命令

hexo new "文章的大標題"

Post（文章）front-matter

title: CentOS7下Tomcat啟動慢的原因及解決方案
date: 2017-12-02 21:01:24
description：文章描述，用於做SEO最佳化的
keywords: 文章SEO關鍵詞
top_img: 文章頂部圖
cover: 文章縮圖（封面圖）
toc: true (是否顯示文章目錄)
toc_number: true (是否顯示文章目錄的標識數字)
copyright: true (是否顯示版權)
mathjax: (數學公式顯示是否支援)
katex:   (Tex公式顯示是否支援)
hide: false (是否隱藏當前文章)
comments: true #是否可評論
toc: true #是否顯示文章目錄
categories: "雲伺服器" #分類
tags:   #標籤
 - centOS
 - tomcat

站內搜尋新增

站內搜尋，我是採用的 hexo-generator-search 外掛解決方案，安裝完外掛，然後配置一下，最後用 hexo 清理再生成一下全站靜態，同時在根目錄也會生成一個 search.xml，用於做字串模糊匹配的。

外掛安裝

npm install hexo-generator-search --save

新增或配置

-config（hexo配置）

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

-butterfly-config（butterfly主題配置）

local_search:
  enable: true
  preload: false
  CDN:

清理與生成

hexo clean && hexo g

評論系統新增

第三方評論系統我這裡使用的是 Gitalk ，Gitalk 是一個基於 GitHub Issue 和 Preact 開發的評論外掛。使用 GitHub 登陸，能支援多國語言，至於他的原理，其他博主有介紹。這裡就不展開了，如果有時間以後可能會整體介紹一下常用的第三方評論系統，因為我還是希望評論能支援多種方式登陸的，目前沒有找到合適的就先選擇 Gitalk。

註冊應用賬號

獲取引數

註冊成功後拿到 “Client ID” 和 “Client secrets”（點選生成再複製），其中注意的是 Homepage URL 要設定為使用者名稱.github.io 精確到 https 的地址。Authorization callback URL 填寫註冊的域名，如果繫結了個性化域名就填自己的域名，也是要精確到 https 的位置。

修改 Butterfly 配置

開啟 butterfly 主題的配置檔案，第一個找到 “gitalk” 項，將上面複製的 client id 和 client secrets 貼上。

第二個找到 “comments”，將 use 配置為 "gitalk"，當然也可以用 valine、Disqus 之類的第三方評論系統。

comments:
  use: # 使用的第三方評論系統名稱
  text: true # 是否在按鈕旁顯示評論名稱
  # If you set it to true, the comment count will be invalid
  lazyload: false # 是否設定評論窗為懶載入
  count: true # 是否設定評論數統計
  card_post_count: true # 是否將評論數顯示到首頁
  
gitalk:
  client_id: # github應用ID
  client_secret: # github應用金鑰
  repo: 使用者名稱.github.io
  owner: 使用者名稱
  admin: 使用者名稱

部落格倉庫設定

進入倉庫，點選 “Settings”，找到 “Features”，將 “Issues” 勾選。

文章置頂功能新增

開啟 hexo 配置檔案 _config.yml，如果前面有 per_page 的關閉，使用的是 hexo-generator-index 外掛排序，可以自定義序號和日期排序。

如何要置頂文章，只需在文章 md 的 front-matter 裡新增一個 top 引數，數值自定。文章列表會出現一個釘子圖示，要看到效果則要 hexo 先清理再生成。

新增配置

index_generator:
  path: ''
  per_page: 5  # 每頁條數
  order_by:	   
    top: -1	   # 置頂： -1.倒序 1.順序
    date: -1   # 日期： -1.倒序 1.順序

md 文章設定

清理與生成

hexo clean && hexo g

RSS 配置

對於 RSS 輸出功能，需要安裝 hexo-generator-feed 外掛。最後使用 hexo 清理再生成，部落格根目錄就會生成 atom.xml

外掛安裝

npm install hexo-generator-feed --save

新增配置

feed:
  type: atom
  path: atom.xml
  limit: 20

設定 RSS 地址

rss: /atom.xml

設定 404 頁面

在 hexo 的_config.yml 找到或新增 error_404，設定開啟，分別新增標題和背景圖。

error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/404.jpg

新增百度統計

先登陸或註冊百度統計平臺，找到 “使用設定” -> “程式碼獲取” -> “新版統計程式碼獲取”，然後會看到一段 js 程式碼，只需要複製如下的一個 32 位長度的字串。最後將該字串貼上到 butterfly 的 config.yml 中的 baidu_analytics 中，部署後一天就可以在後臺檢視統計報表了。

MarketDown 用法

關於新建的文章，我希望本地能備份一份，有 md 檔案和圖片，方便上傳到其他平臺部落格。那要怎麼做呢，這裡我用一個免費的 md 工具 ——Typora 為例。

建立檔案和資料夾

建立一個以文章標題的資料夾，裡面再分別建立一 img 資料夾和同文章標題的 md 檔案，img 下再建立一個與文章標題同名的資料夾。

Typora 設定

依次找到 “檔案” -> “偏好設定” -> "影像" , 將插入圖片時的下拉選中 “複製到指定路徑”，填入下面的值。

./img/${filename}/

第二步找到 “格式” -> "影像" -> “設定圖片根目錄”，選擇 markdown 檔案同級的目錄，最後複製圖片時就會複製到 img 下的文章同名目錄下。

為什麼要這樣設定？因為 Hexo 的圖片在打包前都是在主題包 /source/img 裡，而為了方便本地能按文章儲存，也方便將本地的文章圖片直接丟到 img 下，然後 md 檔案放到_post 中。打包之後就能以倉庫圖片展示，而且按文章分類儲存，以後刪除起來也一目瞭然。

寫在最後

這次的最佳化看起來好像是面面俱到了，但其實關於 Hexo 主題還有更細節的處理。比如可以新增部落格看板精靈，酷炫的動態大背景，還有滑鼠跟隨或點選特效等等。但是我這部落格目前定位主要以內容為主，所以暫時就就演示了，當然，如果有使用者喜歡也可以馬上加上去的。

最後呢，就是三部曲的第二篇結束了，那下次就自然地要開始進入 Hexo 章最後一篇。現在是計劃介紹一下怎麼讓部落格被各大搜尋引擎收錄，以及一些推廣心得等等。具體的詳細內容未定，更新時間也還不知道，因為在等我那個小遊戲的軟著下來，下來後我一定要好好寫一篇軟著申請避坑的文章，可實在是太難等了！

（我是一個持續摸索個人副業的普通程式設計師，關注我，和你一起探索更多可能。——ZERO 開發）

如何搭建個人獨立部落格網站?
2020-11-29
網站
hexo+GitHub部落格搭建實戰
2017-09-08
HexoGithub
hexo搭建個人部落格心得
2019-02-20
Hexo
使用 hexo 搭建個人部落格
2019-02-16
Hexo
Hexo+Gitee搭建個人部落格
2021-03-31
HexoGitee
hexo+github搭建個人部落格
2018-11-05
HexoGithub
hexo搭建個人網站部落格完全教程
2018-09-14
Hexo網站
【GitHub】GitHub+Hexo搭建個人部落格
2018-06-13
GithubHexo
Github Pages部署個人部落格（Hexo篇）
2018-04-12
GithubHexo
hexo結合github搭建個人部落格
2018-05-21
HexoGithub
Hexo+Github+Netlify部署個人部落格
2019-04-25
HexoGithub
史上最快用GitHub、Hexo搭建個人部落格
2019-04-25
GithubHexo
HEXO-個人部落格搭建教程彙總
2018-08-11
Hexo
Hexo+Netlify快速搭建個人部落格
2018-07-25
Hexo
Hexo+Github輕鬆搭建個人部落格
2020-12-23
HexoGithub
『部落格搭建』—— 個人部落格全新上線(阿里域名+GitPages+hexo+Yelee)
2018-02-14
阿里GitHexo
使用Hexo框架10分鐘搭建個人部落格
2020-08-18
Hexo框架
基於 Hexo + GitHub Pages 搭建個人部落格（三）
2019-02-18
HexoGithub
如何使用Github+Hexo快速搭建個人部落格
2019-01-27
GithubHexo
使用hexo+Anisina+github搭建個人部落格
2019-01-06
HexoGithub
【hexo】一個好看的個人部落格主題
2018-12-20
Hexo
【轉載】Hexo+GitHub構建個人部落格
2020-10-23
HexoGithub
GitHub、Node.js和Hexo搭建個人部落格
2018-02-04
GithubNode.jsHexo
Windows上利用github和hexo搭建個人部落格
2017-12-13
WindowsGithubHexo
使用Hexo搭建個人部落格的終極資料
2018-09-07
Hexo
關於HEXO搭建個人部落格的點點滴滴
2018-01-29
Hexo
Django搭建個人部落格（二）
2021-09-09
Django
beego搭建個人部落格（二）
2018-03-29
Go
基於github和hexo搭建部落格本地hexo部落格搭建
2017-12-13
GithubHexo
Hexo部落格同步工具
2019-03-01
Hexo
搭建Hexo部落格相簿
2018-09-02
Hexo
Hexo 搭建部落格
2018-12-05
Hexo
hexo搭建github部落格
2017-11-12
HexoGithub
Hexo部落格備份
2024-05-29
Hexo
Hexo 個人部落格 SEO 優化（3）：改造你的部落格，提升搜尋引擎排名
2018-05-01
Hexo優化
手把手教你用Hexo搭建個人技術部落格
2018-03-30
Hexo
關於Hexo6.0搭建個人部落格(高階篇)
2018-04-30
Hexo
Hexo部落格多臺電腦裝置同步管理
2018-04-12
Hexo

hexo 實戰：（二）個人獨立部落格豪華裝修合集

前言

指標

主題新增與配置

拉取主題包

啟動主題

基礎配置

hexo_config.yml

hexo_butterfly_config.yml

建立選單頁面

執行命令

編輯 MD

Page（頁面）front-matter

建立文章

執行命令

Post（文章）front-matter

站內搜尋新增

外掛安裝

新增或配置

清理與生成

評論系統新增

註冊應用賬號

獲取引數

修改 Butterfly 配置

部落格倉庫設定

文章置頂功能新增

新增配置

md 文章設定

清理與生成

RSS 配置

外掛安裝

新增配置

設定 RSS 地址

設定 404 頁面

新增百度統計

MarketDown 用法

建立檔案和資料夾

Typora 設定

寫在最後

相關文章