This article was originally published on programmingliftoff.com as Create your first website on GitHub Pages.
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, scroll down to the bottom of this article for a video walkthrough.
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
Enter the repository details as shown below and then click the green 'Create repository' button.
STEP 3 - ENABLE GITHUB PAGES FOR THE REPOSITORY
Click the 'Settings' button on the repository home page.
Once you are on the settings page, scroll down to the 'GitHub Pages' section and choose the master branch for the source.
STEP 4 - CREATE THE HELLO WORLD WEBSITE
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.
To create a homepage for your website, click on the 'Create new file' button.
Next enter the information shown below to create the index.html file.
STEP 5 - VISIT YOUR WEBSITE!
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.
Congratulations! Your website should be live on the internet! Â Now you can utilize your web development skills to make an awesome website without having to pay a penny for hosting!
Final Site
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.
And that's the basics of GitHub Pages. Â In summary, GitHub Pages allows you to host your static websites for free. Â If you want your website source code to be private, you can upgrade to a paid GitHub account for unlimited private repositories. Â Static websites are very powerful. Â These sites can be built so well that it is not obvious whether a site is a static site, or a dynamic site using a server. Â This tutorial was to help you become aware of the possibilities made available to you by GitHub's support for static websites. Â To fully take advantage of static sites on GitHub you will need to practice your HTML, CSS, and JavaScript skills! Â With GitHub Pages, (almost) anything is possible, so start building your website today!
Did you create a static site on GitHub? Â If so, post a link in the comments below so others can see it and gain some inspiration!
Decide to watch this tutorial instead of reading it? Â Great! Â Hit play below.
Top comments (11)
Pretty useful stuff. I run my code blog on gitlab with hexo.
Cool! I need to give gitlab a try, I’ve only ever used GitHub.
Unlimited private repos for free... That's why I love gitlab.
I try to make it, but I still have the 404error page. I follow the tutorial and verify the oficial github documentation.
berthabrenes.github.io/
github.com/BerthaBrenes/berthabren...
Amazing
Great post! I remember the first gh-pages I built, it is a good resource for every developer. 👌
Private repositories are now free :-)
I just saw that, that's awesome! I'm updating the article now!
Thanks, really inspiring! Under influence of this post I created this business card.
Awesome! I just checked out your site, it looks great!
Yh that's awesome tool