DEV Community

Alteca
Alteca

Posted on

Free Web Hosting?! Guide to Github Pages Part 1

Intro

Web hosting. Every beginner in web development always doesn't know which web host to choose and if you have a custom coded website then DON'T get paid web hosting. Only do that when your website is bigger than 500mb. If otherwise read on to discover the secret of Github pages.

DISCLAIMER: THIS WILL ONLY WORK IF YOU HAVE THE WEBSITES FILES ON YOUR COMPUTER

Step 1: Getting a Github account

Getting an account at Github is fairly easy, it's like at any other website or program you put in your email your desired username password and all that stuff. If you already have one, great, you can skip this step

Step 2: Creating your Repository

So now that you've got your account, you need to go to the plus drop down at the top right corner of the screen and select: New Repository. You'll probably ask "Wait, what is a repository?". So, a repository is basically a folder where all kinds of files can be stored and shared with the public.
When you've clicked "New Repository" then you'll be given some settings. Just leave everything as it is, and select Create Repository.

Step 3: Adding Your Files

Now for the fun part, adding your website's files to your repository. At the top of the code tab there will be a link saying: Upload an Existing File. Click there and select your files. If your websites code is in a folder and you think that you can just drag the folder into the upload space, you're wrong. Since the repository is already a folder, you don't need an extra one. So in your File Management program go inside the folder and then drag all the files from it into your repository.

Step 4: Putting your Website on the internet

Since we have our website now, let's get it onto the internet. Go to the settings tab and select Pages in the side bar.
Then on the drop down where it says "None" Select the other option, it can be main or master, but that doesn't matter.
Leave the second drop down as the default and click save, Github will now take your code, and publish it on the internet, this might take a few minutes so just let Github do its thing. After a few minutes you should see something that says that your site was published. Click on the link, but if you notice that nothing happens thats okay. We'll cover this in the next step.

Step 5: Adding index.html

As I said if the internet refuses to open your site, that's okay. It just means that you didn't add an index.html file.
It's really easy go to your home page and then select "edit" and rename your file to index.html. This should eliminate the issue.

Outro

Now you could say you're done, since you have your site on the internet up and running, but there's one tiny, small problem. Your website has a very unmemorable domain. Who will want to type that in. To Fix this we will have to get a domain from a domain registrar and combine it with our Github repository.
Part 2 coming soon!

Top comments (0)