实现一个简单的静态博客生成器

最新推荐文章于 2024-09-14 07:50:24 发布

兔子喽

最新推荐文章于 2024-09-14 07:50:24 发布

阅读量614

点赞数

分类专栏： JavaScript 学习记录工具文章标签： javascript node.js es6 js web

本文链接：https://blog.csdn.net/weixin_43783363/article/details/113753214

版权

本文介绍了如何实现一个静态博客生成器，从明确需求到编写代码，包括安装依赖、搭建项目结构、创建命令行接口、解析Markdown文件、生成HTML页面以及启动本地服务器。通过这个过程，不仅可以满足个性化博客的需求，也能提升编程技能。

摘要由CSDN通过智能技术生成

作为一名程序员，写博客是积累知识、提升水平必不可少的一个方法。我们写博客主要有三种方法，一种是使用掘金、博客园、CSDN等博客网站，第二种是自己搭建网站，存放自己的博客，第三种就是使用静态博客生成器，将生成的网页部署到服务器或者github pages、gitee pages等服务上。

这三种方法中，第一种自由度太低，并且定制样式很麻烦；第二种每写一篇博客都要新建个页面，非常麻烦。因此我选择了第三种方法，在使用了hexo、vuepress，gridea等多种静态博客生成器后，我决定自己写一个来提升自己的能力。

项目地址：https://github.com/Tuzilow/CoinRailgun

明确需求

首先我们要明确需求，确定我们想要的效果

初始化博客文件夹，载入模板crn init
根据模板创建markdown文件，crn new "Hello CoinRailgun"
根据markdown文件生成html文件，crn build
本地运行网站，crn server

开始编写

安装依赖

根据上面我们分析出来的需求，确定出我们所需要的依赖，并且安装好他们

art-template编写模板所用的模板引擎
commander用来编写cli
dayjs处理时间
front-matter处理markdown顶部的yml声明
fs-extrafs的扩充模块
glob匹配指定文件名
highlight.js高亮代码块
koa和koa-static启动本地服务
markdown-it、markdown-it-anchor、markdown-it-toc-done-right解析markdown
uslug解析锚点的汉字

"dependencies": {
   
  "art-template": "^4.13.2",
  "commander": "^7.0.0",
  "dayjs": "^1.10.4",
  "front-matter": "^4.0.2",
  "fs-extra": "^9.1.0",
  "glob": "^7.1.6",
  "highlight.js": "^10.5.0",
  "koa": "^2.13.1",
  "koa-static": "^5.0.0",
  "markdown-it": "^12.0.4",
  "markdown-it-anchor": "^7.0.1",
  "markdown-it-toc-done-right": "^4.2.0",
  "uslug": "^1.0.4"
}

搭建项目结构

.
├─ bin
│    └─ crn.js  # 执行文件
├─ lib	# crn.js调用的各个函数
│    ├─ build.js
│    ├─ clean.js
│    ├─ new.js
│    ├─ preview.js
│    └─ init.js
├─ package.json
└─ template # 模板
       ├─ site.config.json # 配置文件
       └─ theme # 主题
              └─ default # 默认主题
                     ├─ assets
                     └─ layout

crn.js

同样，根据需求将各个命令、命令的参数和说明先写出来

关于commander具体如何使用，可以查看commander文档

#! /usr/bin/env node

const program = require('commander');
const version = require('../package.json').version;

program
  .version(version)
  .command('init [dir]')
  .description('初始化博客')
  .action(require('../lib/init'));

program
  .command('new <name>')
  .description('创建新的文章')
  .action(require('../lib/new.js'));

program
  .command('server [dir]')
  .description('本地预览网站')
  .option('-d, --dir <dir>', 'build时输出的目录')
  .action(require('../lib/preview.js'));

program
  .command('build [dir]')
  .description('将文章渲染为html')
  .option('-o, --output <dir>', '输出目录')
  .action(require('../lib/build')

最低0.47元/天解锁文章