DEV Community

loading...
Cover image for How to Make Your Own Node.Js Engine Based Blog.

How to Make Your Own Node.Js Engine Based Blog.

manushifva
Nah, i have nothing to write here.
・3 min read

Blog? What is it?

A blog (a truncation of "weblog") is a discussion or informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries (posts). Posts are typically displayed in reverse chronological order, so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single individual, occasionally of a small group, and often covered a single subject or topic. In the 2010s, "multi-author blogs" (MABs) emerged, featuring the writing of multiple authors and sometimes professionally edited. MABs from newspapers, other media outlets, universities, think tanks, advocacy groups, and similar institutions account for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into the news media. Blog can also be used as a verb, meaning to maintain or add content to a blog.

Ah, something like Blogger and Wordpress?

Yup, Blogger and Wordpress is two of many services in internet that can give you free static blog hosting.

Why you don't use them?

On the average, free static blog hosting only serve static html file, their service is also difficult to customize.

So, what techology you use for make your blog?

Node.js, Express, and Some file based database engine. Why? Because it's simple and easy for beginner.

Start coding.

Of course, before we start, we need to install some module for our project.

At first, lets install express:

npm i express

Now, install ejs for the view-engine:

npm i ejs

Next, lets install the database engine:

npm i simple-json-db

After install all module that we need, Let's start our project!

Make a file with name blog.js, and add this content:

// Declare express
const express = require('express');

// Declare database and requitment
const JSONdb = require('simple-json-db');
const db = new JSONdb('database.json');

// Declare port
const app = express();
const port = 4040;

// Set view engine
app.set('view engine', 'ejs');

// Set main page
app.get('/', (req, res) => {
    app.locals.title = db.get('title');
    app.locals.postUrl = db.get('posturl');

    res.render('index');
})

// Set blog page
app.get('/post/:posturl', (req, res) => {
    postUrl = req.params.posturl;
    dbIndex = db.get('posturl').indexOf(postUrl);

    if (dbIndex != -1) {
        app.locals.title = db.get('title')[dbIndex];
        app.locals.content = db.get('content')[dbIndex];

        res.render('post');
    } else {
        res.send('Page not found :(')
    }
});

// Run app
app.listen(port, () => {
    console.log('App is live');
});
Enter fullscreen mode Exit fullscreen mode

After that, let's make the content for our page. Make a directory named views, and create the file named index.ejs and fill with this code:

<html>
    <head>
        <title>Index Page</title>
    </head>

    <body>
        <h1>Welcome to my blog!</h1>

        <p>Content: </p>
        <% if (title.length != 0) { %>
            <% for (x = 0; x <= title.length - 1; x++) {%>
                <a href = "/post/<%= postUrl[x] %>"><%= title[x] %></a>
            <% } %>
        <% } else { %>
            <p>Nothing here</p>
        <% } %>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

After that, let's build the blog-post page, with the file named blog.ejs. Fill with this code:

<html>
    <head>
        <title><%= title %></title>
    </head>

    <body>
        <a href = "/">Back to home</a>
        <h1><%= title %></h1>

        <p><%= content %></p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Last, we need a file named database.json for our database. Fill the database.json with this content:

{
    "title": ["Hello world"],
    "posturl": ["test"],
    "content": ["My first blog post"]
}
Enter fullscreen mode Exit fullscreen mode

Final directory structure:
Final direcory stuctures

Run this blog using this command:

node blog.js

Wait until it's log

App is live

Then, open your browser and type: http://localhost:4040

Here is the preview:
Index page

Blog post page

Yay, We have built our simple blog!

Discussion (0)