Create a Basic Blog using Node.js and Express.

Step 1: Set Up Your Project

Create a new project folder:
```
 mkdir basic-blog
 cd basic-blog
```
Initialize a new Node.js project:
```
 npm init -y
```
Install necessary dependencies:
```
 npm install express body-parser ejs
```

Step 2: Create Your Folder Structure

Create the following folder structure:

basic-blog/
|-- views/
|   |-- index.ejs
|   |-- new.ejs
|   |-- edit.ejs
|-- public/
|   |-- styles/
|       |-- main.css
|-- src/
|   |-- routes/
|       |-- index.js
|   |-- app.js
|-- server.js

Step 3: Set Up Express Server

In app.js, set up a basic Express server and middleware:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

// Set up EJS as the view engine
app.set('view engine', 'ejs');

// Set up routes
const indexRoutes = require('./routes/index');
app.use('/', indexRoutes);

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Step 4: Create Routes

In routes/index.js, set up the basic routes for your blog:

const express = require('express');
const router = express.Router();

// Sample data (replace this with your actual data storage)
let blogPosts = [
  { id: 1, title: 'First Blog Post', content: 'This is the content of the first blog post.' },
  // Add more blog posts as needed
];

// Display all blog posts
router.get('/', (req, res) => {
  res.render('index', { blogPosts });
});

// Display form to add a new blog post
router.get('/new', (req, res) => {
  res.render('new');
});

// Create a new blog post
router.post('/new', (req, res) => {
  const { title, content } = req.body;
  const newPost = { id: blogPosts.length + 1, title, content };
  blogPosts.push(newPost);
  res.redirect('/');
});

// Display form to edit a blog post
router.get('/edit/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const post = blogPosts.find(post => post.id === id);
  res.render('edit', { post });
});

// Update a blog post
router.post('/edit/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const { title, content } = req.body;
  const postIndex = blogPosts.findIndex(post => post.id === id);
  blogPosts[postIndex] = { id, title, content };
  res.redirect('/');
});

// Delete a blog post
router.post('/delete/:id', (req, res) => {
  const id = parseInt(req.params.id);
  blogPosts = blogPosts.filter(post => post.id !== id);
  res.redirect('/');
});

module.exports = router;

Step 5: Create Views

In views/index.ejs, create the template for displaying all blog posts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title>Basic Blog</title>
</head>
<body>
  <h1>Basic Blog</h1>
  <ul>
    <% blogPosts.forEach(post => { %>
      <li>
        <h2><%= post.title %></h2>
        <p><%= post.content %></p>
        <a href="/edit/<%= post.id %>">Edit</a>
        <form method="post" action="/delete/<%= post.id %>">
          <button type="submit">Delete</button>
        </form>
      </li>
    <% }); %>
  </ul>
  <a href="/new">Add New Post</a>
</body>
</html>

In views/new.ejs, create the template for adding a new blog post:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title>New Blog Post</title>
</head>
<body>
  <h1>New Blog Post</h1>
  <form method="post" action="/new">
    <label for="title">Title:</label>
    <input type="text" id="title" name="title" required>
    <label for="content">Content:</label>
    <textarea id="content" name="content" required></textarea>
    <button type="submit">Add Post</button>
  </form>
</body>
</html>

In views/edit.ejs, create the template for editing a blog post:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles/main.css">
  <title>Edit Blog Post</title>
</head>
<body>
  <h1>Edit Blog Post</h1>
  <form method="post" action="/edit/<%= post.id %>">
    <label for="title">Title:</label>
    <input type="text" id="title" name="title" value="<%= post.title %>" required>
    <label for="content">Content:</label>
    <textarea id="content" name="content" required><%= post.content %></textarea>
    <button type="submit">Update Post</button>
  </form>
</body>
</html>

Step 6: Create CSS Styles

In public/styles/main.css, add your styles:

body {
  font-family: 'Arial', sans-serif;
  margin: 20px;
}

h1 {
  color: #333;
}

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

li {
  border: 1px solid #ddd;
  margin: 10px 0;
  padding: 10px;
}

a {
  text-decoration: none;
  color: #007BFF;
  margin-right: 10px;
}

button {
  background-color: #dc3545;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

Step 7: Run Your Application

Start the Express server:

node app.js

Visit http://localhost:3000 in your browse.