hexo blog 搭建

时间：

分类：

hexo

字数：

504 字

时长：

大约需要 2 分钟

次数：

0 人阅读

hexo 官方文档

本次安装环境如下：

windows node=10.16.0

node安装本文不再介绍，直接官网下载exe文件安装即可。

安装

个人不喜欢全局安装，使用了npx命令(需 node 版本>=5.2.0)，官方推荐 node 版本大于10.0，本地开发环境可使用 nvm管理 node 版本：

运行 npx hexo init blog ，其中 blog 表示新建项目的文件夹名字

1
2
3
$ npx hexo init blog
...
INFO  Start blogging with Hexo!

如果有 INFO Start blogging with Hexo! 提示表示安装成功

运行项目

1
2
3
4
5
6
7
$ cd blog
$ npm run server
> hexo-site@0.0.0 server xxx
> hexo server

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

浏览器访问 http://localhost:4000 ，如能正常访问表示项目运行成功

改造package.json，使用本项目node_modules下的hexo生成package

添加一条 hexo 命令

1
2
3
4
5
6
7
8
9
10
11
{
  ...
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "hexo": "./node_modules/.bin/hexo"
  },
  ...
}

控制台运行 npm run hexo new 我的第一篇博客 ，新建一篇文章

1
2
3
4
5
6
$ npm run hexo new 我的第一篇博客

> hexo-site@0.0.0 hexo xxx
> hexo "new" "我的第一篇博客"

INFO  Created: xxx\source\_posts\我的第一篇博客.md

给hexo命令传参，参考 npm run 命令传带横线参数

添加hexo server热更新能力

修改代码自动刷新，这恐怕是前端最常用的功能了，然而hexo并没有内置，我们需要安装插件 hexo-browsersync

1
$ npm install hexo-browsersync --save

再次执行 npm run server

1
2
3
4
5
6
7
8
9
10
11
12
$ npm run server

> hexo-site@0.0.0 server xxx
> hexo server --log

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
[Browsersync] Access URLs:
 ----------------------------------
          UI: http://localhost:3001
 ----------------------------------
 UI External: http://localhost:3001

有 Browsersync 运行提示，表示项目热更新启动

添加请求日志

给 server 命令添加 --log 参数

1
2
3
4
5
6
7
8
9
{
  ...
  "scripts": {
    ...
    "server": "hexo server --log",
    ...
  },
  ...
}
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-01-03/hexo-blog/

如果您觉得文章不错，可以点击文章中的广告支持一下！