10 Steps to GitHub Pages Greatness
Tags: github, pages, tutorial
Published: 2022-05-17 18:34:35

I honestly feel that Dev.to is perfect for blogging, however I do find it hard to share the various web project that I want to share to the public. Sure I can cut and paste all my project code and share the screen shot, but I can't exactly let reader go for a test run on my blog.

Facing with this dilemma, I could either start a new server ( cost money ) or I could use the various free static side offered to the public such as GitHub Pages, Netlify and etc.. 

Since I am using GitHub as my code repo, I think this is the perfect time to use GitHub Pages. Single build process, just by committing to GitHub Repo and it just work... well technically the pages update after roughly a few minutes. 

To make this web page free, I just use the free tier by GitHub.

The following are the steps taken to start my own blog using GitHub Pages.

## Step 1: Start your new repo.

you may start by going to your GitHub account page and located the green button with the text New

![Create New Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dabvmxgzb19pmi81leq9.png)

now pressing this button will redirect you to [Create a new repository](https://github.com/new)

![Create a new repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfgoox1le1r4ppokrjvc.png)

## Step 2: Name your repo.

What we are looking to do right now is what GitHub call **user site**.

the naming convention for the user site is as follow :

`<username with all lowercase>.github.io`

for example, my GitHub username is ashrafZolkopli
so my repo name should be 

**ashrafzolkopli.github.io**

![Naming The repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b4wzfwbzrkttcrerg9s.png)
 
## Step 3: Setting the repo to public.

Since we are using the free tier, we need to make sure that our repo is public and accessible. If you are using the paid tier, you may set the repo to private.

![Setting Repo to Public](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvldb649z6weorz7q13s.png)
 
## Step 4: Create repo.

You may now click on create repo button located at the bottom of the page

![Create Repo Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvzymfh8clnnz2dixk0f.png)

## Step 5: Clone Repo to Localhost.

After you click on Create Repository button, GitHub will divert you to a new page 

![Repo Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p2h1cce923rlhubywjm.png)

You may call me lazy, but I been using GitHub Desktop like forever. 

Just a matter of a few click and you are done cloning.

Click on the set up in desktop button 
![Set up in dekstop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96fbiox5kjnr3r5vw6qk.png)

on GitHub Desktop:

![GitHub Desktop Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy84bhxblr6zx73ie4pi.png)
 
Click the Clone button

![Clone Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwa5n9rypgsjw9iz59sc.png)

GitHub Desktop now will show us a new page.

![Current Repo Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6buyj2o1ciwkqofvrynt.png)

Now again I am lazy, I just click on open in Visual Studio Code button 

![Open In visual Studio code button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8qarpv55c85cla78ms7.png)
 
And my Visual Studio Code 

![Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/casm3i1hu2amfelul6en.png)

Now your Repo have been clone in your localhost.

Step 6: Create index.html file

You now can choose either to use GitHub Jekyll for your build process and use index.md file with build in Github template or do it like me what uses pure html, css, js file.

For purpose of this tutorial, I would now use a Start Bootstrap admin page template,

[SB Admin](https://startbootstrap.com/template/sb-admin)

![Admin Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaeiov3ihdxh0t3dac47.png)

you can download the app zip file from its Github repo, 

Again for the purpose of this tutorial, I am using only the index.html, css, js and assets file only

![Files for Commit to git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3zxz6nr2vidi0mifleq.png)

We can verify that it works

![The Page works!!!!!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj8xe6ubqz9ya6vwbjbb.png)

## Step 7: Commit to GitHub

if you notice on the side bar, there are 9 changes had been made to the localhost that have not been commit to our local git.

![VS Code side bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mlc2ghnffmm3x4tif2m.png)

Open your source control bar, 

find and click the "+" button beside the 9 in circle, that says "Stage All Changes"

![Stage All Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/947c1lxleqvt91mdpq31.png)

now your Changes become Stage Changes
![Stage Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgkhd5tkeu6c2yhizn85.png)

In your message bar, you can name the changes into what ever you one, I would name this as my Initial Commit

![Initial Commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg76ghni2j6gjh59w318.png)

while your cursor is still in the message bar, Click "ctrl" + "enter" on windows, This will commit your changes on localhost git

![Commit to localhost git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzrqgx5wsauwbeyv8ume.png)

look for the "..." button highlighted in green 
![More action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu16k40cz2ls506608j4.png)

now choose push

![Choose push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en5e9ltxl33240phc5ix.png)

Allow some time for the push to your GitHub Account.

Now go to your GitHub account repo and verify the push is successful

![Push Successful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ottr1wky6ltsctqwtcis.png)

## Step 8: Set up GitHub Pages

On your GitHub repo, click on Settings

![GitHub settings button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf5bk5jrlnbmo2uu1mio.png)

once Setting page is loaded, find the Pages button highlighted in green 

![Pages button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nodvo2mogdf0hc9afzc.png)
 

Since I am publishing from main branch I do not have to change any configuration.

![Pages config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ois1ggj9pl04rx5ch5z5.png)

you may need to change the branch if you want to publish from a different branch

## Step 10: Admire your Now Static Website,

now you can go to your page to admire your New Static Website

my URL : [ashrafzolkopli.github.io](https://ashrafzolkopli.github.io/)

if you click on this page later, I may change the layout and such for my own project, I included the screen shot for reference.

![Website screen shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51pyjjtld8nco8qi7ddu.png)

## Conclusion

I hope this step by step tutorial help you in deploying your own static website on GitHub Pages.

Please feel free to comment or like if you read till this far...
Comments are welcome and if you have any issue please feel free to comment here or contact me via [WhatsApp](https://wa.link/9u4ibx).