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 命令完成後，啓動服務見到下面的頁面表示成功。

文件列表以下，未列出的皆爲命令生成的文件，無須添加到版本控制工具中。

# 博客文件
├── _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
複製代碼

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

4. 個性化配置

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

4.1 修改站點 logo 和 標題

修改前：

修改博客配置文件 _config.yml。

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

修改後：

4.2 修改主頁標題

修改前：

修改主題配置文件 _config.yml。

# page的封面
cover:
 title: FLUEKY # 不設置 ，默認顯示站點的標題。
  # logo: assets/logo.png # logo和title只顯示一個，若同時設置，則只顯示logo
複製代碼

4.3 修改用戶LOGO

修改前：

修改主題配置文件 _config.yml。

# 側邊欄小部件配置
sidebar:
 - widget: author
 avatar: pic/user_icon.png # 此處替換 logo
 social: true
複製代碼

4.4 修改做者信息

# Site
# 做者名稱
author: Flueky
# 做者圖標，使用相對路徑時，須要關注文章實際生成的目錄。
# 此路徑在文章中使用，可是pic文件夾在source目錄下
# 若是更改了 permalink ，下面的路徑須要作修改。
avatar: ../../../../pic/user_icon.png
複製代碼

4.5 配置菜單

菜單指主頁標題，搜索框下四個模塊。

# 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 導航欄默認不可見，電腦端須要上滑頁面至主頁圖片消失時顯示 。手機端點擊右上角圖標顯示。此處只 列出 電腦端的配置 。

# 桌面端導航欄菜單
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/。