Static Site Hosting 101
Tags: codenewbie, nuxt, firebase, netlify
Published: 2020-01-25 17:07:38

---
title: Static Site Hosting 101
published: true
description: Host your static site
tags: #codenewbie #nuxt #firebase #netlify
---

Static sites have been a buzzword lately. The goal of this article is to show general hosting process so you can host it at any major services.

If you search "How to host X (static site generator) to Y (static site host) you'll find a lot of resources. My goal is not to show how to deploy Nuxt app into Firebase and Netlify (although you'll learn how here), but  *how to deploy any static site anywhere*. 

Understand the concept, flexible on details.

I will be using [Nuxt](https://nuxtjs.org/) as my static site generator. I will show how to deploy it to [Netlify](https://www.netlify.com/) and [Firebase](https://firebase.google.com/). *However*, even if you are using a different static site generator (like Gatsby), or even plain HTML/CSS/JS, I would recommend you to read along because you can still learn from it.

We will cover:

- Differences between static and dynamic site. 
- Preparing Nuxt.
- Hosting to Firebase.
- Hosting to Netlify.
- Bonus: list of static site hosts.

# Static vs dynamic site?

Before starting, let's clarify what static and dynamic sites mean.

A static site:

1. Usually consists of HTML/CSS/JS. 
2. At bare minimum, you can have only HTML.
3. If you can open your HTML file on browser, it is probably static.
4. You probably don't need to run a server to serve you site.

A dynamic site is usually served by server-side language (Express x NodeJS, Ruby x Rails, Python x Django, etc).

More can be said about static vs dynamic, but it is outside the scope of this article. If you're interested, this [video](https://www.youtube.com/watch?v=_wFJj94kSTU) does a good job explaining.


# Setting up Nuxt

I will quickly show how to get started with Nuxt. If you use a different generator, feel free to skip ahead to "Hosting to Firebase" section.

```
npx create-nuxt-app my-static-site
// here I selected Npm package manager, lots of nones/ default options for demo

cd my-static-site
npm run dev // you'll see it running like expected
```

![Project with no dist directory](https://thepracticaldev.s3.amazonaws.com/i/asrs16vdbzc0qjh88q0b.png)

As you see, there is *no* dist/ folder here. Let's create one. I will explain in a little bit what that folder does.

```
npm run generate
```

Running this generates `dist/` directory. There are many files inside. The important one is `index.html`. 

![Project now has dist directory](https://thepracticaldev.s3.amazonaws.com/i/cix1ek0vxrfp1rbvrkft.png)

Everything inside `dist/` directory contain everything we need to run our static site. If you want to see what this `index.html` looks like, you can copy paste the path to browser, in my case:

```
file:///Users/iggy/src/studies/nuxt/my-static-site/dist/index.html
```

Alternatively (my preferred choice), you can install [http-server](https://www.npmjs.com/package/http-server), then run it against `dist/` directory

```
http-server dist
```

Now that we are set, let's start hosting!

# Hosting to Firebase

To host on Firebase, you need to have a google account. Create one if you haven't yet.

Go to console, add new project. Give it any name you like. I named mine `awesomestatic`.

![Firebase New Project](https://thepracticaldev.s3.amazonaws.com/i/xv7ozwm49c8xczk9amt1.png)

Once done, go into the project. On left tab, find `Hosting` tab.

Hosting page
![Firebase Hosting Page](https://thepracticaldev.s3.amazonaws.com/i/h58z3wfvf80ghzxqz3pc.png)

Get started. You'll see a page with 3 steps:

1. Install firebase CLI
2. Initialize project
3. Deploy

Install the firebase tool, then login. When you run `firebase init`, you'll be presented with options. I personally choose:

1. Hosting
2. Use existing project
3. You should see the project you just created.

![Firebase Steps](https://thepracticaldev.s3.amazonaws.com/i/7rhjn8slu77866rhh7yq.png)

Next it will ask what do I want to use as public dir. Since Nuxt generates `dist/` directory, I put down `'dist'`. If your framework generates `public/`, put that down.

Next it will ask if I want to configure as single-page app? I chose yes. 

Next it will ask whether `index.html` already exists. Tell it `no`. Do not overwrite.

![Firebase's List of Projects](https://thepracticaldev.s3.amazonaws.com/i/lfp3pw436dqb0amjkabr.png)

Running `firebase` init creates 2 new files: `.firebaserc` and `firebase.json`. Look at them and see if you can figure out what they do 😉.

If you want to test your what your app would look like on firebase hosting, you can run:

```
firebase serve
```

And see it on `localhost:5000` (default).

To deploy, run:

```
firebase deploy
```

If you go to Firebase, you will soon see your app's URLs. Congratulations, your site is hosted on Firebase 🔥👏.

![Firebase Deployed URLs](https://thepracticaldev.s3.amazonaws.com/i/snyubdp9ha5r0zskfvbb.png)


So what did we learn from firebase?

- Running `firebase init` instructs firebase where your static site directory is located. In my case, it is inside `dist/`. `index.html` is the entry point.
- The configuration, as you can see, is inside `firebase.json` and it looks like this:
```
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

```

- Firebase knows which project to connect to - it is configured inside `.firebaserc`

```
{
  "projects": {
    "default": "awesomestatic-4e14d"
  }
}

```


# Hosting on Netlify

Let's go over [Netlify](https://www.netlify.com/). Create an account if you haven't yet. I will use the same Nuxt project we used previously.

![Netlify Create a New Site page](https://thepracticaldev.s3.amazonaws.com/i/ufrajvixhxvc0u4xkt8d.png)

Netlify requires you to have your project repository inside either github, gitlab, or bitbucket. I will use github in this example. I already committed and pushed my project in my github repository. If you haven't, do it.


Once you add it, save, and your project will show
![Netlify Build Settings](https://thepracticaldev.s3.amazonaws.com/i/fihuku25smiqf8gg2gjt.png)


Deploy 🚀🚀🚀

![Netlify Deploying](https://thepracticaldev.s3.amazonaws.com/i/gpfqo8tf4ivi0c78myat.png)

You can see it deployed here after a few min:

![Static Site Running on Netlify](https://thepracticaldev.s3.amazonaws.com/i/jegh9bd4vh9lo0kh13s1.png)


# What Did We Learn?

Now that we've seen how to host on both Firebase and Netlify, what did we learn?

The steps are slightly different (Netlify uses git vs Firebase deploy pushes our files directly), but the main ideas are similar:

1. Have a directory (`dist/` for example) containing all resources.
2. Point the host to that directory.
3. Directory has a starting html. In this case, `index.html`.


Keep this in mind as you host your site to different host. Experiment, research, and deploy!




# List of Static Site Hosts
- [netlify](https://www.netlify.com/)
- [firebase](https://firebase.google.com/)
- [github pages](https://pages.github.com/)
- [gitlab pages](https://docs.gitlab.com/ee/user/project/pages/)
- [surge](https://surge.sh/)
- [zeit](https://zeit.co/)
- [forge](https://getforge.com/features)
- [aerobatic](https://www.aerobatic.com/)
- [Amazon S3](https://aws.amazon.com/s3/)

# Resources on Static vs Dynamic:
- [static vs dynamic website](https://wpamelia.com/static-vs-dynamic-website/)
- [static-dynamic](https://www.spiderwriting.co.uk/static-dynamic.php)
- [Static vs Dynamic Websites - What's the Difference?](https://www.youtube.com/watch?v=_wFJj94kSTU)