hexo 搭建博客教程

2018-08-13

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

需要全局安装 hexo-cli

1	npm install -g hexo-cli

创建自己的博客项目，执行以下命令：

1
2
3

hexo init BlogName
cd BlogName
npm i

等待依赖安装完后，这时博客已经可以访问了，执行 hexo s，在浏览器打开 http://localhost:4000，则可以访问了。

根目录下的 _config.yml 文件则是你博客的配置文件（以下称配置文件则指_config.yml），包括网站标题、网址、目录、主题等各种扩展等信息。具体配置信息可以参考配置

hexo 的主题非常丰富，而主题的好看与否也决定了网站的档次。
首先找到你喜欢的主题，clone 到 themes/ 目录下，并修改配置文件中的 theme 为你的主题名称，就完成更换主题了。

执行新建文章命令：

1	hexo new '这是文章标题'

就会 source/_posts 目录下生成一个 这是文章标题.md 的文件，打开后在里面写 markdown 格式的文章即可。

只有部署到 github page 上，才能让别人也看到你的博客。那首先要在 github 上面建一个仓库，仓库名为 xxx.github.io，而 xxx 正是你 github 的用户名。然后在配置文件中添加仓库地址

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

然后要先构建生成静态文件，因为现在的文件都是 md 文件和模板文件：

hexo g

执行完之后，就会生成一个 public/ 目录，再执行

hexo d

则提交到 github 仓库上了，这是就可以访问 https://xxx.github.io 了。

访问的时候，你会发现文章链接是 https://xxx.github.io/2018/8/8/这是文章标题/ ，这么多层目录下，不仅不利于 SEO 优化，还带着中文，有点恶心。我希望访问的文章链接可以是 https://xxx.github.io/article/1.html 或者是 https://xxx.github.io/article/1/

打开配置文件，可以看到有个 permalink 字段，正是用于配置文章链接的。改成以下之后：

1	permalink: article/:title.html

我再新建一个文章

1	hexo new '1'

新建的文章 md 文件中，最上面存在这样的一块内容

---
title: HTML5 进阶系列：canvas 动态图表
date: 2017-05-23 10:09:31
tags: [HTML5, JavaScript, 图表]
categories: [HTML5]
---

在文中添加  可以在首页显示 “查看更多”，而不会把整篇文章都显示在首页列表上。