簡直神器！一鍵生成靚麗的部落格網站，真香！

作為程式設計師，如果你喜歡輸出技術文章的話，一定有過搭建個人部落格網站的想法。對比了好多部落格框架之後，我發現Hexo+hexo-theme-matery主題搭建的部落格網站，不僅介面漂亮，而且功能強大。今天帶大家使用Hexo搭建一個靚麗的部落格網站，希望對大家有所幫助！

SpringBoot實戰電商專案mall（50k+star）地址：https://github.com/macrozheng/mall

Hexo簡介

Hexo是一個快速、簡潔且高效的部落格框架。我們可以使用Markdown寫文章，然後通過Hexo生成靜態網站，Hexo的主題非常豐富，很多你見過的部落格都是用它生成的。

hexo-theme-matery主題

使用Hexo時，我們一般會搭配第三方主題來使用，這裡推薦一款基於Material Design設計的主題hexo-theme-matery，介面簡單漂亮，文章內容美觀易讀。響應式設計，部落格在桌面端、平板、手機等裝置上均能很好的展現。內建豐富外掛，功能強大。

效果演示

我們先來看下成品效果，Hexo配上這個主題，介面還是挺漂亮的，想搭部落格的朋友可以試下！

搭建

我們將先使用Hexo搭建一個基本的部落格網站，然後切換到hexo-theme-matery主題。

首先使用如下命令安裝hexo-cli，看名字就知道是Hexo的CLI工具；

npm install -g hexo-cli

安裝成功後初始化一個部落格目錄，並進入該目錄，然後安裝依賴；

# 初始化部落格目錄
hexo init website-hexo
# 進入部落格目錄
cd website-hexo
# 安裝部落格相關依賴
npm install

這樣一個基本的部落格網站就搭建完畢了，是不是秒建部落格網站，然後使用如下命令啟動部落格網站；

hexo server

啟動成功後我們可以訪問下主頁，用過Hexo的朋友應該知道，Hexo要搭配主題來使用，否則真的很醜，訪問地址：http://localhost:4000/

配置

搭建部落格網站，有些配置需要自定義，接下來我們來講下Hexo的整體配置和hexo-theme-matery的主題配置。

Hexo整體配置

支援Hexo的主題有很多，這裡選擇了我認為比較漂亮的一個hexo-theme-matery。

首先下載主題，並解壓到專案的themes目錄下，下載地址：https://github.com/blinkfox/h...

修改專案根目錄下的配置檔案_config.yml，該檔案為Hexo的整體配置，將theme屬性改為hexo-theme-matery；

theme: hexo-theme-matery

修改成功後，我們重新啟動專案，再看下首頁，果然頁面漂亮了很多，訪問地址：http://localhost:4000/

當然_config.yml檔案不僅可以改主題，還有很多網站配置也是可以更改的，比如網站配置、網址配置、首頁配置等。

# 網站配置
title: macrozheng # 網站標題
subtitle: 'macrozheng 的個人部落格' # 網站副標題
description: 'Justice may be late, but will never be absent.' # 網站描述
keywords:
author: macrozheng # 網站作者
language: zh-CN # 網站使用的語言，可以設定為中文
timezone: ''

# 網址配置
url: http://localhost:4000 # 網址，會影響文章頁的原文連結地址
permalink: :year/:month/:day/:title/ # 文章的永久連結格式

# 首頁配置
index_generator:
  path: ''
  per_page: 12 # 分頁設定，該主題設定6、12、18比較好
  order_by: -date # 按時間倒序排列

# 分頁配置
per_page: 12
pagination_dir: page

新增固定頁面

在首頁頂部有一些導航按鈕，如標籤、分類、歸檔等，如果我們沒建立對應頁面的話，會無法訪問；

使用hexo new page "categories"命令新建分類頁，分類頁至少包含如下內容；

---
title: categories
date: 2021-09-06 10:19:56
type: "categories"
layout: "categories"
---

使用hexo new page "tags"命令新建標籤頁，標籤頁至少包含如下內容；

