Hexo 建站手札——基礎

flueky發表於2019-11-03
Hexo

0. 前言

2016 年 2 月，寫了工作中第一篇部落格。至今快 4 年時間，寫了幾十篇文章，也使用過幾個平臺。

  1. CSDN 一直在用，上面有著幾乎全部的文章。傳送門
  2. 掘金 這兩年掘金順勢崛起，也在上面同步過數篇部落格。傳送門
  3. 簡書 非專業技術分享平臺，已經棄用。

直到接觸到 jekyll 、 Hexo 這樣的部落格生成工具。前者使用一年，沒多研究其擴充套件功能。本文將介紹使用 Hexo 建站的步驟。

本文適用於初學者，如果您已具備 Hexo 建站技能，需要豐富下網頁的功能，請參閱Hexo 建站手札——進階。

1. 準備工作

萬事開頭難，建站也是需要做一些準備的。

  • 搭建 Hexo 環境。
  • 熟悉用 MarkDown 寫作。
  • 程式碼託管平臺。
  1. 使用 Hexo 建站，建議參照官方文件。
  2. 如果您還在使用 html 排版的方式，只能說 out 了。使用 md 寫作，快速排版，實時對比。
  3. 將文章存放在 GitHub 或 GitLab 等這樣的開源平臺，或者購買域名伺服器。

建議前期使用開源平臺，因為免費，入門簡單。甚至不需要編碼基礎。

1.1 建立倉庫

  1. 註冊 GitHub 。假如使用者名稱是 flueky ,那麼你的 GitHub 主頁地址是 github.com/flueky。
  2. 建立倉庫，必須名字是 flueky.github.io ,其中 flueky 替換成你自己的 GitHub 賬戶名字。即，建立完後，倉庫地址是 github.com/flueky/flue…。

將此倉庫作為部落格主頁後 ，可以直接使用域名 flueky.github.io/ 訪問 。

主題來自於 xaoxuu 的 matrial x 。

2. Hexo 常用命令

2.1 建立目錄

# 建立 blog 目錄
hexo init blog
複製程式碼

下面的命令，如無特殊說明，都是在 blog 目錄下執行。

2.2 啟動服務

# 預設啟動引數，訪問地址：http://127.0.0.1:4000
hexo server
# 使用指定埠，用在埠衝突的情況下 訪問地址：http://127.0.0.1:4001
hexo server -p 4001
# 帶草稿箱檔案啟動
hexo server --draft
複製程式碼

2.3 部署部落格

# 在配置好站點後，將部落格檔案推送至站點
hexo deploy
# 清楚生成檔案
hexo clean
# 通常使用下面的方式合用兩條命令
hexo clean && hexo deploy
複製程式碼

3. 初始化部落格

正確搭建好 Hexo 環境後，可以使用 init 命令完成部落格目錄建立。

init 命令完成後，啟動服務見到下面的頁面表示成功。

Hexo 建站手札——基礎

檔案列表如下，未列出的皆為命令生成的檔案，無須新增到版本控制工具中。

# 部落格檔案
├── _config.yml # 部落格配置檔案，可修改大多數配置，需要重啟服務。
├── package.json # 程式配置檔案。無須修改。
├── scaffolds # 模板目錄，使用 hexo new 命令新建部落格檔案時使用。
├── source # 部落格資原始檔，存放部落格文字和圖片。
│   └── _drafts # drafts (草稿箱目錄)，使用  hexo publish 命令移動到 _posts 目錄。
│   └── _posts # post 目錄，部署時直接部署此目錄的部落格文字。
└── themes # 所有主題都存放在此目錄下。
    └── landscape #主題
複製程式碼

使用主題 material-x。

# 在 blog 目錄中執行，獲取主題原始碼
git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x
# 安裝相關依賴包
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less
複製程式碼

或者直接使用 xaoxuu 或 flueky 整理好的 demo 。

# 獲取 xaoxuu 原始碼
git clone https://github.com/xaoxuu/blog-example blog
# 獲取 flueky 原始碼，可以使用其它版本，具體見說明
git clone --branch v0.0.2 https://github.com/flueky/hexo-blog.git 
# 在 blog 目錄中執行，安裝 hexo 有關檔案後方可使用 hexo 命令
npm install
複製程式碼

在部落格配置檔案 _config.yml 中切換主題。

# theme: landscape # 註釋舊主題
theme: material-x
複製程式碼

再次啟動服務見到下面的頁面表示成功。

Hexo 建站手札——基礎

4. 個性化配置

以下配置 ，均是基於 material-x 主題。

4.1 修改站點 logo 和 標題

修改前：

Hexo 建站手札——基礎

修改部落格配置檔案 _config.yml。

# Site
# 站點名稱
title: Flukey 小站
# 站點圖示
favicon: pic/user_icon.png
複製程式碼

修改後：

