Build A Coding Blog From Scratch

A complete step-by-step guide to building and deploying a coding blog with a custom CMS using React.js, Node.js, MongoDB, & friends.

Technologies Used In The Course

What Will You Build?

Together we'll build a coding blog from scratch. First, we'll build a website that displays your blog posts and personal information. Then, we'll build an admin control panel that is password protected and includes features like uploading images to be hosted and creating/editing your blog posts using a custom CMS.

View Demo

Build With The MERN Stack

Create a full-stack application using a MongoDB database, Express.js REST API, React.js website, and Node.js web server. MERN is one of the most widely used stacks by today's developers.

Display Blog Posts

A frontend website where visitors will view your blog posts and other content. Blog posts will contain syntax highlighting for any code snippets. These blog posts will be stored in a MongoDB database.

Create & Edit Blog Posts

An admin control panel website where you can create, edit, & delete blog posts stored in the database. This will include a REST API for fulfilling requests made from the admin website application.

Password Protected Admin CMS

A password-protected admin control panel website where you can create/edit blog posts, upload/edit/delete hosted images, update your website's sitemap.xml file, and more.

Host Your Own Images

A directory on the server we deploy your application to that stores and serves images. Using the admin control panel, you'll upload a new image, edit an image's filename, and delete an image.

Deploy To Production

Deploy the application to a DigitalOcean server in the cloud. We'll configure your custom domain name and serve the application over HTTPS. Search engine indexing and Google Analytics will also be configured.

Who Is This For?

This course is for those who want to learn how to build and deploy full-stack, production-ready applications.

These Kinds Of People

Those Who Want A Coding Blog
A coding blog will help you build your software development career, become a better programmer, and make some side income.
React.js & Node.js Developers
Combine your React.js & Node.js skills with MongoDB to build a full-stack application.
New Developers
Learn as you go! React.js and Node.js are currently some of the best skills to have on a resume.
Students
Build a full-stack application you can put on your portfolio and talk about in job interviews.

With These Skills

Basic Understanding Of HTML, CSS, & JavaScript
You should be comfortable writing HTML, CSS, & JavaScript. Those are used extensively throughout the course.
Basic Knowledge Of React.js
Some basic React.js skills are required before beginning this course. Once you have the basics down, you'll be able to pick up most advanced concepts as we go.
Basic Knowledge Of Node.js
Prior experience with Node.js will also be helpful. Node.js will be used to build the REST API and interact with the MongoDB database.

Get Full Access To The Course

By creating a free account, you'll have lifetime access to the course.

Get Free Access

The Course Is...

sections

7,000

lines of code

15 hrs

to complete

Self-paced — work at your own pace.

Full source code is available for download.

Lifetime access to all content — includes any future updates.

1. Introduction

What benefits do software developers get from having their own blog?
What will you learn in this course?
Links to the demo for each of the applications you'll build.

2. Getting Started

Setup your coding environment with a coding editor and terminal, along with installations of Node.js and NPM.
Get a big picture of the application we'll build and the different components that will be needed.

3. Bootstrap The Frontend Website & Build The Layout & Styling

Bootstrap a new Next.js application.
Create the header and footer layout for your website.
Build the layout and styling for each page on your website.
Add <head> metadata for each page, which includes a title tag and meta description.
Create favicon icons for your website and apply them to each page.

4. Build The Frontend REST API & Create A New MongoDB Database

Bootstrap a new Node.js and Express.js REST API application.
Create and connect to a new MongoDB database hosted using the Atlas cloud service.
Create each REST API route to facilitate the features on your website (get all the blog posts in the database, get one blog post, etc.).
Build the functionality for hosting your own images.

5. Update The Frontend Website To Display Data From The Database

Update the homepage of your website to pull in blog post data from the database.
Update the list of all blog posts page to pull in blog post data from the database.
Update the list of all blog posts by tag page to pull in blog post data from the database.
Update the single blog post content page to get data from the database.

6. Deploy The Frontend Website & REST API Applications

