How to Create and Host Your First Website With Github
Tags: beginners, tutorial, webdev, html
Published: 2022-02-06 18:02:39

[_If you found this article useful consider donating._](https://blog.alanjc.com/donate.html)

[_This article was originally published on my blog._](https://blog.alanjc.com)

In this article I'll teach you how to create your very own website and host it through GitHub completely for free. Let's get started!

## GitHub Setup

Firstly, you'll need to create a [GitHub](https://github.com/signup) account if you don't have one already.

Once that is complete you'll want to create a new public repository with the following name (case sensitivity doesn't matter):

```
<your_github_username>.github.io
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btn9t7j1xrzai7mb7i9s.png)

Now that you've created the repository you'll want to clone it to your local machine with the following command:

```
git clone https://github.com/<username>/<username>.github.io.git
```

_If you don't have `git` installed you can follow the instructions [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) to install it._

Now we can move on to actually creating the website.

## Website Creation

You can write your own HTML and CSS to create your website however, for the purposes of this tutorial I'll be using a template from [HTML5Up](https://html5up.net/).

[HTML5Up](https://html5up.net/) is a place where you can download and use premade HTML5 website templates for your own purposes completely for free.

After choosing and downloading your template, I'll be using the [Aerial](https://html5up.net/aerial/download) theme, you'll want to unzip the contents of the file to the GitHub directory you just cloned onto your machine.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r057huepj15kri886ki7.png)

Now your repository should look something like the following:

```
<username>.github.io/
├── assets/
├── index.html
├── LICENSE.txt
└── README.txt
```

You can go ahead and customize the HTML and CSS files to your liking but for this tutorial I'll just leave them as is.

## Uploading Your Files to Your Repository

You're almost done! Now you need to push your changes up to your GitHub repository.

To push your changes to your repository you'll want to use either the [command line](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-an-existing-project-to-github-using-the-command-line) or [GitHub Desktop](https://desktop.github.com/) which is a GUI interface for working with GitHub repositories.

For the sake of simplicity I'll use GitHub Desktop to push the changes to my repository.

Upon launching GitHub Desktop you'll want to sign in and towards the top left of the application under the "File" option, you'll want to click on "Add local repository" and choose the repository you just cloned to your machine not too long ago.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4q8rw24uvj2anpxwr2e.png)

Next you'll want to commit your changes to your main branch by clicking the blue button towards the bottom left side.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koes2u2tpsik9uhno2ss.png)

Great! Finally, you'll want to publish your branch by clicking on the "Publish branch" button towards the top left side of the application so your changes appear on GitHub.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su02ubeoysh3rdg1gpcf.png)

## Checking Your Website

Now you should be done! Congrats!

GitHub should be smart enough to publish your website automatically.

To make sure our website is live, go to the repository on GitHub and under the "Settings" tab, go to the "Pages" section.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf05n96fjkhk9xdal7zo.png)

If you don't see a green alert box saying your website is published (i.e. it's still a blue alert box) you just have to wait.

After a couple of minutes, GitHub should publish your website automatically at the following address:

```
https://<username>.github.io
```

If for some reason GitHub didn't detect your page automatically, you'll simply want to update the branch GitHub pages is pointing to. You have to make sure it points to the `main` branch and the `root` folder.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vena4okkpjx3k4329kk.png)

Congratulations, you have now published your very first website!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqv0nh8ol5bo2zviu0z0.png)

## Optional: Custom Domain Name

As an optional step, I'll be showing you how to add a custom domain to your website.

First you'll want to buy your domain. My go to place for buying domains is [NameCheap](https://www.namecheap.com/) but you can use any domain provider.

Once you've bought your domain, you'll want to configure your domain provider's DNS settings to point to the GitHub servers by adding the following four IP addresses as `A Record`'s:

```
185.199.108.153
```

```
185.199.109.153
```

```
185.199.110.153
```

```
185.199.111.153
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awelwf1fvoilgom27izh.png)

Next you'll want to create a `CNAME` and make sure it points to your GitHub website like so:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtcewc7hon9akj69ez6i.png)

Now head over to the local GitHub repository you cloned and add a file called `CNAME`.

_Make sure it doesn't have a file extension and it's just the name `CNAME`._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qngmnlxjsxg7l2fu9um.png)

Now inside of `CNAME` add the name of the domain you just purchased.

```
mydomain.com
```

Then you want to go to GitHub Desktop and
commit and publish your changes just like we did when we initially published our website.

You're almost done!

Finally you'll want to head over to your repository on GitHub and under the Settings tab in the Pages section, make sure that the custom domain listed is the one you wrote in the `CNAME` file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xhfaxqc3mbx2s9qljqy.png)

Congratulations! Now you have a website with a custom domain!

If you're still unsure or are stuck in adding a custom domain to your website you can go [here](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site) for a more detailed explanation.

[_If you found this article useful consider donating._](https://blog.alanjc.com/donate.html)

[_This article was originally published on my blog._](https://blog.alanjc.com)