Hexo 建站手札——基礎

4.2 修改主頁標題

修改前：

Hexo 建站手札——基礎

修改主題配置檔案 _config.yml。

# page的封面
cover:
  title: FLUEKY # 不設定 ，預設顯示站點的標題。
  # logo: assets/logo.png    # logo和title只顯示一個，若同時設定，則只顯示logo
複製程式碼
Hexo 建站手札——基礎

4.3 修改使用者LOGO

修改前：

Hexo 建站手札——基礎

修改主題配置檔案 _config.yml。

# 側邊欄小部件配置
sidebar:
  - widget: author
    avatar: pic/user_icon.png # 此處替換 logo
    social: true
複製程式碼
Hexo 建站手札——基礎

4.4 修改作者資訊

Hexo 建站手札——基礎 
# Site
# 作者名稱
author: Flueky
# 作者圖示，使用相對路徑時，需要關注文章實際生成的目錄。
# 此路徑在文章中使用，但是pic資料夾在source目錄下
# 如果更改了 permalink ，下面的路徑需要做修改。
avatar: ../../../../pic/user_icon.png
複製程式碼
Hexo 建站手札——基礎

4.5 配置選單

選單指主頁標題，搜尋框下四個模組。

Hexo 建站手札——基礎 
# page的封面
cover:
  # 主頁封面選單
  features:
    - name: 博文
      icon: fas fa-rss
      url: /
    - name: 專案
      icon: fas fa-code-branch
      url: projects/
    - name: 友鏈
      icon: fas fa-link
      url: friends/
      rel: nofollow
    - name: 關於
      icon: fas fa-info-circle
      url: about/
      rel: nofollow
複製程式碼

按照上面的配置修改後，請在 source 目錄下做如下操作。

  1. 建立 projects 資料夾，建立 index.md 檔案。內容：

    ---
title: 專案
---
複製程式碼

  2. 建立 friends 資料夾，建立 index.md 檔案。內容：

    ---
layout: links
title: 我的朋友們
sidebar: []
links:
  - group: 歡迎各行各業的朋友
    icon: fas fa-handshake
    items:
    - name: '<i class="fas fa-comment fa-fw" aria-hidden="true"></i> 趕快留言吧'
      avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@18.12.27/avatar/avatar.png
      url: '#comments'
      backgroundColor: '#869989'
      textColor: '#FFFD'
      tags:
      - 1~4個標籤
      - 兩個最佳
---

<br>

各位大佬想交換友鏈的話可以在下方留言，必須要有名稱、頭像連結、和至少一個標籤哦～

> 名稱： Flueky Tech-site
頭像： https://flueky.github.io/pic/img/user_icon.gif
網址： https://flueky.github.io
標籤： Android
複製程式碼

  3. 建立 about 資料夾，建立 index.md 檔案。內容：

    ---
title: 公開的祕密
---
複製程式碼

4.6 配置導航欄

material-x 導航欄預設不可見，電腦端需要上滑頁面至主頁圖片消失時顯示 。手機端點選右上角圖示顯示。此處只 列出 電腦端的配置 。

Hexo 建站手札——基礎 
# 桌面端導航欄選單
menu_desktop:
  - name: 示例
    icon: fas fa-grin
    url: /
  - name: 分類
    icon: fas fa-folder-open
    url: categories/
    rel: nofollow
  - name: 標籤
    icon: fas fa-hashtag
    url: tags/
    rel: nofollow
  - name: 歸檔
    icon: fas fa-archive
    url: archives/
    rel: nofollow
複製程式碼

按照上面的配置修改後，請在 source 目錄下做如下操作。

  1. 建立 categories 資料夾，建立 index.md 檔案。內容：

    ---
layout: category
index: true
title: 所有分類
---
複製程式碼

  2. 建立 tags 資料夾，並建立 index.md 檔案。內容：

    ---
layout: tag
index: true
title: 所有標籤
---
複製程式碼

  3. 建立 archives 資料夾。無須建立 index.md 檔案， hexo 已經處理 。

4.7 使用 icon

material-x 支援使用 fontawesome 的 icon 。

icon: fas fa-grin # 圖片名是 grin
複製程式碼

4.8 配置部署

修改部落格配置檔案 _config.yml。

deploy:
	# 配置部署到 GitHub 上的示例。
  type: git
  repo: https://github.com/flueky/flueky.github.io.git
  branch: master
複製程式碼

之後使用 deploy 命令部署到指定的倉庫地址上 ，就可以使用 flueky.github.io訪問。可能需要等待幾分鐘。

截止到這裡，已經可以盡情的寫文章了。文章中以 GitHub 為例，所有使用者名稱 flueky 需要換成自己的。

原始碼地址

覺得有用？那打賞一個唄。去打賞

個人主頁已經更新 ，歡迎收藏flueky.github.io/。

相關文章