GitHub Pages for Beginners

Hello everyone! Today I’ll be showing how you can launch your own website using GitHub Pages. So what is GitHub pages?

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.
-docs.github.com

And since my last two blogs were on the basics of GitHub and Git, I thought it would be a good idea, to show what else GitHub offers. You can setup your GitHub pages website in five easy steps.

1. Creating a Git repository
2. Writing the HTML files. (CSS and JS to if you want)
3. Pushing the files to GitHub
4. Enabling the repository for GitHub pages
5. Opening your website!

So lets first finish of with Step 1 and Step 2,which is creating a repository, and writing down the html and css files. Create a local Git repository, which will have your files. Then create an html file, and other files such as css and js files, which you would like to include. This is how I did it:

You can see I created the git repository a bit later, and you won’t have any issues if you do the same. Now it is time to add, and commit all the changes. And after that we can finally push the changes to GitHub. So first commit the changes to your local git repository, then create a public GitHub repository. Link the GitHub repository to your local git repository, then push the changes. This is how you do it:

Now you need to enable the repository for GitHub pages in the settings. This is how you do it:

The source files for this website is present in the ‘main’ branch, which is what we have selected in the source. You can also create a different branch, make all your files there. Then simply change the source to that branch. After few minutes, click on the link displayed, and it will lead you to your website.

You can see that the link is username.github.io/name of repository. You can also open this same website in any other website. Here’s the same website on my iPad:

So that’s it! I hope you enjoyed this article. Share it with others, who might find this helpful.

Thank you for reading!