Create and configure a new server using the DigitalOcean cloud service. This will include steps for securing your server using public-key authentication and adding a firewall.
Configure the domain name you want to use for your website by configuring the DNS settings for your DigitalOcean server.
Install the Nginx web server software on the server, which will be used to host all your applications.
Install Node.js and NPM on the server.
Deploy your frontend website application to the server. This will include running the application using PM2, configuring Nginx as a reverse proxy, and configuring SSL/HTTPS encryption.
Deploy your frontend REST API application to the server. This will include running the application using PM2, configuring Nginx as a reverse proxy, and configuring SSL/HTTPS encryption.

7. Get The Frontend Website Indexed On Search Engines

Create a sitemap.xml file for your website and get indexed via the Google Search Console.
Get your website indexed using the Bing Webmaster Dashboard.

8. Configure Google Analytics Tracking For The Frontend Website

Sign up or log into a Google Analytics account and obtain a tracking ID for your website.
Add the tracking code to your website and deploy the code changes to production.

9. Bootstrap The Admin Website & Build The Layout & Styling

Bootstrap a new Next.js application.
Create the header and sidebar layout.
Build the initial layout and styling for each page:
- Login page.
- Homepage.
- Create a new blog post page.
- Edit blog post page.
- List all uploaded images page.
- Edit image page (edit filename or delete image).
- Manage sitemap page.
- Change admin password page.
- 404 and 500 error page.

10. Build The Admin REST API & Implement Each Admin Feature

Bootstrap a new REST API application using Node.js and Express.
Create each admin user feature and implement them on the admin website:
- Create an initial admin user in the MongoDB database.
- Login as the admin user.
- Authenticate an admin user using an authentication bearer token stored in the database and your browser.
- Logout the admin user.
- Clear the authentication cookie data from the browser.
- Change the password for the admin user.
Create each blog posts feature and implement them on the admin website:
- Get all the blog posts currently stored in the database and order them by their published date.
- Create a new blog post and add it to the database.
- Get the data for a single blog post using its unique ID value.
- Edit the data for a blog post stored in the database, including its title, publish data, thumbnail image, content, etc.
- Delete a blog post from the database.
Create each feature for managing your hosted images and implement them on the admin website:
- Get a full list of all the images currently being stored on your server.
- Upload a new image to your DigitalOcean server.
- Get the data for a single image using its filename.
- Change the filename for a given image.
- Delete an image from your DigitalOcean server.
Create each feature for managing your sitemap and implement them on the admin website:
- Update the contents of your website's sitemap.xml file.
- Restart the PM2 process running on your DigitalOcean server so the sitemap.xml file changes are pushed live.
- Send a ping request to Google and Bing letting them know that there are new pages on your website for them to crawl and index.

11. Deploy The Admin Website & REST API Applications

Configure the domain names and URLs you want your admin application to be accessed at.
Deploy the admin website to your DigitalOcean server. This includes running the application using PM2, configuring Nginx as a reverse proxy, and setting up SSL/HTTPS encryption.
Deploy the admin REST API to your DigitalOcean server. This includes running the application using PM2, configuring Nginx as a reverse proxy, and setting up SSL/HTTPS encryption.

12. Conclusion

Meet Nick Major

Nick Major is a full-stack developer from Wisconsin, United States. He is a course creator and independent software developer.

He is also the author of the Build A Hacker News Clone course.

Common Questions

How do I gain access to the course materials?
To view the contents of a free course, you need to be logged into your account. If you don't already have an account, you can signup for free. Then, the full course materials will be visible to you.
Here is a link to the content for this course: Link.
If I signup for an account, what courses do I have access to?
As a logged-in user, you automatically have access to each free course. Premium courses require you to make a purchase before you can view their full contents.
Do I need any special tools or equipment for this course?
To work through the course, all you'll need is a modern web browser and text editor. The course materials come in the form of plain text and images, so you can read them on any device you own.
Do I need any prior knowledge or experience before working through this course?
To follow along with this course, you should be familiar with the basics of web development, i.e. how to use HTML, CSS, and JavaScript.
Prior experience with React.js, Node.js, and MongoDB will also be helpful, as they will be used throughout the course. It would also make sense to have a general understanding of REST APIs and how they work.
Is there a time limit for finishing the course? Do I ever lose access to the course materials?
There is no time limit for finishing the course. All courses are self-paced. Once you have a free account, you'll have lifetime access to all the present and future content and code in the course.
I have another question.
No problem! Send me an email at nick@coderrocketfuel.com.