基于Hexo快速搭建项目官网及文档平台

[younth]

你的项目需要一个官网平台了（基于Hexo快速搭建项目官网及文档平台）

玩过 github.io 的同学对 hexo 都比较熟悉，目前最火的静态博客工具。其实，hexo 除了能帮助我们快速搭建个人博客，还能快捷搭建 项目官网。最近在搭建公司内部框架的官网用到了，跟大家一块分享下~

项目官网的构成

我们先来看看一些项目的官网：

1. Hexo 官网

https://hexo.io/

首页：

文档平台：

新闻页面：

2. NexT 官网

http://theme-next.iissnan.com/

首页：

文档平台：

其他还有一些项目的官网都是这种形式的，我们可以看出，一般项目官网主要包括下面几个部分：

• 首页
• 文档页面
• 独立页面

那么如何快速的搭建这几个页面框架呢？

首页

一般来说，首页比较个性化，涉及到设计风格，有设计资源的同学可以找相关的同学帮助设计，然后编写成静态页面。如果没有设计资源，可以直接用网上现有的（注意版权），修改套用，文章后面我提供了两种笔者目前再用的。

文档页面

文档页面就类似于我们的博客平台，这是我们更新最频繁的地方。我们用 markdown 编写，然后通过 hexo 自动生成静态页面，配合文档样式框架，最终即可形成我们的文档平台。下面的截图是本人对 egg 官网的样式进行改造后：

这种文档平台有点类似于 gitbook 提供的编写文档能力。gitbook 只专门用于写文档或者书籍的，我们这个更灵活些~

独立页面

独立页面主要指我们的一些新闻页面，个性页面。这种页面一般分为两种：

• 新闻、通用单页面：编写页面基础框架，剩余部分通过 markdown 编写，hexo 生成
• 个性页面：类似与首页，需要单独编写维护

比如，这是我们内部框架用到的通用介绍页面：

如何利用Hexo搭建官网

其实搭建项目官网的过程，就是在编写hexo主题的过程。因此必须对hexo主题的构成及API有一定的了解。传送门—hexo主题说明

hexo 官方主题默认模板引擎是 swig。虽然该模板引擎目前停止维护了，但是不得不说非常好用。目前很多主题也是基于swig，这里也建议大家使用。

下面是一个官网主题的目录结构：

docs
  ├─ languages // 多语言翻译配置文件  
  ├─ layout   // 模板文件
  │  ├─ layout.swig  // 基础模板
  │  ├─ index.swig  // 首页
  │  ├─ post.swig  // 独立文章页面框架
  │  └─ page.swig // (文档平台框架)
  ├─ scripts // 
  │  └─ helper.js // node执行的脚本，自定义辅助函数，一般用于提取导航信息，跳转等 
  ├─ source // 存放前端css js资源
  ...

编写主题需要基础的前端技能，建议大家通过hexo官网api或者网上成熟的开源主题进行二次开发来学习如何编写主题，其中需要主要的是：

scripts/helper.js 这个文件是hexo运行时候执行的，即在node环境下执行，功能是可以实现一些全局的功能函数，比如提取导航，生成链接等。

用 hexo-site-kit 快速搭建官网

这里本人近期基于 egg 、hexo 官网主题进行了二次开发，搞了一个项目 hexo-site-kit ，运行即可看到一个官网平台的demo。

该项目不是一个hexo主题插件，而是一套迅速搭建你的官网平台解决方案。目前包含有两种主题样式 ，通过修改_config.yml 里面的 theme可以更改主题。

• docs: 基于 egg 官网改造
• navy: 基于 hexo 官网改造

切换主题的时候，务必先执行 hexo clean 清空之前的编译缓存

后续会继续搜寻开发出好用的官网及文档平台，更新到项目的theme下面，丰富主题供大家选择。

[iRockyZhou]

各个连接都是404了, 求修复

[younth]

@iRockyZhou 图片链接修复了

[iRockyZhou]

好的 谢谢 @younth 另外 请问下 能详细讲讲个性页面怎么做么

举个栗子, 如何定制About.html的样式 并且, 我希望能够有"商品介绍", "明天天气", "交通情况"等多个可单独定制样式的页面

请问, 我该怎么做, 谢谢

[sunscheung]

@younth 洋仔 在写基于hexo的企业官网主题啊 哈哈哈

[younth]

@sunscheung 你是？

[sunscheung]

坐标南京 旭 @younth

[younth]

@sunscheung 老铁！