GitHub Pages lets you build and publish your website for free. This is suitable for showcasing projects you've been working on, your portfolio (for your personal website) or your organization/company.

So how can we take a single page application we made (with React, Svelte, etc) and deploy that to our GitHub Pages? It’s pretty simple.

Keep in mind that if your website utilizes a back-end, it may have to be hosted elsewhere.

Step 1: Your repository!

If you are making a personal website, make sure to name your repository like yourusername.github.io . Apparently, it’s another one of GitHub’s “secrets”, so that the website will not be under a path / , but instead just yourusername.github.io .

If your repository name isn’t like the above, your website can be accessed under yourusername.github.io/repository-name .

Also, unless you have a Pro GitHub account, your private repositories cannot enable GitHub Pages. So bear that in mind if your repository contains any sensitive information.

Step 2: Push Code!

You can push on the github repository the site you want to host.

Step 3: Settings repository!

once you have pushed go to the repository settings.

and go to the page tab.

here it is possible to configure everything you want.

your site is accessible for free on yourusername.github.io

Step 4: Add custom domain (optional)!

personally i use google domain for simplicity.

buy your domain.

Add CNAME file

In my case my domain is danmonceau.fr so my CNAME file looks like:

Configure DNS for Google Domain

add this configuration with your domain name

Finally your site is now live! Check it out. Mine is online at danmonceau.fr or d4nm0.github.io will redirect to it!

If you enjoyed the tutorial please give it a recommend! Thanks again