GitHub Pages — A Comprehensive guide w/ images (Part 1)
Tags: github, githubpages, staticwebsites, html
Published: 2020-01-11 16:45:56

---

firstPublishedAt: 1578760452973
latestPublishedAt: 1578760452973
slug: github-pages-a-comprehensive-guide-w-images-part-1
title: GitHub Pages — A Comprehensive guide w/ images (Part 1)

---

![Photo by [Sincerely Media](https://unsplash.com/@sincerelymedia?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/8470/0*ZVxZaN_2nnFSVQuK)

Recently I started building my personal [website](https://kushalbhalaik.xyz) as everyone is building for themselves these days. I got a cool TLD (.xyz), and that I is the only money I wanted to spend. Since then I’ve been looking for ways to host it without any costs.

---

I’ve tried different host providers such as [Heroku](http://www.heroku.com), [000webhost](http://www.000webhost.com) so far, which are good options. My website is vastly static pages so far until I figure out how to have a cms such as [Ghost](http://www.ghost.org) to be integrated with [Gatsby](http://www.gatsbyjs.org) for adding content periodically (Of course for free). Anyways I thought if my site is mostly static pages so why not give Github Pages a try (it’s been on my list for a quite sometime now) and along the way I encountered various hurdles and there wasn’t an elaborate article around it. So folks here we are :)

This is part 1 of this article series, part 2 will be coming soon. _Enchanté_.

# Setting up Github Pages:

This is the most straight forward thing, it’s all neatly illustrated here on [Github Pages](https://pages.github.com/), but as this article‘s name suggests I’m bound:

We’ll start by creating a repository on Github:

1. Goto [Github.new](https://github.com/new/), a cooler way to create Github repositories (You’ll see).

> Make sure your repo-name is **username.github.io**
> The pages ending with **username.github.io** are called User Pages, where **username** could belong to an individual or an organization

![Repository creation flow on GitHub](https://cdn-images-1.medium.com/max/1698/1*0Ozb5XoyfFn7DWZspAYuAg.png)

### Note: It is important to make your repository Public, in order for your GitHub User pages to be accessible to all

> We won’t be creating any other branch, because User Pages require to be built from master branch.
> And in this article, we won’t use Jekyll to publish our pages.

![](https://cdn-images-1.medium.com/max/1558/1*no0kc3rdol3SWujmpJVKYg.png)

2. First clone the repo to local machine:
   Here, **username** is GitHub username

```
~$ git clone https://github.com/username/username.github.io.git
```

3. Create an index.html file inside this repository:

```
~$ cd **username**.github.io

~$ echo “Hello World!!” > index.html
```

4. Add, commit and push your changes to Github remote:

```
~$ git add *

~$ git commit -m “Initial commit”

~$ git push -u origin master
```

5. Type {**username.github.io**} in browser and you’re done publishing your first website to github pages.

![Browser screenshot of deployed Github pages](https://cdn-images-1.medium.com/max/1022/1*XOuM4EPcUp2T2pOOniPaYw.png)

---

# Setting up Github Pages on your custom-domain:

We have successfully created and deployed Github Pages. But I want users to visit my custom domain _kushalbhalaik.xyz._ Lets link’em up:

1. Created a CNAME file in your repository:
   I will be doing it via GitHub UI, just create a CNAME file (with no extension) and just enter your domain name inside it, nothing else.

![](https://cdn-images-1.medium.com/max/2052/1*pfBeNgjpAmuqIhBOQTgNHg.png)

Once Done, commit your changes.

![Adding CNAME file to repository](https://cdn-images-1.medium.com/max/2032/1*_M1dh61vJyblyI6DX-m1CA.png)

2. Change DNS records on your DNS provider:
   We need to change existing CNAME records to point to created github pages i.e. _username.github.io_

![Changing CNAME records on Cloudflare](https://cdn-images-1.medium.com/max/2116/1*RYZ6ZpXYVQmdEgXPqxGXuw.png)

# Important Points:

- At this point, nothing needs to be done from our end, we need to wait for changes to reflect on both GitHub and Cloudflare end, Which may take some time (usually its prompt) but may take some time based on your DNS provider

- You won’t be able to access your pages via **username.github.io**, in case you try and enter this in browser, you’ll be redirected to your custom domain

So this was all to get you started with your very own Github Pages (User). In Part 2 of this series we’ll be taking deeper look into _gh-pages_ and linking pages to your sub-domain. _Stay Tuned!!_


**Original article on**: [https://blog.kushalbhalaik.xyz/github-pages-a-comprehensive-guide-w-images-part-1/](https://blog.kushalbhalaik.xyz/github-pages-a-comprehensive-guide-w-images-part-1/)