
# Why?

I built this blog with the purpose of sharing my ideas and teaching people!

# Mistakes:

When I had the idea of making a blog, a database first came to mind. I wanted to use a Firestore database, as it is a document database; I thought it would be perfect to store my blog posts in a collection, get each document based on what the user selects, and set the document’s html to whatever blog post the user selects.

![An example of what the database would look like](/1/1.png)

But, not only is setting innerHTML a poor practice, it was a problem for a few more reasons.

## Editing is hard

If I wanted to edit a few words or make a new post, I would have to go back to the database and edit or create a new document. Writing html for blog posts would also make code blocks with syntax highlighting hard to do, and would make writing blog posts hard and annoying to do.

## Page loads are slow

If a user wanted to request a blog post before the page loads, the server would have to make a request to the database, convert the data to an object, get the information from the object, and return the object to the client. All of this, especially the request, would take about 5 to 8 seconds to do, which is too long for a page load.

# The solution:

Markdown to the rescue! Markdown provides all the features that I need: multi-line support, code blocks, and images. These were provided in an easy-to-use syntax, which is perfect for writing! With an idea of how to create this blog, I set out to create a new project.

# How?

## Storing blog posts

Fortunately, these are tools to parse markdown into HTML. I started by creating a folder called "posts"”", in which I would put markdown files named by the id.

![An example of what the folder looks like](/1/2.png)

Each markdown file contains a title, a date, and a description. Under these tags is the article.

![An example of what the markdown file looks like](/1/3.png)

## Getting the selected blog post

Using NextJS dynamic routes, I created a file named /post/[id].js. When the page loaded, I wanted to get the id of the URL, read the file, convert the markdown to HTML, then show the HTML to the user.

First, I imported the file system and created a getServerSideProps function to run on the server whenever the user requests a page load.

```js
import fs from "fs"
export async function getServerSideProps(context) {
	//This function runs on the server on page request
}
```

Then, I got the current selected id using `context.query.id`, and put it in a const. Then, I used `fs.readFileSync` to read the selected file based on the selected id, and returned a stringified version of the data.

```js
import fs from "fs"
export async function getServerSideProps(context) {
	//This function runs on the server on page request
	const id = context.query.id
	const data = matter(fs.readFileSync(`posts/${id.toString()}.md`)) // Get the selected post and convert the markdown to html
	return {
		props: {
			data: JSON.stringify(data),
		},
	}
}
```

I used a try-catch statement to check if the requested file is available. If it is not, it returns nothing. Then, it was just a matter of styling.

## Getting all blog posts

[Using a stackoverflow post](https://stackoverflow.com/questions/10049557/reading-all-files-in-a-directory-store-them-in-objects-and-send-the-object), I added a function that reads and returns every file in a directory. With this function, I was able to get the most recent blog posts and return them.

```js
const posts = []

const filllist = new Promise(function (myResolve, myReject) {
	readFiles(
		"posts/",
		function (filename, content) {
			posts.push({ id: filename.split(".")[0], content: matter(content) })
		},
		function (err) {
			throw err
			myReject(false)
		}
	).then(() => {
		myResolve(true)
	})
})

await filllist

return {
	props: {
		posts: JSON.stringify(posts),
	},
}
```

After this, it was just a matter of parsing the returned props on the frontend using React


Explaning how I built the backend of my portfolo and blog with NextJS.

Reallukeisbest

I'm Luke!

I make websites, programs, and other tools!

Programming languages

Technologies

Projects

Nihon dashboard

WriteHtml

Recipe Finder

Recent blog posts

How I built this blog with NextJS - backend

View all blog posts