Dan Monceau
Dan Monceau's Blog

Dan Monceau's Blog

Free Web hosting Single Page

Photo by Remotar Jobs on Unsplash

Free Web hosting Single Page

hosting is not free if you use a custom domain name (a domain name is chargeable)

Dan Monceau's photo
Dan Monceau
·Feb 9, 2022·

2 min read

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.

image.png

and go to the page tab.

here it is possible to configure everything you want.

image.png

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:

image.png

Configure DNS for Google Domain

add this configuration with your domain name

image.png

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

 
Share this