How to Deploy Static Website for FREE on Render with Custom Domain

Hosting a single page application (SPA) or static website is becoming easier than ever. Gone are those days when we depended on heavy servers or tweaking Cpanel just to ensure the website came out as expected.

We have a lot of web hosting providers where you can host your static website but today, I'll be showing you how to get your site running for free on Render.

What is Render?

Render is a modern cloud-based platform developed to simplify the process of hosting and scaling web applications, microservices, and static websites. It offers a user-friendly interface and automates many of the tedious tasks associated with managing web infrastructure, enabling developers to focus on building and deploying their applications.

You can deploy any kind of web application both frontend and backend on Render.

But in this blog post, we'll be dealing with Frontend.

Prerequisites to deploy a static website on Render.

1. Your website
2. Render account
3. Your domain account (optional)

That's all you need; no credit card is needed 😉

Don’t worry if you don’t have any of these, I will show you how to get them along the way. So, let’s feast!

Step 1: Have your static website prepared

You can create one with HTML, CSS, and JavaScript. Or better still, with React, Vue, Gatsby, or any static site generator.

If you don’t have a static website yet but would like to follow along with this tutorial, you can try any pet project of yours even if it’s just a “hello word” file.

Then push the project to GitHub or any Gitlab.

Step 2: Create a Render.com account

Go to https://dashboard.render.com/register to create a free account. And I recommend you use GitHub or Gitlab to sign up for easy access and authentication.

Check the email address attached to your GitHub or GitLab account to activate your account. Note that the verification token will expire after 24 hours, so ensure you activate your account before then.

Once activated successfully, you will be redirected to login.

Step 3: Create a new project

On your render dashboard, click “New” at the Nav bar, to get started.

If you click on that button, you will see a dropdown listing different services you can use, the first one is “Static Site”, so go click it.

The next screen should show your connected Github or Gitlab recent repositories. If you haven’t connected to any Git provider, you can still do it here.

Once your Git provider account is connected successfully, you should see the project you want to deploy now. If you’re trying to deploy an old project but you’re not seeing it in the repo overview, search for it.

Once you found the project you’re looking for, click the “Connect” button to deploy.

Step 4: Configure your project

This step is very important, and you need to pay attention to it.

There are 5 input fields here. The first one asks for a name, use any name of your choice but no space, use a hyphen instead.

This name will later become your live URL. For instance, if you choose something like “my-pet-website”, you will be your live URL as https://my-pet-website.onrender.com.

So be careful when choosing a name.

For the rest as highlighted in the image below:

• Branch: is where you are deploying from if you have multiple branches on that repo, but if you only have one or don’t want to change the one automatically selected, you can move on.

• Root Directory: Feel free to skip this
  Build Command: Render will get this for you automatically, but ensure it corresponds with what you’re using in your project.

• Publish Directory: It is either “build” or “dist” or “out”. o check your project to know exactly when one it’s using (you have to build your project locally to know this, maybe with yarn build or npm build)

Once all fields are correctly filled, click “Create static site”.

It will then start deploying your website, wait until it’s done.

Step 5: Verify your deployment

If you are facing any error such as a blank page or build error, go back to step 4 by clicking on “Settings” at the left sidebar to correct your Publish directory and Build command.

If everything is done correctly, congratulations, your website is successfully deployed on Render!

Right now, you have a random subdomain for your live website, if you have a domain name that you would like to connect, you can do that for free!

How to Connect Custom Domain Name to Render

1. On your Render account, click “Settings” and scroll down. Enter your custom domain name and click “Save”

1. Grab your CNAME and ALIAS to add to your domain name

1. In a new tab, head over to your Domain name provider and add these records to your domain name.

In my case, I’m using Namecheap.

Login to your hosting dashboard, find the domain name you are adding to Render and put the records there. For Namecheap, here is how:

If the records are added correctly, go back to verify that the records are added.

Once verified, you will see a verified status. You might need to want a little bit.

Everything is almost working perfectly but there may be one issue; if you refresh your page, it may throw a blank page. It’s not a big deal, let’s fix that.

FIX: How to fix Render Redirect Issue

On your Render dashboard, click “Redirect and Rewrite Rules” at the sidebar. There are 3 fields and fill accordingly:

Source: /*
Destination: /index.html
Action: Rewrite

And finally save.

Conclusion: Deploying Static Site on Render is Easy

Render is an incredible hosting platform where you can host any type of application. In case you’re stuck in the process, you can always check their documentation.

If you have any questions, kindly use the comment box and I’ll be glad to help.