Yohe,自己动手撸一个静态博客生成器
发布于 8 年前 作者 laoqiren 8560 次浏览 来自 分享

国庆期间试着撸了个静态博客工具 ,欢迎一起交流 : https://github.com/laoqiren/yohe


yohe

npm npm npm

一个静态博客生成器,采用Node.js开发。Yohe = 哟呵,一个会让你发出"哟呵,不错哦"感叹的静态博客生成器。

线上demo: http://luoxia.me/yohe_site/

English doc

功能

  • 简单易用,快速
  • 本地预览效果
  • 可定制化信息和主题
  • 新建自定义页面,可定制化导航菜单
  • 支持标签,分类,archives,分页等基础设施
  • 支持通过Github评论(gitment支持)
  • 首页可过滤指定分类文章

安装

$ npm install yohe -g

快速开始

获取帮助

$ yohe --help

初始化博客

$ yohe init myblog
$ cd myblog

该命令会初始化博客目录,包括初始化主题,文章,自定义页面等目录,以及加载默认配置文件

创建新文章

$ yohe new <postName>

该命令在source/_posts/下新建<postName>.md文件,在这里写作

渲染博客文件

$ yohe build

该命令会渲染博客到public目录

本地预览

$ yohe server

该命令会在本地起一个静态文件服务器,端口,子路径等信息可通过config.json配置

新增自定义页面

$ yohe page <pageName>

该命令会在source/_extra下生成<pageName>.md文件,默认布局为about页面布局

配置文件

运行yohe init后会生成config.json,配置说明:

{
 "basic": {
 "title": "My Blog", // 博客标题
 "author": "laoqiren", // 博客作者
 "description": "爱技术,爱生活", // 个性签名
 "root": "" // 博客根目录,当博客网站位于子路径如"http://luoxia.me/yohe_site"时,配置为"/yohe_site"
 },
 "theme": {
 "themeName": "default", // 主题名字
 "highlightTheme": "railscasts", // 代码高亮主题,所有可用主题列表参照"https://github.com/isagalaev/highlight.js/tree/master/src/styles"
 "per_page": 6,//每页展示的文章数
 "filter": ["life","随笔"], // 首页过滤分类文章,比如生活随笔文章不显示在首页列表
 "navPages": [ // 自定义导航菜单的页面标题和链接
 {
 "title": "标签",
 "url": "/tags"
 },
 {
 "title": "关于",
 "url": "/about"
 },
 {
 "title": "生活随笔",
 "url": "/categories/life/"
 }
 ],
 "reward": { // 打赏功能配置
 "enabled": true,
 "imgName": "alipay.jpg", // 二维码图片名称
 "words": "打赏" // 打赏说明
 }
 },
 "server": {
 "port": 3000 //本地预览服务器端口
 },
 "gitment": { // gitment评论功能相关配置,gitment使用教程参照"https://github.com/imsun/gitment"
 "owner": "",
 "repo": "",
 "oauth": {
 "client_id": "",
 "client_secret": ""
 }
 }
}

更丰富的配置正在开发中。

文章格式规范

参照下面的例子:

---
title: Cluster模块
date: 2016年11月27日
tags: [负载均衡,集群,多进程]
layout: post
comment: true
categories: Nodejs
---

其中layout默认为post,comment默认为true

如何发布

Yohe最终渲染结果在public目录,可采用多种方式起一个静态文件服务器,将public目录发布。

如何开发主题

layouts:

├── about.html // 关于页面布局(必须)
├── index.html // 首页布局(必须)
├── list.html // 特定分类和标签文章列表布局(必须)
├── post.html // 文章详情页布局(可更名)
└── tags.html // 标签云布局(必须)
└── ... // 自定义的布局

assets: 静态资源文件放在assets目录下

其他技巧

  • 要设置更改logo,替换assets/images/logo.png为你自己的logo图片,但名称依旧为logo.png
  • 关于页面为source/_about/about.md
  • 指定首页过滤分类文章,可以很方便地实现blog in blog
  • 文档名和分类名中的空格用-代替

TODOs

  • 默认主题完善
  • archives
  • 统计等功能
  • 更丰富的配置

LICENSE

MIT.

15 回复

nice,支持一个

(= ̄ ρ ̄=) ...zzZZ 自豪地采用 CNodeJS ionic

先看看大牛们的代码,学习一下。

此篇可以精华啊,实现了很多hexo的痛点,很不错,从生态上看,最好能兼容hexo的主题和插件

大赞,国庆期间没有撸一行代码- -

666 感觉自己的含盐量又高了

因缺思厅!😊

可以😊 自豪地采用 CNodeJS ionic

喜欢的话就给个star吧,这是对我最大的支持!

好文章,学习了,谢谢!

还在自顶。。。

回到顶部

AltStyle によって変換されたページ (->オリジナル) /