hexo(1)下載和部署

中文官網地址：hexo

安裝 hexo#

前提：

自有伺服器
網域
安裝nodejs
安裝git

# 切換源，後續使用cnpm安裝包，可以在無法正常安裝上包的時候使用
npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm install hexo-cil -g 
hexo init blog # 會在當前目錄下創建blog目錄
cd blog
cnpm install
hexo server # 可以簡寫為 hexo s

在瀏覽器中輸入localhost:4000即可看到博客已經在開發模式下正常運行。

配置 hexo#

在根目錄下的_.config.ym文件中，配置如下內容：

# Site  
title: 菜小牛的Blog  # 網站標題
subtitle: 真正的大師永遠懷著一顆學徒的心  # 網站副標題
description: 菜小牛的博客  # 網站描述，主要用於SEO
keywords: 菜小牛 Cirry  # 網站的關鍵詞。支持多個關鍵詞
author: Cirry  # 您的名字
language: zh-CN  # 設置為中文
timezone: 'Asia/Shanghai' # 修改為國內時區

# URL  
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'  
url: http://cirry.cn # 修改為你的博客地址

...

highlight:   # 開啟代碼高亮
  enable: true  
  line_number: true  
  auto_detect: true

...

mathjax: true # 沒有就新增這一條，開啟數學公式支持，在對應的文章中也需要開啟mathjax支持

其餘參數無需修改，保存之後，需要重新運行一下hexo server(當然你也可以使用npm run server 來重啟應用)，刷新頁面才能看到最新的效果。

基礎命令#

命令	使用方式	命令參考	說明
init	hexo init [folder]	hexo init blog	初始化博客項目，只有在創建的時候需要使用到
new	hexo new [layout] <title>	hexo new post "hello"	新建一篇博文，在 source/_posts 目錄下新建一個文件名為 hello.md
generate	hexo generate	hexo g	生成靜態文件
publish	hexo publish [layout] <filename>	hexo publish post "hello"	發表草稿
deploy	hexo deploy	hexo deploy	部署網站
render	hexo render <file1> [file2] ...		渲染文件
migrate	hexo migrate <type>		從其他博客系統遷移內容
clean	hexo clean	hexo clean	清除快取文件 (`db.json`) 和已生成的靜態文件 (`public`)
list	hexo list <type>		列出網站資料
version	hexo version	hexo version	顯示 Hexo 版本
	hexo --draft		顯示 `source/_drafts` 文件夾中的草稿文章

常用命令舉例：

hexo new post --path hexo/hexo.md "hexo" # 會在source/_posts/hexo/ 文件夾下，創建hexo.md文檔，且標題為"hexo"
hexo new page test  # 會在 source/test 文件下創建一個index.md 文檔

hexo new draft "草稿"  # 會在source/_drafts 文件夾下，創建草稿.md，draft文件下的文件不會渲染在頁面中
hexo new publish "草稿" # 會將草稿發佈到_posts文件夾下，publish之後會渲染在頁面中

使用 git 管理博客文章#

你可以首先在 github、gitee，或者在自建的 git 倉庫中先創建一個 git 倉庫。

你可以根據倉庫創建完成後提示的命令提交代碼。

git init
git add . 
git commit -m "first commit"
git remote add origin [url] # 替換為你的倉庫url地址
git push -u origin master

git 基礎命令#

命令	說明
git pull	更新代碼
git add .	添加代碼到快取區
git commit -m "文章更新"	添加說明
git push -u origin master	提交代碼到倉庫

按照上述命令順序，即可正常的提交和更新博客倉庫。

安裝 Maupassant 主題#

這裡我找了一個不錯的主題做演示Maupassant。

git clone https://github.com/tufu9441/maupassant-hexo.git  # 在適當位置下載主題代碼

為了方便管理，將下載文件中的_config.yml改名為_config.maupassant.yml，放到博客根目錄下，後續在這裡配置主題即可。為何這樣操作參考官網使用代替主題配置文件。

將下載文件中的languages、layout、source 放到博客themes/maupassant中，如果沒有對應文件夾則創建。

接下來安裝主題需要的 npm 包：

cnpm install hexo-renderer-pug --save    
cnpm install hexo-renderer-sass-next --save

配置主題#

在_config.maupassant.yml文件找到對應屬性

menu:  
  - page: home  
    directory: .  
    icon: fa-home  
  - page: archive  
    directory: archives/  
    icon: fa-archive  
  - page: about  
    directory: about/  
    icon: fa-user  
  - page: history  
 directory: timeline/
  - page: guestbook  
    directory: guestbook/  
    icon: fa-comments

