0. 前言
2016 年 2 月,寫了工作中第一篇部落格。至今快 4 年時間,寫了幾十篇文章,也使用過幾個平臺。
直到接觸到 jekyll 、 Hexo 這樣的部落格生成工具。前者使用一年,沒多研究其擴充套件功能。本文將介紹使用 Hexo 建站的步驟。
本文適用於初學者,如果您已具備 Hexo 建站技能,需要豐富下網頁的功能,請參閱Hexo 建站手札——進階。
1. 準備工作
萬事開頭難,建站也是需要做一些準備的。
- 搭建 Hexo 環境。
- 熟悉用 MarkDown 寫作。
- 程式碼託管平臺。
- 使用 Hexo 建站,建議參照官方文件。
- 如果您還在使用 html 排版的方式,只能說 out 了。使用 md 寫作,快速排版,實時對比。
- 將文章存放在 GitHub 或 GitLab 等這樣的開源平臺,或者購買域名伺服器。
建議前期使用開源平臺,因為免費,入門簡單。甚至不需要編碼基礎。
1.1 建立倉庫
- 註冊 GitHub 。假如使用者名稱是
flueky
,那麼你的 GitHub 主頁地址是 github.com/flueky。 - 建立倉庫,必須名字是 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
目錄下做如下操作。
-
建立 projects 資料夾,建立 index.md 檔案。內容:
--- title: 專案 --- 複製程式碼
-
建立 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 複製程式碼
-
建立 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
目錄下做如下操作。
-
建立 categories 資料夾,建立 index.md 檔案。內容:
--- layout: category index: true title: 所有分類 --- 複製程式碼
-
建立 tags 資料夾,並建立 index.md 檔案。內容:
--- layout: tag index: true title: 所有標籤 --- 複製程式碼
-
建立 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/。