People often assume that setting up a website is either too technical or expensive for them. Nowadays, almost anyone – regardless of expertise level – can create a website and host it on the internet free.
Through GitHub Pages, users can create repositories and host static webpages. This feature is suitable for small organizations seeking affordable hosting for their webpages, showing off projects or hosting a personal website. Here are five simple steps anyone can follow to host their website for free using GitHub Pages.
Create a GitHub Account
Skip this step if you have a GitHub account. If not, head over to their homepage and signup. Since I intend to avoid assuming any prior knowledge throughout the article, I would recommend understanding Git concepts first before going any further.
Create a Repository
A repository is a virtual store for all the code of your website. To begin this project, I will first have to create a repository in which my website’s code will reside. I can do this by selecting “New Repository” under the “+” menu on the top right side of my GitHub account.
This leads me to a “Create a New Repository” page where I can name the repository and choose to either have it public or private. Specifying the name of this repository is crucial since it informs GitHub of my intention to host it through GitHub Pages.
Note that free hosting is only available for “Public” repositories. Users interested in hosting “Private” repositories have to upgrade to GitHub Pro.
After completing this step, GitHub takes me to my newly created repository and gives me instructions on how to work with the local copy of my repository. Since working with GitHub’s command-line option can be a bit technical, using their “Set up in Desktop” option will make cloning the empty repository to my local system a lot easier.
Using GitHub Desktop, I can create a local copy of my repository and track any changes I make via a folder within my local file system, bearing the name of my repository. It is then entirely up to me to either “push” or “commit” such changes to my remote repository on GitHub.
Choose a Website Design
Most expert coders prefer designing their websites from scratch. Theoretically, I could do this since all it takes is an index.html file in my remote repository, which GitHub will use to render my website. However, to get my website up and running without being too technical, using a template is the way to go.
Templates are great for creating professional, sleek and responsive websites with minimal work. While some websites offer templates for a small fee, there are plenty of sites with many free templates.
An excellent example is HTML5 UP, which features a wide variety of free templates for beautiful website designs. The only catch to using their free templates is crediting them.
Push to GitHub
After selecting my design, I can download its associated files into my local repository. This will allow me to make any changes and push them to the remote repository. While it is possible to complete this step using the command line on GitHub, GitHub Desktop is the more comfortable option.
At this point, I can open my favorite web browser and navigate to my new website’s URL, i.e., [my_username].GitHub.io. While my website is live, it is still just a template. To complete this website creating process, I will have to customize it to achieve a personal touch.
Customize the Website
In this last step, I will have to use a text editor. I must mention that this step can be somewhat overwhelming, especially for beginners. However, worry not because there are plenty of affordable hosting options that make the website opening process a breeze. For instance, you can get affordable hosting like web hosting hub for a surprisingly low price.
Most people conversant with coding probably have a favorite text editor. While any text editor should do, I prefer Visual Studio Code. Opening the folder that contains my repository in the text editor, I can view all the files that contribute to the design of my website. Out of all these files, the most important is the index.html file, which determines the structure of my website’s main page. Other files that reside in the folder include .js and .css files.
To summarize the general purposes of these files, JS (Javascript) defines the webpage’s interactivity, CSS (Cascading Style Sheets) describes the styling of the webpage and HTML (Hypertext Markup Language) forms the virtual building blocks for the webpage.
Before going any further, I will download Visual Studio Code’s ‘Live Server’ extension, which will allow me to preview changes I make to the website in real-time. An alternative to this is opening the index.html page in my web browser and manually refreshing to preview the changes I make.
While website customization is a somewhat subjective topic, changing the content of the webpage’s HTML elements to reflect personal information should be a fundamental step. Also, it is probably necessary to add new images on the webpage for even more personalization.
To change the images, I will first have to copy my desired image into my repository. I will then adapt the image element’s “src” attribute to reflect the path to my new image. Note that unlike most other HTML elements, image elements comprise of a single tag that contains the attributes.
Conclusion
While creating websites nowadays is a fun experience, having to pay to publish it on the web can be a barrier for some people. Through GitHub Pages, however, people of all expertise levels can create and host a website free of charge.