配置完成後重啟項目，發現項目中沒有關於我和留言頁面，我們可以使用以下命令創建：

hexo new page guestbook # 創建留言頁面
hexo new page about # 創建關於我頁面
hexo new page history # 創建時間線頁面

注意：時間線頁面的內容在_config.maupassant.yml的timeline屬性下填寫。另外，時間線頁面的front-matter應該如下：

---  
title: 時間線  
date: 2022-08-28 13:02:01  
layout: timeline  
comments: false  
---

設置網站圖標#

若要設置網站 Favicon，可以將favicon.ico放在 Hexo 根目錄的source文件夾下，建議的大小：32px*32px。

若要為網站添加蘋果設備圖標，請將命名為apple-touch-icon.png的圖片放在同樣的位置，建議的大小：114px*114px。

可以去這個網站檢查圖標樣式favicon-checker是否適應各個瀏覽器。

設置文章模板#

我們已經知道創建文章的命令是hexo new post "hello"，但是該如何理解post這個參數？

在官網中，將其描述為 layout（佈局），默認使用_.config.yml中的default_layout來代替。我更願意將其理解為文章模板，在我們使用命令創建的文章中會發現裡面已經有了一些內容，這個內容從何而來？

打開項目根目錄中的scaffolds文件夾發現，他已經有了三個默認的文件：draft.md，post.md，page.md，仔細看看post.md中的內容和我們創建的hello.md內容其實是相同的。

所以這個文件夾放的其實就是文章模板，你可以用他來自定義你需要通用內容，比如文章的 tag，category 和 toc 等等，那麼在以後創建的文章中，將自帶這些內容，修改post.md如下：

title: {{ title }}  
date: {{ date }}  
tags:  
category:  
- []  
mathjax: true  
toc: true

注意：category 可以使用數組，tags 可以直接寫 tag 標籤，類似：tags: hexo blog，自定義鏈接地址 permalink 必須以/結尾，類似：permalink: /hexo/install/1/。

文章摘要#

首頁默認顯示文章摘要而非全文，可以在文章的front-matter中填寫一項description:來設置你想顯示的摘要，或者直接在文章內容中插入以隱藏後面的內容，若兩者都未設置，則自動截取文章第一段作為摘要。

使用hexo new post hello，新建一個 hello.md 文檔，內容如下：

hello.md
---
title: hello
date: 2022-08-18 18:44:43
tags: hexo
toc: true
description: What about the reality
mathjax: true
---
# Hello
There's that word again. 'Heavy.' Why are things so heavy in the future? Is there a problem with the Earth's gravitational pull?
## world
Knowledge could be more valuable than gold, more deadly than a dagger.
$$ f(x)=sin(x) + 12 $$

備註：title 為文章標題，toc 為開啟文章目錄，description 是文章摘要內容，mathjax 是開啟數學公式持支持。

$f(x)=sin(x) + 12$

保存運行後，就可以看到文章已經正常顯示啦，已經可以正常流暢的寫文章了。

部署#

講的部署這個地方，就需要用到大家之前準備好的伺服器了，並已經安裝好 nginx 或者 caddy 等其它反向代理 web 服務，如果覺得麻煩可以直接使用github pages部署博客，具體可以參考# 將 Hexo 部署到 GitHub Pages。

hexo 的部署方式有很多種，我們暫時選擇一個比較簡單的部署方式SFTP，如果後續有更多人需要，我可以寫一些其他的部署方式，比如 drone 自動部署等等。

使用 ssh 工具連接到服務上後，先創建用戶和對應的博客目錄

$ useradd -m -s /bin/bash hexo # 創建用戶
$ passwd hexo # 設置密碼

# 退出登錄，使用hexo用戶重新登錄
$ cd ~
$ mkdir blog # 創建blog目錄，放置部署文件的位置

首先需要安裝這個插件：

npm install hexo-deployer-sftp --save

然後在根目錄下的_config.yml中的末尾部分，添加以下配置：

deploy:  
  type: sftp  
  host: 159.75.81.123  
  user: hexo  
  pass: 123456  
  remotePath: /home/hexo/blog  
  port: 22

使用命令hexo g -d，自動部署博客到伺服器上。

我使用的 caddy 做的 web 的反向代理，修改一下 caddy 配置文件Caddyfile，重啟 caddy 即可正確打開網頁：

cirry.cn{
 root * /home/hexo/blog
 file_server
}

至此，博客的基本配置和部署功能都已經完成，下一篇說主題的配置。