本文介绍了如何实现一个静态博客生成器，从明确需求到编写代码，包括安装依赖、搭建项目结构、创建命令行接口、解析Markdown文件、生成HTML页面以及启动本地服务器。通过这个过程，不仅可以满足个性化博客的需求，也能提升编程技能。
作为一名程序员，写博客是积累知识、提升水平必不可少的一个方法。我们写博客主要有三种方法，一种是使用掘金、博客园、CSDN等博客网站，第二种是自己搭建网站，存放自己的博客，第三种就是使用静态博客生成器，将生成的网页部署到服务器或者github pages、gitee pages等服务上。
这三种方法中，第一种自由度太低，并且定制样式很麻烦；第二种每写一篇博客都要新建个页面，非常麻烦。因此我选择了第三种方法，在使用了hexo、vuepress，gridea等多种静态博客生成器后，我决定自己写一个来提升自己的能力。
明确需求
首先我们要明确需求，确定我们想要的效果
- 初始化博客文件夹，载入模板
crn init - 根据模板创建markdown文件，
crn new "Hello CoinRailgun" - 根据markdown文件生成html文件，
crn build - 本地运行网站，
crn server
开始编写
安装依赖
根据上面我们分析出来的需求，确定出我们所需要的依赖，并且安装好他们
art-template编写模板所用的模板引擎commander用来编写clidayjs处理时间front-matter处理markdown顶部的yml声明fs-extrafs的扩充模块glob匹配指定文件名highlight.js高亮代码块koa和koa-static启动本地服务markdown-it、markdown-it-anchor、markdown-it-toc-done-right解析markdownuslug解析锚点的汉字
"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项目地址：https://github.com/Tuzilow/CoinRailgun
----------------------------------------------------------
搭建静态博客生成器CoinRailgun
首先在本地系统，安装nodejs环境，然后
npm install -g coinrailgun
$ cd ~
$ crn init crg-blog （会在当前目录下，生成'crg-blog'目录）
$ cd crg-blog
$ ls
显示：
site.config.json source/ theme/
$ nano site.config.json
(把"pageSize"的值改为3）$ cd source/_posts$ nano about.md$ cat about.md显示：---
title: 关于我
date: 2024/11/11 17:38:07
tags: [about,life]
category: blog
---
我，一位互联网爱好者。$ nano hf.md
$ cat hf.md
显示：
---
title: 快乐的节日
date: 2024/11/11 17:39:07
tags: [music,life]
category: blog
---
此处写正文或html codes.
$ cd ../..
$ crn build (此即生成/更新静态网站的根目录的命令。会在当前目录下，生成build目录）
$ cd build
~/crg-blog/build $ ls
about/ archives/ assets/ categories/ index.html page/ tags/
(可见~/crg-blog/build就是静态网站的根目录）
演示网站：https://aesthetic-twilight-fb70db.netlify.app/
项目地址：https://github.com/QiYuOr2/CoinRailgun
奇怪的是，此博客程序竟然不能渲染html codes：
https://aesthetic-twilight-fb70db.netlify.app/categories/blog/pretty-grassland/
https://aesthetic-twilight-fb70db.netlify.app/categories/blog/hf/
第一次遇到这现象/问题。
--------------------------------
上述问题的解决办法
先 fork GitHub - QiYuOr2/CoinRailgun: 一个基于nodejs的静态网页生成器,
我fork后的仓库地址是：https://github.com/luckypoemster/CoinRailgun
然后，访问https://github.com/luckypoemster/CoinRailgun/blob/main/lib/utils/post.js ，
编辑post.js文件，在第8行的下一行加上：
html: true,
然后,
$ git clone https://github.com/luckypoemster/CoinRailgun CoinRailgun-by-luckypoemster$ cd CoinRailgun-by-luckypoemster
$ ls
LICENSE README.md bin/ lib/ package-lock.json package.json template/
$ cat about.md显示：---
title: 关于我
date: 2024/11/11 17:38:07
tags: [about,life]
category: blog
---
我，一位互联网爱好者。$ nano pg.md
$ cat pg.md
显示：
---
title: 美丽的草原，我的家
date: 2024/11/12 22:01:07
tags: [music,life]
category: blog
---
此处写正文或html codes.
$ cd ../..$ node ../bin/crn.js build (此即生成/更新静态网站的根目录的命令。会在当前目录下，生成build目录）$ lsbuild/ site.config.json source/ theme/$ cd build~/CoinRailgun-by-luckypoemster/crg-blog/build (main)$
项目地址：https://github.com/QiYuOr2/CoinRailgun/https://github.com/QiYuOr2/CoinRailgun/issues/1https://github.com/luckypoemster/CoinRailgunhtts://github.com/luckypoemster/CoinRailgun/blob/main/lib/utils/post.js
No comments:
Post a Comment