Imagine having your own website running 24/7 on the internet without worrying about the bills to be paid to keep it up on the server.

Well, don't you worry, because I will teach you how to build and deploy websites without paying a single cent.

# Type of a Website

Before we go about deploying our website, we first need to know what type of website we are going to build and deploy.

There are mainly two types of websites: static and dynamic. Static sites only use plain HTML, CSS, and vanilla JavaScript, while dynamic websites use frameworks like React.Js, Next.Js, and Express.Js.

There are some platforms that support only static websites, while others support both static and dynamic websites. It is important to know the type of website you're deploying to prevent headaches in the future.

# Static website

Let's first consider how to build and deploy a static website for free.

## 1. Build a static website using HTML, CSS and JS

Open your favorite code editor and create an `index.html` file.

Inside, create a boilerplate html like this:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
Change the `<title>` from `Document` to `My Static Website`. 

And then, inside the `<body>` tag, add the following content:

```html
<h1>Hello World!</h1>
<h2>This is a static website.</h2>
<div>
  <p>The current number is: <span>0</span></p>
</div>
```
It would look something like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <h2>This is a static website.</h2>
    <div>
      <p>The current number is: <span>0</span></p>
    </div>
  </body>
</html>
```

Open your `index.html` file in the browser to see your beautiful static website.

![index.html file](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Findex-html.PNG)

In your `index.html`, add the attribute `class="title"` to the tag `<h1>`.

For `<h2>`, add `class="sub-title"`. Finally, add `class="content"` to the `<div>`.

It would look something like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Website</title>
  </head>
  <body>
    <h1 class="title">Hello World!</h1>
    <h2 class="sub-title">This is a static website.</h2>
    <div class="content">
      <p>The current number is: <span>0</span></p>
    </div>
  </body>
</html>
```

Now, let's add some CSS so we can include styles and make it even more beautiful.

Create a `style.css` file. We need to link this CSS file inside our html, like so:

```html
<link rel="stylesheet" href="style.css">
```
Put this inside the `<head>` tag of your `index.html` file, like this:

```html
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>My Static Website</title>
   <link rel="stylesheet" href="style.css">
 </head>
``` 

To style our `index.html` file, let's target the `class` attribute we added a while ago.

Let's go wild and add some styling like colors and font styles!

```css
.title {
    color: blueviolet;
}

.sub-title {
    font-style: italic;
    color: brown;
}

.content {
    font-size: 18px;
    color: green;
}
```

Our website will now look like this:

![the website when css was added](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fadded-css.PNG)

*Ain't that a beautiful website?* 🤭

Now, our website is not complete without some `JavaScript` in our project. Let's add some code to make it more exciting!

In our `index.html` file, add a count button. Using this button, we will change the value of `0` inside the `span` tag. 

Now, the `<body>` of our `index.html` would look like this:

```html
 <body>
   <h1 class="title">Hello World!</h1>
   <h2 class="sub-title">This is a static website</h2>
   <div class="content">
     <p>The current number is: <span>0</span></p>
   </div>
   <button>Count</button>
 </body>
``` 
In our project folder, create a `script.js` file. We need to link this javascript file as well in our `index.html` file like this:

```html
<script src="script.js" defer></script>
```

The overall look of our `index.html` file would be like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Website</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 class="title">Hello World!</h1>
    <h2 class="sub-title">This is a static website.</h2>
    <div class="content">
      <p>The current number is: <span>0</span></p>
    </div>
    <button>Count</button>
  </body>
</html>
```

Now, let's create a program that will increment the number when the button is clicked.

```js
const number = document.querySelector("span");
const button = document.querySelector("button");

let count = 0;

button.addEventListener("click", () => {
  count++;
  number.textContent = count;
});
```

In the script above, we used `document.querySelector` to target both the `<span>` and `<button>` for the number `0` and `Count`, respectively.

Then, we initialized a variable `count` and store the number 0.

We utilized the built-in function `addEventListener()`, in order to listen to `"click"` events on our `button`.

Inside the callback function, we implemented the counter logic, `count++`, to the `count` variable.

Finally, we assigned each increment to the `number` variable using `textContent`.

Now, test that button and start the *clicking*! 😉

![button clicking on the website](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fjs-button-click.gif)

## 2. Deploy to Github Pages

Our static website is finally complete. We have implemented HTML, CSS, and JavaScript on our webpage.

It's time to deploy our static website to `Github Pages` with zero cost.

### Create a Github Account

In order to deploy to github pages, you must first have an account on `Github`; if you don't have one, create one using this link: [Github Signup](https://github.com/signup).

### Create a New Repository

Now, [create a new repository](https://github.com/new). Name the repository whatever you want; I'll put `awesome-static` for mine. 

For the description, write `This is a static website created using HTML, CSS and JavaScript`.

Check the `Add a README file` and then click the button `Create repository`.

Github will redirect you to your newly created repository, like below. 🍻

![Github repo of the static website](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fgithub-repo.PNG)

### Add the Project files to the Repository

Now, let's add our project files to our GitHub repository.

You can manually add the files by clicking the `Add file` button and then the `Upload files`.

![add new files to github via upload](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fadded-files-via-upload.PNG)

Now that it is uploaded, let's deploy it by going to `Settings` -> `Pages`.

Under `Branch`, select `main` and then click `Save`.

Wait for a minute, refresh the page and then you'll see that your page is live. Congratulations!🍻🥳

![successfully deployed to github pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fdeployed-to-github-pages.PNG)

For reference this is the website we created: [https://naknamu.github.io/awesome-static/](https://naknamu.github.io/awesome-static/).

If you missed anything, check the [Github repository here](https://github.com/naknamu/awesome-static).

> If you build a website for commercial purposes, then you need to have a `custom domain`. For example, `google.com`, `solodevhub.com` or `alisa.pics` are custom domains. You buy these from domain providers like Namecheap, Porkbun, or Cloudflare. A domain will cost you a few dollars, so we will not discuss it here.

# Dynamic Website

Dynamic websites are popular nowadays, especially when you use frameworks like React.JS, Next.JS, and Express.JS.

Let's build a dynamic site using React and deploy it to production without spending a penny.

## 1. Build a Dynamic Website using React

Open up your terminal, and let's create a React application using the command below.

```
npx create-react-app my-dynamic-app
```

You can name your React app anything; I named mine `my-dynamic-app`.

After installation, use the command below to run your newly created React app.

```
cd my-dynamic-app
npm start
```
When you enter `npm start`, your app will automatically run a development server on `http://localhost:3000/`. Visit that site, and you will see the default React application. 👏

