Launch a Website for Free in 5 simple steps with GitHub Pages | by Emile Gill | Towards Data Science

Having your own website allows you to showcase to the world who you are, and what you’re passionate about.
Many people assume that to set up a website would be too expensive or technically challenging for the average person. Actually, it doesn’t have to cost anything at all, can be done by anyone- regardless of experience level- and can be up and running in under 10 minutes! (You can check out mine here)
GitHub Pages is a feature of GitHub which allows users to host static webpages straight from repositories. It’s ideal for hosting a personal portfolio website, showing off projects, or for a small organisation to host their page. In this post I’ll demonstrate just how simple it is for anyone to get a website onto the web, hosted through GitHub Pages.
If you already have a GitHub account, feel free to skip this step. If not, you can sign up here.
I’ll try not to assume prior knowledge throughout this article, but I’d recommend you familiarise yourself with Git concepts if you’ve never used it before. This article offers a great introduction to Git and GitHub from the complete basics:
towardsdatascience.com
A repository is where you store all the code for your project, or as GitHub’s help page explains:
“A repository is like a folder for your project. Your project’s repository contains all of your project’s files and stores each file’s revision history. You can also discuss and manage your project’s work within the repository.” GitHub Help
Therefore, to get started with our project, the first thing we need to do is to create a repository for our website’s code to reside. Now that we have a GitHub account this is easy to do. Simply navigate to the top right of the GitHub homepage, and under the “+” menu, select “New Repository”.
This will open the “Create a New Repository” page where we can choose a repository name and choose whether our repository is “Public” or “Private”. It’s important that we give this repository a specific name so that GitHub knows that this repository should be hosted through GitHub pages. This should be [your_username].github.io . So, for example, since my GitHub username is emilegill743, my repository name- and as we will see later also my website URL- will be emilegill743.github.io. We will also want to set our repository as “Public”, since GitHub Pages only allows hosting of “Private” repositories if we upgrade to GitHub Pro.
Once we have completed this, GitHub will take us to our newly created repository and explain several ways we can get started working with a local copy of the repository. If you’re not familiar with working with Git on the command line, the easiest way to “clone” this empty repository to your local system is to use the “Set up in Desktop” option. This will open up GitHub Desktop- which can be installed here- creating a local copy of the repository at a location of your choice. You’ll now have an empty folder with the name of your repository on your local filesystem which will be tracking any changes we make. These changes can then be “committed” and “pushed” to our remote repository on GitHub.
Now, if you’re hardcore you might want to design your website from scratch. Theoretically, you could do that; all we need is an index.html file in our remote repository and GitHub will go ahead and render our website. However, since the purpose of this post is to get our website up and running as quickly as possible, we’ll use a template to get us started. This will allow us to create a sleek, responsive, professional website with minimal work involved.
There are many sites offering templates for website designs, some can be purchased for a small cost, but many are available for free. A particular favourite of mine is HTML5 UP, which offers a selection of beautiful designs, perfect for a personal portfolio website. All designs are free under the Creative Commons Attribution 3.0 License, meaning that we are free to use it as we wish, so long as we credit HTML5 UP for the design.
Feel free to do your own research and find a design that best suits you; for demonstration, here I will use HTML5 UP’s Strata theme.
Now that we have selected our design, we can download its associated files and transfer them into our local repository. We can then commit our changes and push this to our remote repository. Again, if you’re comfortable working with Git, go ahead and do this via the command line, but if you’re new to this you can equivalently use GitHub Desktop.
This is where the magic happens. Open up a web browser and navigate to the URL [your_username].github.io .
Our website is live! Now let’s look at how we can add the final touches and personalise it, right now it’s just a template.
For this final step, we’ll need a text editor. If you’re a coding pro, you’ll probably already have a text editor of choice. Any will do, but I’d personally recommend Visual Studio Code, which you can install here.
Opening the folder containing our repository in our text editor we will see all the files contributing towards the design of our website. The most important of these is our index.html file, which denotes the structure of the main page of our website. There will probably also be some .css files and maybe some .js too. Don’t worry too much if you’re not familiar with any of these, I wasn’t when I created my first website! A basic summary is that HTML (Hypertext Markup Language) forms the building blocks of the structure of our webpage, CSS (Cascading Style Sheets) describes how our webpage should be styled, and Javascript defines the interactive behaviour of our webpage.
The first thing I’d suggest is that you download the ‘Live Server’ extension for Visual Studio Code, which will enable us to preview our website as we edit it, automatically refreshing when we save changes. Alternatively, you can just open up the index.html page in your web browser and manually refresh to check changes.
I won’t go into too much detail about how to write HTML, otherwise, this could quickly become a tutorial. The basic syntax is composed of ‘tags’ which form HTML elements, the building blocks of an HTML web page. These tags normally consist of a start tag, any attributes of the tag, some content and then an end tag.
<tag attribute="value">Some content</tag>
It’s up to you how much you want to customise your website. At the most basic level, you’ll want to change the content of the HTML elements in your webpage to reflect your personal information. You’ll also probably want to change the images in the webpage. To do this all you need to do is copy the image that you want to use into your repository (if you’re using an HTML5 UP template it’ll probably already have a folder designated for images) and then adapt the src attribute of the image element to reflect the path to your new image, <img src="path_to_image.jpg"/> . It’s worth noting here that image elements are composed of a single tag containing their attributes, rather than a start and end tag like many other HTML elements.
If you’re interested in learning more about HTML, CSS and Javascript so that you can take your website personalisation to the next level, I’d strongly recommend Harvard’s CS50W: Web Programming with Python and JavaScript. This is a completely free course on edX, the first couple of chapters of which focus on Git, HTML and CSS and later goes on to look at Javascript. It provides a great introduction to the skills we need to really make the website our own.
For further inspiration, feel free to check out my website at emilegill743.github.io and the corresponding GitHub repository linked below.
github.com
Thanks for reading!
If you enjoyed this post, feel free to check out some of my other articles: