Hexo 是一個快速、簡潔且高效的靜態博客應用,它的一大亮點是提供了強大的 CLI 工具,真正實現了一鍵部署。Hexo 使用 Markdown 來解析文章,可以在很短時間內渲染出簡潔大方的頁面。本文將從安裝到部署來詳細介紹 Hexo。
本文涉及到的一些工具需要一定操作基礎,若有疑問,請先自行搜索學習。
安裝
Hexo 的運行和部署需要以下工具:
- Node.js
- Git
安裝 Node.js
Windows 平臺使用官網提供的安裝包來安裝,在 cmd 中驗證是否安裝好:
安裝 Hexo-Cli
安裝 Node 時一般默認安裝了 npm 工具,因此使用以下命令來安裝 Hexo 的命令行工具 Hexo-Cli:
$ npm install -g hexo-cli
安裝 Git
Windows 平臺下安裝 git-for-windows,*nix 平臺使用自帶的包管理工具安裝,以 Ubuntu 爲例:
$ apt-get install git
創建一個站點
在任意位置打開 cmd,使用 hexo init <dir>
命令創建一個博客,dir
爲博客目錄名
$ hexo init <folder>
$ cd <folder>
$ npm install
等待所有依賴包安裝完成
配置
配置站點
博客根目錄的 _config.yml
爲 “站點配置文件”,包括 SEO、主題、佈局、插件等配置項
# Site
title: xxx的博客
subtitle: 副標題
description: 對站點的描述
keywords: 關鍵詞
author: 作者
language: 語言(中文簡體爲:zh-Hans)
timezone: 時區(國內這裏填寫:Asia/Shanghai)
Hexo 默認的樣式大概是這樣的:
推薦使用 Next 主題
主題
安裝 Next 主題
在站點根目錄打開 cmd,運行命令:
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
切換主題
主題相關的文件就從 Next 的 github 倉庫克隆到了 themes/next 目錄下,只需要在 “站點配置文件” 中將 theme
字段的值改爲 next
就實現了主題的切換
theme: next
查看效果
Hexo 提供的命令行工具中自帶服務器功能,在站點根目錄運行:
$ hexo s
當出現提示:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
的時候,就可以打開瀏覽器訪問:http://localhost:4000
來查看效果了,默認效果是這樣的:
如果覺得不好看可以通過修改themes/next
目錄下 “主題配置文件” _config.yml
來自定義主題樣式,這裏只介紹一些常用配置,詳細配置請參考 Next 官網
佈局
Next 的默認佈局爲 Muse,就是這個樣子:
Next 還提供另外兩種佈局:
- Pisces
- Mist
我這裏使用的是 Pisces,所有這樣修改 “主題” 配置文件:
scheme: Pisces
Pisces 佈局的效果:
寫文章
在站點根目錄運行命令:
hexo new [title]
其中,[title] 爲文章題目,運行命令後在 source/_posts
目錄下可以看到 文章題目.md
這樣一個文件,用任意編輯器打開這個文件,裏面的內容大概是這樣:
---
title: Hello World
date: 2013/7/13 20:46:25
---
這段內容在 Hexo 官方的叫法爲 Front matter
,在渲染文章的時候,渲染引擎會讀取這段內容並在頁面適當的地方展示文章的各種信息,Front matter
主要有一下幾項:
- title:文章標題
- date:創建日期
- tags:標籤
- categories:分類
需要注意的是,分類是具有層次性的,也就是說 Python,爬蟲
這種分類和 爬蟲,Python
是完全不同的,它們會被分爲兩類,而標籤則沒有這種層次性
如果覺得使用起來不是很方便,可以只給定一個分類,比如這樣:
categories:
- 日記
tags:
- 上海
- 旅行
站點首頁會以分頁的方式展示最近發佈的文章,默認展示全文,如果想要只展示開頭部分內容,比如這種效果:
可以在文章適當的位置添加 <!-- more -->
標記,這樣可以在首頁只展示標記之前的內容,避免首頁一次加載過多內容造成不好的體驗
部署
如果有可用的服務器,可以使用 hexo g
命令,生成靜態站點,通過 FTP 或其他方式將站點上傳到服務器對應目錄,並配合 nginx 或 Apache 服務器,即可完成部署,這裏介紹一下沒有服務器情況下,如何搭建一個完整的博客站點
首先要有一個 github 賬號,如果沒有,可到 github 用郵箱註冊
新建一個倉庫,倉庫的名字必須符合 <用戶名>.github.io
,用戶名指的是瀏覽 github 個人主頁的時候,瀏覽器地址欄 github.com/
後面的那個名字,比如我的 github 主頁,則我的用戶名就是 jameszbl
,新建倉庫後會跳轉到初始化頁面,顯示一個類似於 https://github.com/jameszbl/jameszbl.github.io.git
的 url, 記下這個url,稍候會用到
在 “站點配置文件” 中,找到 deploy
,如果沒有可以手動添加,像這樣填寫:
deploy:
- type: git
# 遠端倉庫地址(剛纔記下的 url)
repo: https://github.com/JamesZBL/jameszbl.github.io.git
branch: master
這裏的部署配置需要安裝一個插件,因此在站點根目錄運行命令:
$ npm install hexo-deployer-git --save
插件安裝完成後,再執行:
$ hexo g && hexo d
部署插件會自動將編譯完成的靜態站點推送到 github 的遠端倉庫,等待幾分鐘後,訪問 <github 用戶名>.github.io
,即可看到搭建好的效果了
我的博客
歡迎訪問:鄭保樂的博客