![default react app](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-default.PNG)

As you can see in the webpage, its says `Edit src/Apps.js and save to reload.` Let's try and do that. Remove all the contents inside `<div className="App">` and add anything you want. For me, I will put something like this:

```js
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>I am a great developer. 💪</h2>
    </div>
  );
}

export default App;
```
Refresh the page to see the changes, like so.

![react app new output when edited](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-edited.PNG)

To create a production build for our react app, we need to run the command `npm run build`. 

## 2. Link React App to Github

Note that when developing a website, it is best to store your project in a `GitHub repository` so you can access your project anytime and anywhere. Don't forget to also utilize `Git` so you can see changes you commit to your application.

### Create an Empty Repository

Now, let's create an empty repository and upload our react app to github.

> Note: When creating a repository, don't check the "Add a README file" checkbox to avoid conflict with our local files!

After a successful creation, github will show you something like this:

![new github repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-new-repo.PNG)

### Push the React files to Github

Let's connect our app to the Github repository, replace `<username>` with yours.

```
git remote add origin https://github.com/<username>/my-dynamic-app.git
```

In my case, it was:
```
git remote add origin https://github.com/naknamu/my-dynamic-app.git
```

Push our app to the github repository.

```
git push
```

Github will ask for your username and password when you use `git push` for the `HTTPS` link. Type in your Github username, and for the password, use the `personal access tokens` generated from the `Developer settings` in Github. 

If you don't know how, just follow these [steps to generate personal access tokens from Github](https://docs.github.com/en/enterprise-server@3.9/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens).

![Git push of local file to github](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fgit-push-react.PNG)

Head over to your Github repository to see the changes.

![react app pushed to github repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-pushed-to-github.PNG)

## 3. Deploy to Cloudflare Pages

It's time to deploy our awesome react application so we can share it to everybody. 

### Create a Cloudflare Account

We will use cloudflare pages to deploy our react app for free. If you don't have an account yet, sign up here: 
[cloudflare sign-up page](https://dash.cloudflare.com/sign-up).

### Create an application in Cloudflare Pages

After you created an account, go to the dashboard and in the left sidebar, navigate to `Workers & Pages`. 

In the `Overview` tab, click on `Create application` -> `Pages`. 

![connect github repository to cloudflare pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fcloudflare-connect-to-get.PNG)

### Connect Git repository to Cloudflare Pages

You have the option to create an application by importing an existing Git repo or upload the assets manually. Let's make our life easier by connecting to git.

Click on `Connect to Git`, select the repository we saved earlier to Github. In my case, the repository is `my-dynamic-app.`

If it's not shown, you must configure repository access for `Cloudflare Pages`.

Click `Begin setup`. Under `Build settings`, choose `Create React App` in the `Framework preset` dropdown.

![Build settings for react applications](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fcloudflare-build-settings.PNG)

Finally, click `Save and Deploy`.

If everything goes well, you'll see a success confirmation from Cloudflare, like below. 

![Success confirmation from cloudlflare pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fcloudflare-success-deployment.PNG)

Follow the link provided, and you will see your beautiful application in all its glory. 💪

Congratulations! You have successfully built a React application from scratch and deployed it to Cloudflare Pages. 

Don't worry, you won't incur any bills by deploying to CloudFlare pages, as they offer unlimited sites for free! 🍻

For reference, this is mine: [https://my-dynamic-app.pages.dev/](https://my-dynamic-app.pages.dev/)

# Conclusion

For static websites, you can deploy an unlimited number of websites using Github Pages without paying anything. Although you can also deploy a React application to Github Pages, I didn't include it here as there are many configurations that you have to do to make it work. That is why I utilized Cloudflare Pages to make the deployment of the React app easier and faster.

Hopefully, you learned something new from this blog. If you have any questions, feel free to ask them below in the comment section. Cheers!