Deploying a Website

Resources for deploying your project to the world wide web.

We’ve moved it all online as of March (2020).

After completing a project intended for user interaction on the internet, how does one go about deploying it to the actual web? Once both the backend and front end of your application (routes, user interface and all those fun aspects of your project) are complete you’ll need to adhere this project to a domain — host it somewhere. Luckily, in 2021 we live in the bright and shiny digital era and there are a multitude of easily accessible (and free!) resources for deploying a project to the internet.

GitHub Pages

GitHub Pages is a resource by GitHub for hosting projects on the web using a GitHub repository. They have a simple, helpful walkthrough here. Each GitHub account can host one site.

  1. Create a repository — which, chances are, you’ve already done in order to store any changes from your local device and text editor on Github (and collect those sweet sweet green Chiclets!).

2. Clone the repository — store your project in a file and clone the repo.

3. Add an index.html file index.html is a conventional default page. Essentially, the file indicating the homepage of the website when a user tries to access the website. Read more on that here.

4. Push all changes — add, commit, and push all changes from your terminal or text editor to the repository. Business as usual.

5. Visit your site — GitHub uses the following convention for hosted sites: https://username.github.io.

Heroku

Heroku is a cloud-based platform (one of the first) founded in 2007 that allows developers to manipulate and run their websites directly in the cloud. Heroku is compatible with most languages — it manages to make interacting with these different languages very similar in terms of building and scaling.

  1. Sign up with Heroku — obviously.
  2. Create your React App — after using the “create-react-app” terminal command, you’ll need to specify the node and npm versions by using “npm -v” and “node -v”
  3. Create a Heroku Repository in GitHub — read an extensive guide on how to do so here.

*You can also sync your GitHub account from your Heroku account which is a little easier to navigate!

Netlify

Netlify is another cloud-based platform and computing company founded in 2014 that specializes in “serverless backends” and is particularly useful for hosting static websites. For my purposes, Netlify was the most obvious choice.

  1. Signup with Netlify and add a new site — use the “New Site From Git” button.

2. Sync Netlify with your GitHub account

3. Give Netlify Access to the necessary repository

3. Specify the branch of the repository so that any changes made to the repo will reflect on the deployed site.

4. Revel in your live website!

There are further options to make custom domains that are further covered in this Netlify guide.

--

--

--

Full stack developer and stand-up comic.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The First Bite on etcd Code

Nil versus empty slices

How is a website rendered from a networking perspective?!

Event Streaming and The Problem with Up-Scaling Partition Counts

What is the Waterfall Methodology A Full Guide

MAJOR BENEFITS OF SALESFORCE ANYWHERE APP

Top Websites And Blogs to Learn Python For Free

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Hall

Sam Hall

Full stack developer and stand-up comic.

More from Medium

Chrome Extension For Web Developers

Youtube Subscriber Count in ReactJs

BlogNet — a web application

The Future of Web Development: Trends For 2022 And Beyond