NodeJs

Building a Blog with Node.js and Express

Posted on by thuan

Blogs have become an essential part of the internet. They allow people to share their thoughts, experiences, and ideas with a global audience. In this article, we will show you how to build a blog with Node.js and Express.

Setting up the Project

The first step in building a blog with Node.js and Express is to set up the project. Follow the steps below:

  1. Create a new directory for your project and navigate to it using the terminal.
  2. Run npm init to create a package.json file for your project.
  3. Install Express by running npm install express.
  4. Create a new file called index.js and require Express in it.
javascript
const express = require('express');
const app = express();

Creating the Views

The next step is to create the views for your blog. Views are the templates that your blog will use to display content. Create a new directory called views and add the following files:

  1. home.ejs – This file will display the home page of your blog.
  2. post.ejs – This file will display individual blog posts.
  3. new.ejs – This file will display a form for creating new blog posts.

You can use EJS (Embedded JavaScript) as the templating engine for your blog. EJS allows you to embed JavaScript code in HTML templates. Here’s an example of what your home.ejs file could look like:

html
<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <h1>Welcome to My Blog</h1>
    <% posts.forEach(function(post) { %>
    <div>
      <h2><%= post.title %></h2>
      <p><%= post.content %></p>
      <a href="/posts/<%= post.id %>">Read More</a>
    </div>
    <% }) %>
    <a href="/posts/new">New Post</a>
  </body>
</html>

Creating the Routes

Now that we have our views set up, we need to create the routes for our blog. The routes define the URLs that users can visit to see different parts of the blog. Create a new file called routes.js and add the following code:

javascript
const express = require('express');
const router = express.Router();
const Post = require('./models/post');

// Home page route
router.get('/', async (req, res) => {
  const posts = await Post.find({});
  res.render('home', { posts });
});

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

// New post route
router.get('/posts/new', (req, res) => {
  res.render('new');
});

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

module.exports = router;

In this code, we define four routes:

  1. The home page route, which displays a list of all the blog posts.
  2. The post page route, which displays an individual blog post.
  3. The new post route, which displays a form for creating a new blog post.
  4. The create post route, which saves a new blog post to the database and redirects to the home page.

Creating the Model

We also need to create a model for our blog posts.

In a new file called models/post.js, add the following code to define the Post model:

javascript
const mongoose = require('mongoose');

const postSchema = new mongoose.Schema({
  title: String,
  content: String,
});

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

This code defines a schema for our blog posts that includes a title and content field.

Connecting to the Database

To save and retrieve blog posts, we need to connect to a MongoDB database. Install the mongoose package by running npm install mongoose.

Then, add the following code to your index.js file to connect to the database:

javascript
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my-blog', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

This code connects to a local MongoDB instance running on the default port and creates a new database called my-blog.

Running the Application

Finally, start the server by adding the following code to your index.js file:

javascript
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Now, run node index.js to start the server. You can visit http://localhost:3000 in your browser to see your blog.

Conclusion

In this article, we showed you how to build a blog with Node.js and Express. We covered setting up the project, creating the views, defining the routes, creating the model, connecting to the database, and running the application. With this foundation, you can continue to add features to your blog, such as user authentication and commenting systems.

0368826868