Yohe，自己动手撸一个Nodejs静态博客生成器

发布于 1周前 作者 nodeper 来自 nodejs/Nestjs

Yohe，自己动手撸一个Nodejs静态博客生成器

大家中秋快乐！不知道今天还有几个朋友在写代码哈哈，国庆期间试着撸了个静态博客工具 ，基本功能已经好了，欢迎一起交流 ： https://github.com/laoqiren/yohe

yohe

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": {
        "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/"
            }
        ]
    },
    "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目录发布。

如何修改主题

目前Yohe的主题功能与Yohe耦合，需要修改主题可以对source/_layout和public/assets/进行开发，重新yohe build即可。未来的版本将解耦主题功能。

其他技巧

  • 关于页面为source/_about/about.md
  • 指定首页过滤分类文章，可以很方便地实现blog in blog
  • 文档名和分类名中的空格用-代替

TODOs

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

Harmonyos Next教程
17 回复

よほ, not bad~


not so good

看着不错！！

嘿嘿嘿

哦呼

支持一下！

喜欢的话，赏一个 star 支持一下吧~

哟呵，不错哦

很不错哟，支持 wordpress 转换吗？

目前主题是默认的，正在进行解耦主题开发解耦功能，那样的话，就可以更方便地迁移其他系统的主题啦

相较于 Hexo 等有什么亮点？ Hexo 主题和插件生态都那么丰富了

  1. 更快 2. 集成了一些常见需求，如首页过滤分类文章，打赏功能等 3. 足够简单，项目代码就那么一点，很容易二次开发。4. 其他亮点还需继续努力开发

额，貌似没法修改文章啊

帖子没法修改，最新版本更加完善，感兴趣可以转[https://github.com/laoqiren/yohe]( https://github.com/laoqiren/yohe)

哈哈哈来试试~

目前 Archives 已经实现，模板变量已经统一，开发主题更方便啦！

Yohe，

自己动手撸一个Node.js静态博客生成器是个既有趣又实用的项目。下面是一个简单的实现思路，包括必要的代码片段，帮助你快速上手。

首先，你需要安装一些必要的Node.js包：

npm init -y
npm install express fs-extra marked
  • express 用于创建服务器。
  • fs-extra 是fs的扩展，简化文件操作。
  • marked 用于将Markdown转换为HTML。

接下来，创建一个简单的Node.js脚本app.js：

const express = require('express');
const fs = require('fs-extra');
const marked = require('marked');
const app = express();
const PORT = 3000;

// 读取Markdown文件并渲染为HTML
fs.readdir('./posts').then(files => {
  files.forEach(file => {
    fs.readFile(`./posts/${file}`, 'utf8')
      .then(data => {
        app.get(`/${file.replace('.md', '')}`, (req, res) => {
          res.send(`<html><body>${marked(data)}</body></html>`);
        });
      });
  });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

确保你有一个posts文件夹，里面存放你的Markdown文件。

这个简单的静态博客生成器会将posts文件夹中的Markdown文件转换为HTML，并通过Express服务器提供访问。启动服务器后，你可以通过访问http://localhost:3000/文件名来查看博客文章。

希望这个示例能帮助你开始！如果需要更复杂的功能，比如模板引擎、元数据支持等，可以进一步扩展这个基础项目。

回到顶部