---
title: tags
date: 2021-09-06 10:25:04
type: "tags"
layout: "tags"
---

使用hexo new page "about"命令新建關於頁，關於頁至少包含如下內容；

---
title: about
date: 2021-09-06 10:28:56
type: "about"
layout: "about"
---

使用hexo new page 404命令新建404頁，404至少包含如下內容；

---
title: 404
date: 2021-09-06 10:32:48
type: "404"
layout: "404"
description: "Oops～，我崩潰了！找不到你想要的頁面 :("
---

頁面都建立成功後，專案目錄結構如下，這裡貼下目錄，方便大家理解。

主題配置

我們不僅需要修改Hexo的配置，還需要修改hexo-theme-matery主題的配置，比如頂部的選單導航，還有關於頁面，這些都是在主題中配置的。注意：主題配置需要修改/themes/hexo-theme-matery/_config.yml檔案。

我們可以對導航選單進行配置，比如我新增了專案這個導航選單；

# 配置選單導航的名稱、路徑和圖示icon.
menu:
  Index:
    url: /
    icon: fas fa-home
  專案:
    icon: fas fa-project-diagram"
    children:
      - name: mall
        url: https://github.com/macrozheng/mall
      - name: mall-admin-web
        url: https://github.com/macrozheng/mall-admin-web
      - name: mall-tiny
        url: https://github.com/macrozheng/mall-tiny
  Tags:
    url: /tags
    icon: fas fa-tags

新增成功後，導航選單裡面就有了專案這個選單，並且可以展示二級選單；

我們可以對首頁介紹進行配置，修改dream下的配置即可；

# 配置首頁顯示"夢想"的語句.
dream:
  enable: true
  showTitle: true
  title: 關於本站
  text: 本站是macrozheng的個人部落格網站，初衷是為了分享和記錄自己平時所學到的技術。作者Github開源專案mall（50K+Star），歡迎關注我的公眾號「macrozheng」。

配置成功後首頁顯示如下；

我們可以對首頁banner中的個人資訊進行配置；

# 首頁 banner 中的第二行個人資訊配置，留空即不啟用
socialLink:
  github: https://github.com/macrozheng # https://github.com/xxx
  email: macrozheng@126.com # xxx@xxx.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: # 123456789
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  juejin: https://juejin.im/user/5cf7c1d7f265da1bc07e28b7
  jianshu: https://www.jianshu.com/u/9bdcaae6d6b7
  rss: false # true、false

由於我們自定義了兩個連結，掘金和簡書，還需要修改主題目錄下的/layout/_partial/social-link.ejs檔案，增加如下內容，否則無法顯示；

<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="關注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">掘</i>
    </a>
<% } %>

<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="關注我的簡書: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">簡</i>
    </a>
<% } %>

配置成功後首頁顯示如下；

我們可以對關於頁進行配置，下面配置了個人資訊、我的專案，關閉了技術展示；

# 在”關於”頁面中配置個人資訊，包括頭像、職業和個人介紹.
profile:
  avatar: /medias/avatar.png
  career: Java 開發工程師
  introduction: 專注Java技術分享，涵蓋SpringBoot、SpringCloud、Docker、中介軟體等實用技術，Github開源專案mall（50K+Star）。

# 在“關於”頁面配置"我的專案"資訊，如果你不需要這些資訊則可以將其設定為不啟用或者將其刪除.
myProjects:
  enable: true
  data:
    mall:
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall
      desc: mall專案是一套電商系統，包括前臺商城系統及後臺管理系統，基於SpringBoot+MyBatis實現。
    mall-admin-web:
        icon: fab fa-vuejs
        iconBackground: 'linear-gradient(to bottom right, #F06292 0%, #EF5350 100%)'
        url: https://github.com/macrozheng/mall-admin-web
        desc: mall-admin-web是一個電商後臺管理系統的前端專案，基於Vue+Element實現。
    mall-tiny:
      icon: fab fa-java
      iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)'
      url: https://github.com/macrozheng/mall-tiny
      desc: 基於SpringBoot+MyBatis的單應用專案骨架。

