Hexo安装与使用

发表于 | 更新于 | 分类于

这篇文章介绍了Hexo的安装与使用。

官方文档：https://hexo.io/docs/

一、Hexo的安装

Windows10下的安装

1、前置要求

1
2
3
Node.js
git
[github page]

2、安装

1
$ npm install -g hexo-cli

3、初始化

1
2
3
4
# <folder>是你希望保存hexo文件的目录
$ hexo init <folder>
$ cd <folder>
$ npm install

4、会生成如下的目录树

1
2
3
4
5
6
7
8
.
├── _config.yml # 配置文件
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes`# 主题文件，默认landscape主题，可以安装新主题，如：Next

二、Hexo的使用

1、写新文章

1
$ hexo new [layout] <title>

post是默认的[layout]，修改配置文件中的new_post_name: :title.md项后，文章会以<title>.md的名字保存到./source/_posts中。

直接把md文件放到_posts目录下貌似也可以

把_config.yml 里的post_asset_folder:这个选项设置为true后，每篇文章会在./source/_posts下生成对应的目录，可以存放图片、js、css等数据。

2、文章的和标签

只对posts有效

文章最上方以 --- 分隔出一片Front-matter。

1
2
3
4
5
6
---
title: Hello World
date: 2013-07-13 20:46:25
tags: ......
categories: ......
---

具体设置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 设置分类
# 方法1
categories:
- Deep Learning
- Dependency Parsing
# 方法2
categories: [Deep Learning, Dependency Parsing]

# 设置标签
# 方法1
tags:
- PS3
- Games
# 方法2
tags: [PS3, Games]

对于分类，上面两种方法会使Dependency Parsing成为Deep Learning下的子分类，而非同级分类，要让一篇文章同时属于多个同级分类，用-[]即可：

1
2
3
categories:
- [Deep Learning]
- [NLP, Dependency Parsing]

NLP/Dependency Parsing成为了Deep Learning的同级分类。

3、渲染

1
hexo g

会在./public下生成静态文件。

清除public下的静态文件：

1
hexo clean # 可能是清除静态文件，待试验

4、部署

在github上开始github page，创建对应仓库。

一键部署

修改hexo的配置文件_config.yml：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:ironsword666/ironsword666.github.io.git
  branch: gh-pages

部署：

1
hexo d

结合生成和部署：

1
2
3
4
# 方法1
hexo g -d
# 方法2
hexo d -g

手动部署

可以结合分支

部署不一致问题

本地和github不一致

本地的public目录修改的旧文件，github上这些旧文件还在，没有同步修改，导致页面404，如：hexo改成Hexo。

待解决，目前手动更改的

github page和github不一致

浏览器缓存或cdn延迟，可以多刷新几下，或用隐私模式。

5、gh-pages分支

参考：https://www.v2ex.com/t/138274

主要就是非用户名仓库必须用gh-pages分支，用户名仓库可以用master分支。

待更

一种分支方式参考：https://blog.csdn.net/u012040909/article/details/79929542

知乎的分支参考：https://www.zhihu.com/question/319817323

渲染延迟参考：https://segmentfault.com/q/1010000018135948

三、其它技巧

1、在hexo首页只显示每篇博客的部分内容

在markdown文件中新起一行，添加：

1
<!--more-->

2、侧边栏目录设置

待更

3、侧边栏目录不对齐，出现·

参考：https://github.com/iissnan/hexo-theme-next/issues/1229

解决方法：目录不跨级，即# -> ##而不能# -> ###

4、Cloudflare加速

5、插入图片

参考：https://blog.csdn.net/sugar_rainbow/article/details/57415705

第一步

  • 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true，会为每篇文章创建对应的目录

  • 在你的hexo目录下执行这样一句话npm install hexo-asset-image --save，这是下载安装一个可以上传本地图片的插件，来自dalao：dalao的git

  • 等待一小段时间后，再运行hexo n <title>来生成md博文时，/source/_posts文件夹内除了<title>.md文件还有一个同名文件夹./<title>

第二步

  • 在<title>.md中想引入图片时，先把图片复制到<title>这个文件夹中，然后只需要在<title>.md中按照markdown的格式引入图片：
1
![](<title>/图片名.jpg)

注意： <title>是这个md文件的名字，也是同名文件夹的名字。只需要有文件夹名字即可，不需要有什么绝对路径。你想引入的图片就只需要放入<title>这个文件夹内就好了，很像引用相对路径。

  • 最后检查一下，hexo g生成页面后，进入public/.../index.html文件中查看相关字段，可以发现，html标签内的语句是<img src=".../<title>/图片名.jpg">，而不是<img src="<title>/图片名.jpg>。这很重要，关乎你的网页是否可以真正加载你想插入的图片。

6、_posts下目录使用进阶

0%