大 纲

Hexo 是一款快速、简洁且高效的博客框架,具有超快速度、支持 Markdown、一键部署、丰富的插件和可扩展性等特点。

相关站点Hexo官网 Hexo主题 Hexo中文 Hexo仓库

第1步 安装 Hexo 框架

安装 Hugo 之前要确保设备装有 Git Node.js (建议安装最新版本)。

使用 npm 安装 Hexo,在终端输入如下命令。

npm install -g hexo-cli

由于国内可能会有网络受限的问题,使用npm会出现安装极慢或者安装失败,可以用cnpm替代。使用如下命令安装。

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

然后使用cnpm替换命令中的npm,例如:使用cnpm install -g hexo-cli安装Hexo

cnpm install -g hexo-cli

安装完后,在终端中输入如下代码验证安装。

hexo -v

执行安装操作前 macOS 用户终端输入sudo su命令并密码获取系统权限,Windows 用户以管理员身份运行CMD获取系统权限。

第2步 生成网站

首先新建并进入博客文件夹test在终端中输入如下代码:

mkdir test
cd test

在终端中输入如下代码下载Hexo文件,代码中test是所创建的网站文件夹名称,由用户自定义,以下网站名均由test代指。

sudo hexo init

第3步 网站配置(套用主题)

在终端中输入如下命令为 hexo 安装 git 插件。

npm install --save hexo-deployer-git

进入网站根目录。

cd test

主题商店 中选择自己喜欢的主题,使用如代码代克隆主题至本地。代码中网址为主题Github仓库地址,XXXX为主题文件夹名称。

git clone https://github.com/XXXXX/XXXX themes/XXXX

编辑网站根目录中_config.yml文件,修改代码theme: XXXX以确认所使用的主题。_config.yml文件默认格式如下,参考 官方文档 根据需要修改相关内容。

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone: Asia/Shanghai

# URL
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

第4步 添加页面

添加新页面,页面内容采用 Markdown 格式。

hexo new “my-first-post”

页面默认格式如下,代码中my-first-post为Markdown页面文件名,title: "My First Post"所写内容才是网站显示的标题,页面格式根据主题不同略有不同,详见主题描述。

---
title: "My First Post"
date: 2019/10/20 00:00:00
categories:
- 分类1
- 分类2
tags:
- 标签1
- 标签2
---

第5步 运行网站

在终端中输入如下代码生成网页。浏览器访问 http://localhost:4000 预览效果,关闭预览使用组合键Ctrl+C退出当前命令。

hexo s

第6步 生成静态网页

在终端中输入如下代码 清理旧文件、生成静态网页。

hexo clean
hexo g

第7步 部署 Github Pages

执行此操作前请确保拥有Github账号,并创建一个以XXX.github.io命名的空仓库,其中XXX为你的Github用户名,修改_config.yml文件中Git配置信息。

deploy: https://github.com/XXX/XXX.github.io
type: git
branch: master

在终端中输入如下命令部署页面。

hexo d

浏览器输入http://XXX.github.io实现远程访问。除本文使用的 Github Pages 外,你还可以使用 Coding 和 Gitee 等。