Step 1: Set Up the Project

Blog Platform with Custom CMS

Step 1: Set Up the Project

1. Initialize your project:

mkdir custom-blog cd custom-blog npm init -y

1. Install necessary packages:

npm install express mongoose body-parser ejs

Step 2: Create Basic Folder Structure

Step 3: Set Up the MongoDB Connection

Create a new file named app.js and set up the Express app with MongoDB:

javascriptCopy code// app.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const postRoutes = require('./routes/posts');

const app = express();

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/custom-blog', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// Middleware
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.use('/posts', postRoutes);

app.get('/', (req, res) => {
    res.redirect('/posts');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(Server is running on port ${PORT});
});


Step 4: Create the Post Model

Create a file named Post.js inside the models directory:

javascriptCopy code// models/Post.js
const mongoose = require('mongoose');

const postSchema = new mongoose.Schema({
    title: { type: String, required: true },
    content: { type: String, required: true },
    createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Post', postSchema);


Step 5: Set Up Routes for Posts

Create a file named posts.js inside the routes directory:

javascriptCopy code// routes/posts.js
const express = require('express');
const Post = require('../models/Post');
const router = express.Router();

// Get all posts
router.get('/', async (req, res) => {
    const posts = await Post.find();
    res.render('index', { posts });
});

// Create a new 

1. Initialize your project:

mkdir custom-blog cd custom-blog npm init -y

1. Install necessary packages:

npm install express mongoose body-parser ejs

Step 2: Create Basic Folder Structure

plaintextCopy codecustom-blog/
│
├── models/
│   └── Post.js
├── routes/
│   └── posts.js
├── views/
│   ├── index.ejs
│   └── post.ejs
├── public/
│   └── styles.css
├── app.js
└── package.json

Step 3: Set Up the MongoDB Connection

Create a new file named app.js and set up the Express app with MongoDB:

javascriptCopy code// app.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const postRoutes = require('./routes/posts');

const app = express();

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/custom-blog', {
useNewUrlParser: true,
useUnifiedTopology: true
});

// Middleware
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Routes
app.use('/posts', postRoutes);

app.get('/', (req, res) => {
res.redirect('/posts');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(Server is running on port ${PORT});
});

Step 4: Create the Post Model

Create a file named Post.js inside the models directory:

javascriptCopy code// models/Post.js
const mongoose = require('mongoose');

const postSchema = new mongoose.Schema({
title: { type: String, required: true },
content: { type: String, required: true },
createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Post', postSchema);

Step 5: Set Up Routes for Posts

Create a file named posts.js inside the routes directory:

javascriptCopy code// routes/posts.js
const express = require('express');
const Post = require('../models/Post');
const router = express.Router();

// Get all posts
router.get('/', async (req, res) => {
const posts = await Post.find();
res.render('index', { posts });
});

// Create a new post
router.get('/new', (req, res) => {
res.render('post', { post: {} });
});

router.post('/', async (req, res) => {
const { title, content } = req.body;
const post = new Post({ title, content });
await post.save();
res.redirect('/posts');
});

// View a single post
router.get('/:id', async (req, res) => {
const post = await Post.findById(req.params.id);
res.render('post', { post });
});

module.exports = router;

Step 6: Create Views

index.ejs

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Blog&lt;/title&gt;
&lt;link rel="stylesheet" href="/styles.css"&gt;
</head>
<body>
&lt;h1&gt;Blog Posts&lt;/h1&gt;
&lt;a href="/posts/new"&gt;Create New Post&lt;/a&gt;
&lt;ul&gt;
    &lt;% posts.forEach(post =&gt; { %&gt;
        &lt;li&gt;
            &lt;a href="/posts/&lt;%= post._id %&gt;"&gt;&lt;%= post.title %&gt;&lt;/a&gt;
        &lt;/li&gt;
    &lt;% }) %&gt;
&lt;/ul&gt;
</body>
</html>

post.ejs

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;&lt;%= post.title || 'New Post' %&gt;&lt;/title&gt;
</head>
<body>
&lt;h1&gt;&lt;%= post.title || 'Create a New Post' %&gt;&lt;/h1&gt;
&lt;form action="/posts&lt;%= post._id ? '/' + post._id : '' %&gt;" method="POST"&gt;
    &lt;input type="text" name="title" placeholder="Title" value="&lt;%= post.title %&gt;" required&gt;
    &lt;textarea name="content" placeholder="Content" required&gt;&lt;%= post.content %&gt;&lt;/textarea&gt;
    &lt;button type="submit"&gt;Save Post&lt;/button&gt;
&lt;/form&gt;
&lt;a href="/posts"&gt;Back to posts&lt;/a&gt;
</body>
</html>

Step 7: Add Basic Styling

Create a file named styles.css inside the public directory:

cssCopy code/* public/styles.css */
body {
font-family: Arial, sans-serif;
}

h1 {
color: #333;
}

a {
text-decoration: none;
color: blue;
}

ul {
list-style: none;
padding: 0;
}

li {
margin: 10px 0;
}

Step 8: Run Your Application

1. Start your MongoDB server (if you’re using a local instance):bashCopy codemongod
2. Run your Express app:bashCopy codenode app.js