How to Make Your Own Node.Js Engine Based Blog.
Tags: node, blog, beginners
Published: 2021-07-03 02:15:56

## 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');
});
```

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>
```

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>
```

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"]
}
```

Final directory structure:
![Final direcory stuctures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6xxstx6c8hwmvbovpsb.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs3q1myxmsvbsomykzy6.png)

![Blog post page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdlty5z5027vvfjttxvm.png)

Yay, We have built our simple blog!