Host your Website for Free using GitHub Pages

Photo by Carlos Muza on Unsplash

A landing page is a great way to drive traffic, improve your SEO, and build your brand, but there is a misconception that they are hard to create and maintain or that they are expensive.

Fortunately, there are good options to host your page for free, today we will explore GitHub Pages.

What is GitHub?

GitHub is a repository hosting service, in other words, it is a cloud storage service for your software code which also includes a Version Control System based on git.

What is a GitHub Page?

In addition to storage and VCS, GitHub also provides other services like website hosting through GitHub Pages, those pages are linked to a particular repository in your account.

GitHub Pages

This means that you only need to create a GitHub account (which is free), upload your code to a repository, activate the GitHub Page for that specific repository and you will have a website.

How Can I do it?

1. First, create a GitHub account.

2. Then create a new repository with the following name username.github.io, where username refers to your GitHub username.

3. Create a folder in your computer, add a file named index.html and write Hello World inside.

4. Initialize git in your folder, and link it with your GitHub repository wit the next commands

git init
git add –-all
git commit -m "first commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

5. That’s it, go to https://username.github.io and your website should be alive.

What’s Next?

To update your website it is only a matter of editing your files and pushing your changes to the repository.

For this example, we used a simple HTML file, but GitHub Pages allows you to build your website as you will build it normally, this includes Javascript and CSS.

But not only that you can also host websites built with some frameworks and libraries like React, Angular, Gatsby, etc. The process is a little bit different but not hard at all, also there are tools that help us to do it very easily like gh-pages.

Let’s explore how could you do it with Gatsby.

Photo by Patrick Reichboth on Unsplash

After creating your project, install gh-pages

gh-pages

npm install gh-pages --save-dev

Then create your production build

gatsby build

To finish push your production build folder to your master (or the branch you want) using gh-pages

gh-pages -d public -b master

After this, you can go to https://username.github.io and your gatsby site should be alive.

Next Steps

Right now your page is accessible through https://username.github.io but you can use another URL like yourawesomeporject.com to make it look more professional, for this you will need to buy a domain and make some configurations through your provider, this is a good guide I personally use to configure domains bought through GoDaddy https://hackernoon.com/how-to-set-up-godaddy-domain-with-github-pages-a9300366c7b.