什么是 Hexo
Hexo 是一个静态网站生成器,基于 Hexo 框架,可以生成自己想要的网站风格,以及网站内容,样式自己可以定义。
实战
环境准备
代码语言:javascript复制系统:win7
nodejs:http://nodejs.cn/download/
git-client:https://git-scm.com/download/
安装 Hexo
准备好以上环境后,就可以准备安装 Hexo 基本框架:
代码语言:javascript复制#安装基本框架
npm install -g hexo
#初始化hexo框架
hexo init
#安装所需要的组件
npm install
#编译生成静态页面
hexo g
#启动服务
hexo s
这是一个基本的 Hexo 原型,当然,Hexo 有许多 themes,官方地址:https://hexo.io/themes/index.html,本文实战用的是Ayer。可以先从github官网拉取相关themes的基础源码。
拉取源码后,在其根目录下,进行一些基本的安装组件操作:
组件
代码语言:javascript复制npm install hexo-renderer-jade@0.3.0 --save
npm install hexo-generator-json-content@2.2.0 --save
npm install hexo-renderer-stylus --save
#用于搜索
npm install hexo-generator-searchdb --save
#用于生成RSS订阅
npm install hexo-generator-feed --save
npm uninstall hexo-generator-index --save
#用于文章置顶
npm install hexo-generator-index-pin-top --save
#用于文章加密,具体参考 https://github.com/MikeCoder/hexo-blog-encrypt/blob/master/ReadMe.zh.md
npm install --save hexo-blog-encrypt
#音乐播放器
参考:https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
新建草稿文章
代码语言:javascript复制hexo new draft b
我们会在 source 下看见一个新的文件夹,_drafts,这个里面会装我们所有的草稿文件。
预览草稿
代码语言:javascript复制hexo server --draft
发布草稿
代码语言:javascript复制hexo publish b
新建正式文章
代码语言:javascript复制hexo new a
在 hexo 目录下的 source/_post 下生成 a.md
打开 a.md,可以编辑文章
生成页面文件
代码语言:javascript复制hexo generate
or
hexo g
生成页面
代码语言:javascript复制hexo new page about
这样直接在 source 下创建 about 目录,下面也会生成一个 index.md
启动服务
代码语言:javascript复制hexo server
以上关于 Hexo 的基本命令以及对应的功能操作介绍完了。
我们来看看我的网站吧:damon8.cn。
主页展示的是个人文章,这些对于 hexo 来说就是一个个页面:
在主页可以看到左侧的栏目,这些就是 hexo 的页面,比如:关于我:
由于上面我们还加入了搜索插件,所以,我们可以进行全文搜索:
当然,还有一些订阅模式,等等功能。
hexo 不管是页面也好,还是文章也好,都是通过 md 格式文件来生成静态页面的,所以看起来很简单。
其次,比较重要的是有一个文件中,可以配置各种开关或格式控制:
这个里面可以根据官网配置自己想要的功能,包括打赏:
到目前为止,基于 hexo 生成静态网站的主体就到此结束啦,欢迎大家关注个站哟:damon8.cn。
最后介绍新公号:天山六路折梅手,欢迎关注。