静态博客生成器：static-125

Build a static blog generator in 125 lines of JS https://cn.ylines.org

Introduction

English | 中文

Usage

# install dependencies
npm i

# generate blog
node index.js --baseURL "https://ylines.org" --title "Y Lines" --fromPath "posts" --destPath "build" --themePath "themes/ylines.org"

Params

• --baseURL: base url of your blog
• --title: title of your blog
• --fromPath: the folder path where you store blog posts
• --destPath: where you want to store the blogs
• --themePath: the folder path where theme is stored

from https://github.com/ylines/static-125

----

125 行代码实现一个静态博客生成器.
这篇文章涉及到的所有代码开源在 GitHub. 假设读者知道什么是 Markdown 格式, 对 HTML, CSS 和 JavaScript 有一些了解.

本文介绍了如何通过 125 行的 JavaScript, 搭配 CSS 和 HTML 来自己动手写一个博客生成器.
事实上, 你现在所看到的这个网站就是用这个工具生成的.

目标

读取一个装着博文的文件夹

📂posts
 ┣ 📜about.md
 ┗ 📜static-y.md

生成一个可以部署到 GitHub Pages 或者任何服务器上的静态博客. 生成的博客目录大概长下面这样

📂build
 ┣ 📂assets         // 资源文件夹, 放一些博客用到的图片, css, js 文件
 ┣ 📜index.html     // 博客主页: 按时间顺序索引博文
 ┣ 📜rss.xml        // RSS 文件: 供读者订阅
 ┣ 📜about.html     // 文章页面: 具体的博文
 ┗ 📜static-y.html  // 文章页面: 具体的博文

怎么做

用到的工具

• markdown-it: markdown 转化成 HTML 格式
• github-markdown-css: 类似 GitHub文章的样式
• feed: 生成 RSS
• prism.js: 用于代码高亮
• minimist: 解析从命令行传入的参数
• copy-dir: 拷贝整个文件夹
• Figma: 用于设计 logo
• convertio: 图片格式转换

代码结构

📜index.js              // 装了主要逻辑
📦themes                // 用于存放不同的主题, 方便切换和自定义(目前只有一个主题, 也就是你现在看到的)
 ┗ 📂ylines.org                   // 你现在所看到的这个主题
 ┃ ┣ 📂assets                     // 一些静态资源, 会被直接复制到生成的文件夹中
 ┃ ┃ ┣ 📜favicon.ico              // 网站的 favicon
 ┃ ┃ ┣ 📜github-markdown.min.css  // 把文章展示成类似 github 的 markdown 样式(文末有来源)
 ┃ ┃ ┣ 📜index.css                // 用户自定义的样式
 ┃ ┃ ┣ 📜prism.css                // 用来做代码高亮(文末有来源)
 ┃ ┃ ┗ 📜prism.js                 // 用来做代码高亮(文末有来源)
 ┃ ┣ 📜index.html                 // 用于生成主页, 通过塞入博文列表
 ┃ ┗ 📜post.html                  // 用于生成博文, 通过塞入博文标题, 内容, 时间, 作者等

from https://cn.ylines.org/static-y.html