// How to deploy your front end website.
Tags: tutorial, codenewbie, beginners
Published: 2020-02-20 19:38:39

---
title: // How to deploy your front end website.
published: true
description: A quick how to deploy sites.
tags: tutorial, codenewbie, beginners
cover_image: https://images.unsplash.com/photo-1559715541-5daf8a0296d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=892&q=80
---

<!--{% soundcloud https://soundcloud.com/drdomeaxxe/super-mario-64-water-theme %}-->

Hey folks, today we are going to talk about how to deploy that front-end project that you have been working on. As newbies we often think "How can I make my work accessible to the world?". Don't be discouraged it's simpler than you may think! 

So, I've found some options for our dilemma which are the following:

- [surge.sh](https://surge.sh/) 🍄 + 🦵
- [github-pages](https://pages.github.com/) 😸 + 🐙
- [netlify.com](https://www.netlify.com/) ⚡️


![options](https://media.giphy.com/media/giEftvZuPAiZQBphEI/giphy.gif)
<figcaption>Our boy Heroku is not an option here...💨</figcaption>

## Deploying with Surge

Surge is a simple, single-command web publishing CLI library. It can publish HTML, CSS, and JS for **free**, without leaving the command line. Everything becomes so simple that you are actually a few key strokes away from deploying your website or web app with the help of [`node.js`](https://nodejs.org/en/).

Steps:

1. Ensure that you have the latest version of node.js installed.

2. Install Surge: 
       `npm install --global surge` or `npm install -g surge`

3. Go to your project root folder, run `surge` and fill the project path and domain field (*optional*). 

![deployit](https://surge.sh/images/help/getting-started-with-surge.gif)
<figcaption>Note: Surge by default provides a domain for your project.</figcaption>

One more thing, while deploying your site with `surge` you will be asked for an email and password, type an email / password of your choice (*easy to remember*). This is the default domain that surge generated for me http://like-clouds.surge.sh/ .

### Deploy with a custom domain

> **WARNING:** This may require some extra steps in terms of configuring your DNS but for more details please refer to the official guide from Surge [here](https://medium.com/surge-sh/make-something-of-your-ridiculous-domains-bb26fadeb93c).

                              
Or click here: 
{% medium https://medium.com/surge-sh/make-something-of-your-ridiculous-domains-bb26fadeb93c %}

After the necessary setup, Surge will allow you to deploy your site with a custom domain by using the following command:

> `$ surge ./ *customdomainname.com*`

A quick breakdown of the command + optional args used: `$` prompt, `./` root of your project path, and `*customdomainname.com*` your custom domain name.

<hr>

## Deploying with Github pages

Many may argue with me, but github pages is the way to go for deploying static sites. Why? If you already have a github account, a static site and your git terminal set up, then you are a few steps away from having your site deployed. 

Steps:

A. Already have your own [Github](https://github.com/) account and create a new github repo with the name: `username.github.io`.

![creatnew](https://i.imgur.com/2MWwXat.png)

B. Jump to your git terminal client (*recommended*) and clone your new repo to a local directory. 

![gitclone](https://i.imgur.com/Oq1DvCt.png)

C. Enter the project folder and add an index.html file:

![cdThenEchoCreate](https://i.imgur.com/FIb1CEe.png)

D. Push everything up to Github:

![Pushit](https://i.imgur.com/JksAJN3.png)

E. …and you're done, fire up your browser and visit your site at `https://username.github.io` 

<hr>

## Deploying with Netlify

For last, we have Netlify a web hosting infrastructure and automation technology. why [Netlify](https://www.netlify.com/github-pages-vs-netlify/) instead GithubPages or even Surge.sh? Netlify provides you with basic features such as website deploy preview, site state rollbacks and other management tools for free.

Steps:

- Sign up to Netlify and add a new site (*project*).

![addNewProject](https://cdn.netlify.com/ef2fd8809717bbf8c7a16ac2862c19bb12f717b5/ef6e8/img/blog/add-new-project.png)

Right after, logging in you'll be prompted with the **Add A New Project** button shown above. 

- Link your Github account

![linkScreen](https://cdn.netlify.com/6ce8bf46dcc8bfc6d6ef982c7870eb86e32d2b8c/89152/img/blog/step-2-hugo.png)

Make sure your static website or SPA has been pushed to Github, so we'll connect netlify with github. Just click the button with the familiar octo cat icon.

- Authorize Netlify

![Authorize](https://cloud.githubusercontent.com/assets/6520639/9803635/71760370-57d9-11e5-8bdb-850aa176a22c.png)

Allow Netlify and GitHub to talk to each other by clicking the Authorize Application button.

- Select Your Repo

![selectingRepo](https://cloud.githubusercontent.com/assets/6520639/9897552/b9ea7f7c-5bfe-11e5-94a0-f957a7d1986e.png)

After connecting Github and Netlify, choose the repo with your static or SPA files.

- Configure Your Settings

![configB4Deploy](https://cdn.netlify.com/80976208deb6958b0fd438cb961a63d95a259f07/c1ae2/img/blog/config-your-repo.png)

If necessary you can configure your options on this step. If your site is static and is not using any preprocessors or compiling software then just set the directory to / or just `leave the build command blank`. Now click the **Build your site button** to _continue_.

- Build Your Site and Visit your site

![compiling](https://cdn.netlify.com/8f58588b14e3136d2885c3df9875b1b5b8e72f51/0a39b/img/blog/building-site.png)

Sit and chill, while netlify is taking care of everything.


### References:

These are the resources I've used for this post:

- [surge.sh](https://surge.sh/) | [YT-DeployWithSurge](https://www.youtube.com/watch?v=-EjdMvYPSVU&feature=emb_title)
- [github-pages](https://pages.github.com/) | [YT-GithubPages?](https://www.youtube.com/watch?time_continue=81&v=2MsN8gpT6jY&feature=emb_title)
- [netlify.com - Deploy guide](https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/) | [YT-NetlifyInSecs](https://www.youtube.com/watch?v=mN9oI98As_4)

### Recap:

- Surge, is ease the installation and launching process, while hosting your static site locally. It generates a random domain name for your project by default.

- Github pages allows us to host our static site on their platform but domain names have the following format `projectname.github.io`. 

- Netlify does also allow you to host static sites on their platform and offer a lots of perks in regards managing your project but it whats made for more complex and robust web apps in mind.


### Anything else?

Did I miss something? Need to clarify or discuss? Please let me know in the comments!


![deep thinking](https://media.giphy.com/media/26xBNV7I1IvN0PHX2/giphy.gif)

<figcaption> It feels like I missed something ...</figcaption>