Hexo 靜態博客使用指南

2017-10-16

本文介紹從零開始搭建屬於自己的 Hexo 博客站點

I.Hexo 簡介

Hexo 是一個輕量的靜態博客框架。通過 Hexo 可以快速生成一個靜態博客框架,僅需要幾條命令就可以完成,相當方便。

而架設Hexo的環境更簡單了,不需要 lnmp/lamp 這些繁瑣複雜的環境,僅僅需要一個簡單的 http 服務器即可使用,或者使用互聯網上免費的頁面託管服務

比如本人的這個博客,就是託管於 Github 的 Pages 服務上

  • 本文會更隨 Hexo 的發展同步更新,如需請收藏本文,非常感謝您的閱讀! 如有錯誤,歡迎指出。

II.Hexo 安裝方法

  • Mac OS X/Linux 或其他 類UNIX 系統配置 nodejs 環境
    • 請去官方網站下載 .pkg 文件 或者下載已編譯完成的二進制文件
  • 也可以下載源代碼編譯安裝
$ wget https://nodejs.org/dist/v6.11.4/node-v6.11.4-linux-x64.tar.xz
$ tar jxvf node-v6.11.4-linux-x64.tar.xz
$ cd node-v6.11.4-linux-x64
# ./configure --prefix=/usr
# make
# make install
  • Redhat 系

    curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash -
  • Debian 系

    curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
    sudo apt-get install -y nodejs

其他發行版請自行尋找 wiki 獲得幫助

通過 npm 安裝 hexo-cli

$ npm install hexo-cli -g

如果以上命令不能安裝 可以嘗試把官方源替換爲 淘寶 npm 源 再執行安裝Hexo

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

或者你直接通過添加 npm 參數 alias 一個新命令:

$ alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

如果以上的 cnpm 無法安裝 可以試試看下方的 alias 方法

