Hexo 建站手札——基礎

文章目錄

1.1 創建倉庫

2. Hexo 常用命令

0. 前言

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

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

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

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

1. 準備工作

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

搭建 Hexo 環境。
熟悉用 MarkDown 寫作。
代碼託管平臺。

使用 Hexo 建站，建議參照官方文檔。
如果您還在使用 html 排版的方式，只能說 out 了。使用 md 寫作，快速排版，實時對比。
將文章存放在 GitHub 或 GitLab 等這樣的開源平臺，或者購買域名服務器。

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

1.1 創建倉庫

註冊 GitHub 。假如用戶名是 flueky ,那麼你的 GitHub 主頁地址是 https://github.com/flueky。
創建倉庫，必須名字是 flueky.github.io ,其中 flueky 替換成你自己的 GitHub 賬戶名字。即，創建完後，倉庫地址是 https://github.com/flueky/flueky.github.io。

將此倉庫作爲博客主頁後，可以直接使用域名 https://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/[email protected]/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 命令部署到指定的倉庫地址上，就可以使用 https://flueky.github.io訪問。可能需要等待幾分鐘。

截止到這裏，已經可以盡情的寫文章了。文章中以 GitHub 爲例，所有用戶名 flueky 需要換成自己的。

源碼地址

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

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

Hexo 建站手札——基礎

文章目錄

0. 前言

1. 準備工作

1.1 創建倉庫

2. Hexo 常用命令

2.1 創建目錄

2.2 啓動服務

2.3 部署博客

3. 初始化博客

4. 個性化配置

4.1 修改站點 logo 和標題

4.2 修改主頁標題

4.3 修改用戶LOGO

4.4 修改作者信息

4.5 配置菜單

4.6 配置導航欄

4.7 使用 icon

4.8 配置部署

Broadcast專講

重新認識 Android 圖片適配

你既言而無信，我即出爾反爾

Hexo 建站手札——基礎

AndroidManifest 合併衝突處理

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Hexo 建站手札——基礎

文章目錄

0. 前言

1. 準備工作

1.1 創建倉庫

2. Hexo 常用命令

2.1 創建目錄

2.2 啓動服務

2.3 部署博客

3. 初始化博客

4. 個性化配置

4.1 修改站點 logo 和 標題

4.2 修改主頁標題

4.3 修改用戶LOGO

4.4 修改作者信息

4.5 配置菜單

4.6 配置導航欄

4.7 使用 icon

4.8 配置部署

4.1 修改站點 logo 和標題