Step 1: Set Up the Project
Blog Platform with Custom CMS
Step 1: Set Up the Project
- Initialize your project:
mkdir custom-blog cd custom-blog npm init -y
- 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
- Initialize your project:
mkdir custom-blog cd custom-blog npm init -y
- 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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>Blog Posts</h1>
<a href="/posts/new">Create New Post</a>
<ul>
<% posts.forEach(post => { %>
<li>
<a href="/posts/<%= post._id %>"><%= post.title %></a>
</li>
<% }) %>
</ul>
</body>
</html>
post.ejs
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= post.title || 'New Post' %></title>
</head>
<body>
<h1><%= post.title || 'Create a New Post' %></h1>
<form action="/posts<%= post._id ? '/' + post._id : '' %>" method="POST">
<input type="text" name="title" placeholder="Title" value="<%= post.title %>" required>
<textarea name="content" placeholder="Content" required><%= post.content %></textarea>
<button type="submit">Save Post</button>
</form>
<a href="/posts">Back to posts</a>
</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
- Start your MongoDB server (if you’re using a local instance):bashCopy code
mongod
- Run your Express app:bashCopy code
node app.js