# 在“關於”頁面配置"我的技能"資訊，如果你不需要這些資訊則可以將其設定為不啟用或者將其刪除.
mySkills:
  enable: false
  data:
    Java:
      background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)'
      percent: 85%

配置成功後個人頁顯示如下；

還有一些其他有用的配置，比如Github連結配置、轉載配置、分享配置、打字機副標題配置和備案號配置等。

# 配置是否在 header 中顯示 fork me on github 的圖示，預設為true，你可以修改為你的倉庫地址.
githubLink:
  enable: true
  url: https://github.com/macrozheng
  title: Fork Me

# 轉載宣告
reprint:
  enable: true
  default: cc_by_nc_nd
  
# sharejs文章分享模組.
# 支援順序，可選專案為twitter, facebook, google, qq, qzone, wechat, weibo, douban, linkedin.
sharejs:
  enable: true
  sites: qq,wechat,weibo,douban
  
# 打字效果副標題.
# 如果有符號 ‘ ，請在 ’ 前面加上 \
subtitle:
  enable: true
  loop: true # 是否迴圈
  showCursor: true # 是否顯示游標
  startDelay: 300 # 開始延遲
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 刪除速度
  sub:
    - Justice may be late, but will never be absent.

# ICP備案資訊尾部顯示
icp:
  enable: false
  url: # 備案連結
  text: # 備案資訊

編寫文章

編寫文章的話，我們可以直接使用Markdown來寫，然後在頭部新增Front-matter配置即可，文章都放在source/_posts目錄下。

這裡我們已經在_posts目錄中新增好了文章，重啟部落格網站就可以看到了；

我們必須給每篇文章新增Front-matter，Front-matter可以用來配置文章的標題、分類、標籤等資訊，一個簡單的配置如下；

---
title: mall整合SpringBoot+MyBatis搭建基本骨架
date: 2021-08-21 16:30:11
permalink: /pages/c68875/
categories:
  - mall學習教程
  - 架構篇
tags:
  - SpringBoot
  - MyBatis
---

Front-matter的配置很多，這裡就不展開描述了，直接參考下表即可；

如果你想讓某些文章在首頁獲得推薦的話，可以新增top: true配置；

如果你直接複製圖片過來的話，你會發現圖片是無法顯示的，我們需要把文章圖片的相對路徑改為絕對路徑才可以顯示；

![相對圖片路徑](../images/springcloud_arch.png)
![絕對圖片路徑](/images/springcloud_arch.png)

如果你的文章中有程式碼的話，預設情況下顯示會有問題，需要修改Hexo的配置_config.yml，禁用highlight，啟用prismjs才可以正常顯示；

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

這裡如果不生效的話，可以使用hexo clean命令清空快取再試試，附一張程式碼塊樣式對比圖；

還有預設情況下搜尋外掛是不生效的，我們需要先使用如下命令安裝搜尋外掛；

npm install hexo-generator-search --save

然後修改Hexo在根目錄下的配置檔案_config.yml，新增如下配置；

search:
  path: search.xml
  field: post

搜尋生效以後，顯示效果如下。

部署

Hexo生成網站既快速又簡單，一個命令生成靜態檔案，然後放置到Nginx的html目錄下即可。

在命令列使用hexo generate命令可以將專案打包成靜態檔案，輸出檔案目錄為public；

接下來把public目錄下的所有檔案複製到Nginx的html目錄下即可完成部署，部署後顯示內容如下。

總結

使用Hexo搭配hexo-theme-matery來搭建部落格網站，不僅介面漂亮，而且功能強大。如果你想搭建自己的部落格網站，這是個很好的選擇！

參考資料

hexo-theme-matery主題官網：https://github.com/blinkfox/h...
hexo官網：https://hexo.io/zh-cn/

專案地址

https://github.com/blinkfox/h...

本文 GitHub https://github.com/macrozheng/mall-learning 已經收錄，歡迎大家Star！