个站建立基础教程

2022-05-06 02:01:10

什么是 Hexo

Hexo 是一个静态网站生成器，基于 Hexo 框架，可以生成自己想要的网站风格，以及网站内容，样式自己可以定义。

实战

环境准备

系统： win7 +

nodejs：http://nodejs.cn/download/

git-client：https://git-scm.com/download/

安装 Hexo

准备好以上环境后，就可以准备安装 Hexo 基本框架：

#安装基本框架
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的基础源码。

拉取源码后，在其根目录下，进行一些基本的安装组件操作：

组件

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

新建草稿文章

hexo new draft b

我们会在 source 下看见一个新的文件夹，\_drafts，这个里面会装我们所有的草稿文件。

预览草稿

hexo server --draft

发布草稿

hexo publish b

新建正式文章

hexo new a

在 hexo 目录下的 source/\_post 下生成 a.md

打开 a.md，可以编辑文章

生成页面文件

hexo generate

or

hexo g

生成页面

hexo new page about

这样直接在 source 下创建 about 目录，下面也会生成一个 index.md

启动服务

hexo server

以上关于 Hexo 的基本命令以及对应的功能操作介绍完了。

我们来看看我的网站吧：Damon | 微服务 | 容器化 | 自动化。

主页展示的是个人文章，这些对于 hexo 来说就是一个个页面：

在主页可以看到左侧的栏目，这些就是 hexo 的页面，比如：_关于我_：

由于上面我们还加入了搜索插件，所以，我们可以进行全文搜索：

当然，还有一些订阅模式，等等功能。

hexo 不管是页面也好，还是文章也好，都是通过 md 格式文件来生成静态页面的，所以看起来很简单。

其次，比较重要的是有一个文件中，可以配置各种开关或格式控制：

这个里面可以根据官网配置自己想要的功能，包括打赏：

到目前为止，基于 hexo 生成静态网站的主体就到此结束啦。

码农公寓