Hexo--博客搭建

本站的博客搭建采用Hexo+NexT主题,部署在GitHub Pages
下面手把手带你搭建免费高效的博客系统~

简介

Hexo–快速、简洁且高效的博客框架,基于NodeJS环境。

  • 超快速度

    Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。

  • 支持 Markdown

    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。

  • 一键部署

    只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

  • 丰富的插件

    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript


Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

安装前提:

安装Hexo:

1
npm install -g hexo-cli

具体的安装过程的问题,这里不再过多提及。官方安装文档:https://hexo.io/zh-cn/docs/

建站

新建文件夹创建项目:

1
2
3
hexo init <folder>
cd <folder>
npm install

若需要在当前文件夹直接创建,在当前目录下hexo init

Hexo项目目录结构:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml:网站的配置信息。官方配置文档:https://hexo.io/zh-cn/docs/configuration

package.json:应用程序的信息。

scaffolds模版文件夹。当您新建文章时,Hexo 会根据scaffold来建立文件。官方模板配置文档:https://hexo.io/zh-cn/docs/templates

source资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes主题文件夹。Hexo 会根据主题来生成静态页面。

项目下的_config.yml项目配置文件,主题下的_config.yml主题配置文件

执行

1
hexo generate && hexo server --debug

即可在本地http://localhost:4000/ 查看默认的网站样式啦~

命令

新建网站项目

1
hexo init [folder]

如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。

新建文章

1
hexo new [layout] <title>

如果没有设置 layout 的话,默认使用 网站配置_config.yml 中的 default_layout 参数代替。

如果标题包含空格的话,请使用引号括起来。

也可以简写:hexo n [layout] <title>

生成静态文件

1
hexo generate
  • -d, –deploy 文件生成后立即部署网站
  • -w, –watch 监视文件变动

也可以简写:hexo g

本地启动服务器

1
hexo server

默认情况下,访问网址为: http://localhost:4000/。

  • -p, –port 重设端口
  • -s, –static 只使用静态文件
  • -l, –log 启动日记记录,使用覆盖记录格式

也可以简写:hexo s

线上部署

1
hexo deploy
  • -g, –generate 部署之前预先生成静态文件

也可以简写:hexo d

部署到GitHub Pages请看这篇文章~

清除缓存文件和已生成的静态文件

1
hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

更改配置文件_config.yml后需要运行该命令。不然可能会报Unhandled rejection Error: ENOENT: no such file or directory, open '**'

主题

Hexo的默认主题是landscape,官方推荐主题:https://hexo.io/themes/

本博客网站使用的主题是NexT.Pisces
如需要v6及以上的,请看新仓库https://github.com/theme-next/hexo-theme-next

安装

先从git将主题拉下来,在项目下

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

项目配置文件_config.yml中查找theme,修改值为theme: next。(注意next前的空格哦)

然后hexo clean && hexo generate && hexo server --debug就能看见next主题的默认样式啦

选择NexT.Pisces需要在themes/next下的主题配置文件_config.yml中查找scheme,修改值为scheme: Pisces再运行上面的重新启动,
就能看到样式啦

安装Hexo和Next主题到此就结束啦~

要说的话

建议在项目下package.json中配置开发运行脚本和部署脚本,在最外层json中添加:

1
2
3
4
"scripts": {
"dev": "hexo clean && hexo generate && hexo server --debug",
"start": "hexo clean && hexo generate && hexo deploy"
},

以后开发运行npm run dev就好啦。线上部署使用npm run start

-------------本文结束啦 感谢您的阅读-------------
所谓向日葵族 wechat
💡 更多好文欢迎关注我的公众号~
觉得不错的话,点个赞🌟吧~
0%