Nodejs 基于markdown的个人博客系统DSB

Nodejs 基于markdown的个人博客系统DSB

DSB, dead-simple blog,based on expressjs+ejs+marked+underscore+bootstrap

无数据库,直接存为markdown文件,界面直接照搬之前写的 [白云黄鹤BBS十大话题收集站][1],只是之前爬的太凶残,总是被禁止抓取就停掉了

一直想自己写一个blog系统,关于结构早就构思好了,只是一直没有时间完成,加之js刚入门,今天加急弄了个可用的版本,然后学着放到了Github:https://github.com/nihgwu/dsb ,然后在Appfog上跑了个Demo:http://dsb.ap01.aws.af.cm/ ,用户名密码都是admin,纯粹只是一个能跑的系统,没有任何稳定性保证,后面有时间再慢慢把余下的基本功能都补上吧

现在看这里吧 http://dsblog.jd-app.com/ 可能因为长时间没访问休眠了,有访问就会醒来了 [1]: http://cnodejs.org/topic/51597cf65dff253b378c9d44


8 回复

Nodejs 基于markdown的个人博客系统DSB

简介

DSB(Dead-Simple Blog)是一个基于Express.js、EJS、Marked、Underscore和Bootstrap构建的轻量级博客系统。该系统不依赖数据库,而是将所有文章以Markdown格式保存在文件系统中。

技术栈

  • Express.js: 用于搭建Web服务器。
  • EJS: 作为模板引擎渲染页面。
  • Marked: 用于解析Markdown文件并生成HTML。
  • Underscore: 提供一些辅助函数,如模板处理等。
  • Bootstrap: 提供响应式布局和样式。

功能与架构

  • 无数据库: 文章直接存储为Markdown文件,路径可以自定义。
  • 界面: 界面借鉴了之前的项目——白云黄鹤BBS十大话题收集站,但去除了爬虫相关的功能。
  • GitHub: 该项目托管在GitHub上,链接为: https://github.com/nihgwu/dsb
  • Appfog Demo: 在Appfog上运行了一个Demo,访问地址为: http://dsb.ap01.aws.af.cm/
  • 登录: 默认用户名和密码均为admin

示例代码

以下是一些关键部分的代码示例:

初始化Express应用

const express = require('express');
const app = express();
const path = require('path');
const marked = require('marked');

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const posts = getPosts(); // 自定义函数,读取Markdown文件
    res.render('index', { posts });
});

function getPosts() {
    // 读取Markdown文件,并使用Marked解析
    const fs = require('fs');
    const files = fs.readdirSync(path.join(__dirname, 'posts'));
    const posts = files.map(file => {
        const content = fs.readFileSync(path.join(__dirname, 'posts', file), 'utf8');
        return { title: file.replace('.md', ''), body: marked(content) };
    });
    return posts;
}

EJS模板

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DSB Blog</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>DSB Blog</h1>
        <% posts.forEach(post => { %>
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title"><%= post.title %></h5>
                    <p class="card-text"><%- post.body %></p>
                </div>
            </div>
        <% }) %>
    </div>
</body>
</html>

总结

这个项目只是一个初步实现,旨在提供一个简单的博客系统。虽然目前还存在一些不足,但已具备基本的功能。未来会逐步完善,增加更多的功能和优化用户体验。

访问链接

访问最新部署的版本:http://dsblog.jd-app.com/。如果由于长时间未访问而处于休眠状态,请稍后再试。

希望这个简单示例能够帮助你理解和使用DSB。


起步不错

看了看,风格很简洁

代码还是界面?我觉得个人博客就应该简洁,基本功能就够了

弱弱的问一句,多说这个评论插件怎么用呀?

后缀名,cm是不是写错了?表示打不开:(

404,亲

基于Markdown的个人博客系统DSB(Dead-Simple Blog)使用Express.js作为Web框架、EJS作为模板引擎、Marked解析Markdown文本、Underscore.js提供一些实用工具函数,并且使用Bootstrap进行前端布局。以下是该系统的一个简单实现示例,包括路由设置和文章渲染逻辑。

示例代码

首先确保安装必要的依赖包:

npm install express ejs marked underscore bootstrap

app.js

这是主要的Express应用文件,处理HTTP请求并渲染页面。

const express = require('express');
const marked = require('marked');
const path = require('path');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 设置模板引擎
app.set('view engine', 'ejs');

// 处理主页请求
app.get('/', (req, res) => {
    const articles = readArticles(); // 自定义函数,读取Markdown文件
    res.render('index', { articles });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

function readArticles() {
    // 这里应该有一个函数来读取markdown文件列表并返回它们的解析结果
    return [
        {
            title: 'First Article',
            content: marked('# This is a markdown article')
        },
        // 其他文章
    ];
}

views/index.ejs

这是一个EJS模板文件,用于显示文章列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dead-Simple Blog</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>Dead-Simple Blog</h1>
    <% for (let article of articles) { %>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title"><%= article.title %></h5>
                <p class="card-text"><%- article.content %></p>
            </div>
        </div>
    <% } %>
</div>
<!-- 引入Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>

解释

这个简单的系统通过Express处理路由,使用EJS渲染HTML,Marked将Markdown文本转换成HTML,Bootstrap负责美化页面样式。它没有使用数据库,而是直接从文件中读取Markdown内容,然后在网页上显示这些内容。

GitHub链接

你可以访问该项目的GitHub仓库查看完整的代码:GitHub - DSB

注意事项

该示例代码仅为演示目的简化了许多细节,如错误处理、安全性和实际部署考虑等。在实际项目中需要添加更多功能和完善现有代码。

回到顶部