$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc
  • Windows 系統(具體環境配置請參考這個
    • git
    • node 環境
    • npm(node 包管理器)

III.Hexo 配置方法

新建一個需要當做博客目錄的文件夾

$ mkdir blog

進去之後加入 hexo 主程序和安裝 npm

$ hexo init && npm install
$ mkdir hexo3
$ cd hexo3
$ hexo init
INFO Cloning hexo-starter to /hexo3
Cloning into '/hexo3'...
remote: Counting objects: 59, done.
remote: Total 59 (delta 0), reused 0 (delta 0), pack-reused 59
Unpacking objects: 100% (59/59), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'

......

> [email protected] build:highlight /hexo3/node_modules/hexo-util
> node scripts/build_highlight_alias.js > highlight_alias.json

[email protected] /hexo3
├─┬ [email protected]
│ ├── [email protected]

......

│ └── [email protected]
└── [email protected]

INFO Start blogging with Hexo!

文件夾大致結構如下

$ tree -L 1
.
├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
└── themes

4 directories, 2 files
  • scaffolds 工具模板

  • scripts hexo的功能js

  • source 博客資源文件夾

  • source/_drafts 草稿文件夾

  • source/_posts 文章文件夾

  • themes 存放皮膚的文件夾

  • themes/landscape 默認主題文件夾

  • _config.yml 全局配置文件

  • db.json json格式的靜態常量數據庫

_posts目錄:Hexo 存放博客文章的文件夾

themes目錄:存放皮膚的文件夾,默認使用官方的主題 你也可以從 hexo主題頁面hexo主題 wiki 頁面下載你喜歡的主題


配置 Hexo

Hexo 全局配置

用文本編輯器修改 _config.yml 這個文件 大致如下 只需要自行修改幾個 其他保持默認即可

通常需要修改站點名稱 /URL格式 /歸檔設置 /disqus評論用戶名 /部署配置 這幾項就可以了 注意冒號後面都要添加一個半角空格 之後纔是設置參數

自定義域名設置 在 source 我文件夾下面新建 CNAME 文件 裏面寫入你的自定義域名 並設置您的dns配置cname方式到服務提供商的給的地址即可

# 網站
參數 描述
title 網站標題
subtitle 網站副標題
description 網站描述
author 您的名字
language 網站使用的語言
timezone 網站時區。Hexo 預設使用您電腦的時區。時區列表

# 網址
參數 描述 默認值
url 網址
root 網站根目錄
permalink 文章的 永久鏈接 格式 :year/:month/:day/:title/
permalink_default 永久鏈接中各部分的默認值
網站存放在子目錄
如果您的網站存放在子目錄中,例如 http://yoursite.com/blog,則請將您的 url 設爲 http://yoursite.com/blog 並把 root 設爲 /blog/。

# 目錄
參數 描述 默認值
source_dir 資源文件夾,這個文件夾用來存放內容。 source
public_dir 公共文件夾,這個文件夾用於存放生成的站點文件。 public
tag_dir 標籤文件夾 tags
archive_dir 歸檔文件夾 archives
category_dir 分類文件夾 categories
code_dir Include code 文件夾 downloads/code
i18n_dir 國際化(i18n)文件夾 :lang
skip_render 跳過指定文件的渲染,您可使用 glob 來配置路徑。

# 文章
參數 描述 默認值
new_post_name 新文章的文件名稱 :title.md
default_layout 預設佈局 post
auto_spacing 在中文和英文之間加入空格 false
titlecase 把標題轉換爲 title case false
external_link 在新標籤中打開鏈接 true
filename_case 把文件名稱轉換爲 (1) 小寫或 (2) 大寫 0
render_drafts 顯示草稿 false
post_asset_folder 啓動 Asset 文件夾 false
relative_link 把鏈接改爲與根目錄的相對位址 false
future 顯示未來的文章 true
highlight 代碼塊的設置

# 分類 & 標籤
參數 描述 默認值
default_category 默認分類 uncategorized
category_map 分類別名
tag_map 標籤別名
日期 / 時間格式
Hexo 使用 Moment.js 來解析和顯示時間。

參數 描述 默認值
date_format 日期格式 MMM D YYYY
time_format 時間格式 H:mm:ss
分頁
參數 描述 默認值
per_page 每頁顯示的文章量 (0 = 關閉分頁功能) 10
pagination_dir 分頁目錄 page

# 擴展
參數 描述
theme 當前主題名稱
deploy 部署

Hexo常用插件安裝與配置

安裝首頁文章數量 存檔 分類 的插件
安裝本地服務器代理插件
安裝發佈器插件
安裝更新插件 rss site-map之類的

$ npm install hexo-generator-index --save
$ npm install hexo-generator-archive --save
$ npm install hexo-generator-category --save
$ npm install hexo-generator-tag --save
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save
$ npm install hexo-renderer-marked --save
$ npm install hexo-renderer-stylus --save
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save

裝完之後去全局配置文件 _config.yml 修改參數

index_generator:
per_page: 10 ##首頁默認10篇文章標題 如果值爲0不分頁

archive_generator:
per_page: 10 ##歸檔頁面默認10篇文章標題
yearly: true ##生成年視圖
monthly: true ##生成月視圖

tag_generator:
per_page: 10 ##標籤分類頁面默認10篇文章

category_generator:
per_page: 10 ###分類頁面默認10篇文章

feed:
type: atom ##feed類型 atom或者rss2
path: atom.xml ##feed路徑
limit: 20 ##feed文章最小數量


deploy:
type: git ##部署類型 其他類型自行google之
repo: <repository url> ##git倉庫地址
branch: [branch] ##git 頁面分支
message: [message] ##git message建議默認字段update 可以自定義

-多部署

deploy:
type: git
message: update ##git message建議默認字段update 可以自定義
repo:
gitcafe: <repository url>,[branch] ##gitcafe 倉庫地址和分支
github: <repository url>,[branch] ##github 倉庫地址和分支

例如

deploy:
type: git
message: "update"
repo:
gitcafe: https://gitcafe.com/ky0ncheng/ky0ncheng.git,gitcafe-pages
github: https://github.com/ky0ncheng/ky0ncheng.github.io.git,master

注意:

  • Github Pages 和 Gitlab Pages 服務 分支都在 master

  • Gitlab Pages 需要啟用 Gitlab CI 服務, deploy 字段需注释掉。每次 push 到 gitlab 仓库前须在本地生成静态页面(hexo g)。

純文本網頁配置參數存於 .gitlab-ci.yml

pages:
stage: deploy
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
paths:
- public
only:
- master

Hexo 配置參數存於 .gitlab-ci.yml ,令注意 Hexo 的配置文件 _config.ymldeploy 段請注釋掉。
Deploy 請把整個目錄 push 至 gitlab 倉庫的 master 分支上。

image: node:4.2.2

pages:
cache:
paths:
- node_modules/

script:
- npm install hexo-cli -g
- npm install
- hexo deploy
artifacts:
paths:
- public
only:
- master

更多插件可以去 Hexo 插件 wiki 找到 https://github.com/hexojs/hexo/wiki/Plugins

Hexo 主題設置

同樣編輯主題文件夾的 _config.yml

# Header
menu:#導航欄連接
Home: /
Archives: /archives #歸檔頁面URL
自定義頁面標題: /自定義頁面URL
rss: /atom.xml #rss地址 默認即可

# Content
excerpt_link: Read More #閱讀更多的文字顯示
fancybox: true #開啓fancybox效果

# Sidebar #側邊欄設置
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts

# Miscellaneous #社交網絡和統計連接地址
google_analytics: #google analytics ID
favicon: /favicon.png #網站的favicon
twitter:
google_plus:
fb_admins:
fb_app_id:


--------
## 寫文章

Hexo 使用 markdown 語法的純文本存放文章 後綴爲 `.md` 你可以在 `_post` 文件夾裏面新建這個後綴的 `.md` 文件 使用的全是 UTF-8 編碼

也可以輸入命令以生成

```bash
$ hexo new <title>

如果是新建一個頁面

$ hexo new page <title>

看一下剛纔生成的.md,內容如下:

 title: title #文章標題
date: 2015-02-05 12:47:44 #文章生成時間
#文章分類目錄 可以省略
tags: #文章標籤 可以省略
description: #你對本頁的描述 可以省略
---
這裡開始使用 markdown 格式輸入你的正文。

多標籤注意語法格式 如下:

tags:
- 標籤1
- 標籤2
- 標籤3
- etc...

想在首頁文章預覽添加圖片可以添加 photo 參數 這個 fancybox 可以省略 如下:

```markdown
photos:
- http://xxx.com/photo.jpg

正文中可以使用 <!--more--> 設置文章摘要 如下:

以上是文章摘要

<!--more-->

以下是餘下全文

more 以上內容即是文章摘要,在主頁顯示,more 以下內容點擊『> Read More』鏈接打開全文才顯示。

如果您曾經是 Wordpress 的用戶可以使用 hexo 的插件把之前的文章進行轉換成 md 的無格式文件

  1. 先從 Wordpress 後臺導出所有的文章為 XML 格式.

  2. 安裝 hexo 的插件 hexo-migrator-wordpress

$ npm install hexo-migrator-wordpress --save
  1. 使用 hexo-migrator-wordpress 轉換 xml 為 md 文件 (export.xml 請換成您的具體文件名)
$ hexo migrate wordpress export.xml

命令執行後 您會在 source/_post 目錄內就可以看到剛剛轉換完成的博客文章 md 文件


IV.Hexo 部署方法

寫完文章之後,就可以啓動本地服務器測試了

$ hexo s

這個時候 hexo 啓動 localhost:4000 可以看到靜態的網頁已經可以打開

修改後就可以部署上去了

$ hexo clean #清除緩存
$ hexo g #生成靜態網頁
$ hexo d #開始部署

V.Hexo更新方法

$ npm update -g
  • hexo 同時也需要最新的 nodejs

以上就是 Hexo 的基本使用方法 進階的可以在 Hexo 的官方文檔裡找到 感謝閱讀!

Enjoy~


Hexo 3.x 帶來了更好的性能,更新了API,模塊化了大部分組件。更多變化看這裏: https://github.com/hexojs/hexo/wiki/Breaking-Changes-in-Hexo-3.0

Hexo2.x到3.x遷移指南:

原文: https://github.com/hexojs/hexo/wiki/Migrating-from-2.x-to-3.08

Tags: hexo