Deploying a Website Made Simple

4 min readDec 7, 2021

crane building a wall on a computer screen

What happens when you’ve put a lot of hard work and effort into making a website and you’ve got to the point where you want to publish it online and show it off as part of your portfolio? It can be quite overwhelming with lots of different options out there, this post will take you through a simple deployment process using Netlify and introduce you to some features you might find useful.

I’ve chosen Netlify because it’s quick and easy to get up and running with and it integrates easily with any existing repositories you may have. It also has the benefit of having a generous free tier, and has some extra handy extras such as deploy previews and notifications that we’ll be exploring later.

Set Up

The initial set up is simple and well documented here. You have the option to either import an existing site or start with a template. I will use an example of importing an existing codebase from GitHub that has been made with create react app.

Quick guide: You can connect to any existing code bases in Github, GitLab or Bitbucket. Pick which branch you want to deploy from usually main or trunk and specify your build directory and build command (this is npm run build with create-react-app and the build directory is build) and watch Netlify do the work for you. Once the build has successfully deployed for the first time you’ll be shown your netlify.app url where you should now be able to see your site published.

Netlify UI with the url information for your deployment

Deploy Previews

The deploy previews feature creates a deployment on every pull request that is opened against your production branch. This is the branch you specified that Netlify should create the production build from in the set up process, in our case this is main. These are enabled by default and you will find a comment added to any PR you create.

The urls follow the pattern of :

https://deploy-preview-<PR Number>--<Netlify App Name>.netlify.app

They are useful for you and others working on the project to check any new changes you’ve made before deploying them.

Deploy Notifications

There are many different ways you can be notified of the different stages of deployment. If you navigate to:

Site overview > Site settings > Build & deploy > Deploy notifications

You’ll be able to see a lot of deploy notifications are already configured. This is how the comments and status updates get added to your PR’s for deploy previews for example.

Although many have been configured for you, you can see there is a lot of choice. If you have the Pro version then you can notify slack channels for failed deployments for instance which is useful in a CI/CD environment.

Environment Variables

You are more than likely going to need some environment variables when deploying your app. This can include infrastructure your app talks to such as an API endpoint. Your react app usually references these public variables through a .env file and prefixes them with REACT_APP_ . These can be added directly into the Netlify console one at a time but a more useful way is to use the netlify.toml file to store all of these in one place and use the concept of infrastructure as code. Anyone who is forking your repo for example will not have to replicate the environment variables themselves and will have them readily available.

netlify.toml

[build]
  command = "npm run build"
  publish = "build/"# Production deploy settings.
[context.production.environment]
REACT_APP_ENV="production"
REACT_APP_API="production-url"# Netlify deploy preview settings.
[context.deploy-preview.environment]
REACT_APP_ENV="stage"
REACT_APP_API="staging-url"

This shows a simple version of the file, it instructs Netlify with the build command and the folder with which to publish it in. It is also able to use different environment variables depending on the context. This could be useful if you had different environments for staging and production and wanted your deploy previews to use a stage version of the API for example.

One final thing to add if you are deploying a single page app with client side routing is to configure redirects and rewrites so these routes work in the deployed site.

# Configure redirects and rewrites. We rewrite all requests to the root to allow
# the single page app kick in on the client and perform any necessary routing there.
[[redirects]]
  from = "/*"
  to = "/"
  status = 200

Here is an example of the boilerplate create-react-app a basic netlify.toml

Status Badge

One last thing to mention, if you’d like you can add the deployment status badge to your README.md which is a nice visual representation of the sites deployment status.

If you want to look at a working example I’ve created an example boiler plate repo as a helpful guide.