Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
搭建
搭建前提请先安装以下程序：
-
Node.js
-
Git
安装完成后，使用 Node.js 命令行工具执行以下命令
npm install -g hexo-cli
建站
- 码云创建新的项目（公开私有均可)。然后进入新项目，在服务选项中找到 Page 点击进入
进入 Page 页
- 开启 Page 服务
开启 Page 服务
- 开启后，复制下面的网站地址，后面要用到。这也是搭建好之后你的博客地址
网站路径
- 本地依次执行以下命令，Hexo 就会安装在 F:/Hexo 文件夹中。当然，这个文件夹是任意的。
hexo init F:/Hexo
cd F:/Hexo
npm install
- 然后 Git 到码云的新项目上（Git 相关知识请转站->廖雪峰）
配置
安装目录下的 _config.yml 是主要的配置文件，包含以下的配置
title: 标题
subtitle: 副标题
description: 描述
keywords: # 暂时不知道作什么的
author: 作者language: zh-CN # 使用中文
timezone: # 时区，默认使用电脑时区
- 配置网址，url 即为上面复制的网站地址，root 是地址最后一节
url: http://itscloudy.gitee.io/blog
root: /blog/
- 配置 Deploy（repo 为新建项目的地址）
deploy:
type: git
repo: https://gitee.com/itscloudy/Blog.git
- 然后执行 server 命令，本地测试。进入标题为“Hello World”页面即已成功一半。
# 默认地址 http://localhost:4000
hexo server
开始创作！
写博客
首先要了解 ，HEXO 支持的是 Markdown
现在，创建一篇文章。执行以下命令（例：hexo new "Hexo+码云 从搭建到管理一站解决"）
hexo new
执行之后，在 source/_post 文件夹下会出现对应名称的 Markdown 文件。或者，可以直接将写好的 Markdown 放到 source/_post 里
Markdown 的相关知识自行百度，CSDN、有道云等都支持。
文件开头加上以下信息：
| 属性 | 描述 |
|---|---|
| title | 标题，文章标题由这个决定，跟文件名无关 |
| data | 日期 |
| tags | 标签，多数主题支持按标签查询。例子中为多标签写法，单个标签不用括号 |
| categories | 分类，多数主题支持按分类查询 |
例如：
---
title: hexo+码云 从搭建到管理一站解决
data: 2018-03-28 17:04:00
tags: [Hexo,Sample]
categories: Hexo
---
总之，将 Markdown 格式的新博客放到 source/_post （重要的说三遍）里，且有头部信息就行。然后，请执行以下命令：
hexo generate #或者 hexo g
以上命令生成静态页面（即经过主题渲染的页面，public 文件夹里）。然后，使用 server 命令在本地测试
hexo server
首次上传前用 Node.js 命令行工具执行以下命令，用来安装 hexo 上传工具。第二次之后不必执行。
npm install hexo-deployer-git --save
然后，使用以下命令上传：
hexo deploy #或者 hexo d
创建页面
以创建标签（tags） 分页为例：
hexo new page "tags"
创建好的页面
在 source 文件夹下出现了名为 tags 的文件夹，其中包含了一个 index.md，这个便是新的页面
标签、分类（categories） 分页不用编辑，由主题自动填充。其他页面如关于（about）、联系（contact）等的内容，需要手动编辑其文件夹中的 index.md
然鹅，新页面是否可用，一般由主题配置决定，敬请继续往下阅读
更改主题
主题是 HEXO 非常重要的一块内容
找主题
-
进入 GitHub ，搜索 hexo-theme，进入任意主题项目
-
进入 hexo 官网/主题 ，点击示例主题的名字，会进入 GitHub 对应的项目
导入主题
这里以比较流行的 next 主题为例
- 在 Hexo 目录下进入 Git Bash，执行以下命令。
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 或者，直接到 themes 目录下执行
git clone https://github.com/iissnan/hexo-theme-next
设置主题
根目录下的 _config.yml 中配置主题
theme: next
主题配置
根目录下 _config.yml 包含了很多配置，但是还有大量的配置由主题目录下的 _config.yml 来设定。不同主题的配置不尽相同，这里还是以 next 主题为例
- 菜单设置
这里设置除主页外，要显示的页面
# 选项名：页面名（即上面一节创建的文件夹名） || font-awesome 图标
menu:
home: / || home
archives: /archives/ || archive
tags: /tags/ || tags
categories: /categories/ || th-large
contact: /contact/ || phone
- 社交链接
设置在指定的位置显示的社交链接
# 社交途径：路径 || font-awesome 图标
social:
GitHub: https://gitee.com/itscloudy || github
E-Mail: itscloudy@foxmail.com || envelope
- 网站左上角的图标
# 后面的文件路径都是在 themes/next/source 目录下的
favicon:
small: /images/favicon-16x16-next.png # 小尺寸图标
medium: /images/favicon-32x32-next.png # 中尺寸图标
apple_touch_icon: /images/apple-touch-icon-next.png # apple_touch 图标
safari_pinned_tab: /images/logo.svg # safari_pinned 图标
- 代码样式
# 有5中样式可选 normal，night，night eighties，night blue，night bright
highlight_theme: night eighties
- 网站尾部显示内容
footer:
since: 2018 # 起始年
icon: user # 起始年和版权之间的小图标（font-awesome 图标）
copyright: # 版权，默认为作者名
powered: true # 显示“由HEXO强力驱动”
theme:
enable: true # 显示主题名
version: true # 显示主题版本
提示：font-awesome 是一个图标库，在这里搜索 font-awesome 图标，使用给出的图标名称就OK
以上为常用配置，更多配置请自行百度
其他
显示图片
博客图片的一般显示方式为 ：
然鹅这种方法时常会失效，我也布吉岛为什么（就一个字儿没动，突然就加载不了了）。以下是官方的解释
通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。—— Hexo 官网
所以我建议我们应该用官方推荐下面这种方式引用图片和其他资源
{% img /img/picture.png 描述 %}
图片也可以上传到七牛云、腾讯云等的“对象储存”服务上，使用 http 来显示。也可以使用简书和 CSDN 等博客类网站在上传图片后生成的图片路径。
{% img https:... 描述 %}
更多
更多信息可以查阅 HEXO 官网文档
网友评论