Free Course

Build A Coding Blog From Scratch

A complete step-by-step guide to building and deploying a coding blog with a custom CMS using Next.js, React, and NodeJS.

You must login or signup to view free course content.
Course Details
Course Price
Free
Estimated Time
20 hrs
Skill Level
Intermediate

This course will provide you with a step-by-step guide on how to build a coding blog from scratch.

First, you'll build a website that displays both your blog posts content and information about your career or the projects you're currently working on.

Then, you'll also build an admin control panel application that is password protected and includes features like uploading images to be hosted and creating/editing your blog posts using a custom CMS. The course will also include instructions for getting your website indexed in search engines (Google, Bing, DuckDuckGo, etc.) and configuring Google Analytics for tracking your website's traffic.

This will provide the double-whammy of both creating a coding blog where you can share ideas and build your personal brand, along with learning how to build and deploy a full-stack application.

The main coding languages used in this course are HTML, CSS, React, JavaScript, and NodeJS. And the Next.js and Express frameworks will be used to build the applications.

Also, we'll use a cloud server to host your application on using the DigitalOcean service. Through the deployment process, we'll use PM2, Nginx, Let's Encrypt, and Certbot.

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 both React and NodeJS will also be helpful, as they will be used throughout the entirety of this course. It would also make sense to have a general understanding of REST APIs and how they work.

Included In Course
  • Instant course access
  • Lifetime access to all content/code updates
  • Full source code download
  • Self-paced learning
Table of Contents
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 NodeJS 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 NodeJS and Express 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 all blog posts page to pull in blog post data from the database.
  • Update the list 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 NodeJS 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
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 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 NodeJS 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
    Show More
    Course Author
    Frequently Asked 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: https://coderrocketfuel.com/courses/build-a-coding-blog/content.

    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 courses. You'll need to purchase the paid courses to get access to their materials.

    Are there any restrictions on the course material?

    No. I trust you to do the right thing. My content is 100% DRM free.

    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 both React and NodeJS will also be helpful, as they will be used throughout the entirety of this 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 and is 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.

    Show More