I have been spending most of my time lately working on projects around web development. One of the most amazing tools I’ve found during this process is GitHub Pages. This article will walk you through creating a ‘Hello, World’ website hosted on GitHub Pages. Everything here is 100% free. If you learn better from videos, a video walkthrough is available here.
Step 1 – Create a GitHub account
If you already have a GitHub account, great! Feel free to skip to step 2. If not, no worries! Creating a GitHub account is easy and will boost your visibility and credibility as a developer. In a way, a GitHub account is like a LinkedIn account for developers. GitHub allows you to put your code under version control and store it on a server (aka “In the cloud”) so that even if you lose your computer or hard drive, all your code will still be accessible through your GitHub account. There are many different types of version control systems (vcs) such as subversion (svn), mercurial, and git. GitHub, as you may have guessed, uses git. They all have different strengths and weaknesses, but overall git is probably the easiest to get started with and is the go-to vcs system for the majority of developers. Version control systems are outside the scope of this tutorial, but you can find a short comparison of some of the most popular version control systems here. A nice Youtube playlist with introductory git videos published by GitHub can be found here.
To make an account on GitHub, head on over to their webpage at https://github.com/. They have a really simple process for creating an account, so simply pick a username, enter your email address, and choose a (strong) password, and you’re good to go!
Step 2 – Create a Repository
Next we will create the repository we will use for our GitHub Pages site. First a quick, but important note on repositories created with GitHub. GitHub has a free plan and a paid plan. The main difference between a free and paid plan on GitHub is the ability to create a private repository. With a free plan, all repositories you create will be public. That means anyone can see the code/files/ect. that you upload or create in the repository. Therefore it is super important that you do not put any private information in a public GitHub repository. Whatever you put in a public GitHub repository, you are sharing with the world. Using the free plan works great for this tutorial, as we will be adding a simple ‘Hello, World’ webpage to our repository, but keep in mind that if you want to be the only one with access to your GitHub repositories, you will need to upgrade to a paid account, which is currently $7 a month. If you’re a college student, GitHub will give you unlimited free private repositories and many other benefits; you can find more info here.
Steps to create a repository:
- Click the ‘New Repository’ button
2. Enter the repository details as shown below and then click the green ‘Create repository’ button.
Step 3 – Enable Github pages for the repository
3. Click the ‘Settings’ button on the repository home page.
4. Once you are on the settings page, scroll down to the ‘GitHub Pages’ section and enter the options as shown below.
Step 4 – Create the hello world website
5. After enabling GitHub Pages for the repository, the next step is to create your website! Head back to the ‘Code’ tab in GitHub as shown below.
6. To create a homepage for your website, click on the ‘Create new file’ button.
7. Next enter the information shown below to create the index.html file.
Step 5 – visit your website!
8. Great! Now it’s time to visit your new website! Head back to the ‘Settings’ tab and click on your GitHub Pages URL in the GitHub Pages section. Note: It may take 5-10 minutes for the link to show your updated site.
9. Congratulations! Your website should look like the image below. Now you can utilize your web development skills to make an awesome website without having to pay a penny for hosting!
Bonus – using jekyll themes
If you were checking out the options under the GitHub Pages section, you will have noticed that you can choose a theme. Themes are an easy way to get a great looking webpage up and running in no time! After choosing a theme, you will need to delete the index.html file you created to see the theme take effect.
For example, here is a screenshot of the Jekyll Cayman theme
Decide to watch this tutorial instead of reading it? Great! Hit play below.