Getting started with Github Pages
There are two kinds of Github Pages. User pages and project pages.
Steps for Creating Project pages
- Create a branch called gh-pages
- Add your site to it
- Push to github
Create a branch called gh-pages
git checkout -b gh-pages
You’ll be doing this locally on your computer. -b
is for Branch. gh-pages
is the name of the branch. It MUST be gh-pages. Any other name and Github is going to ignore it.
Once you create a branch, it’ll switch you to it. You can check which branch you are on with git branch
.
The branch with a * and green color is the branch you are currently on.
Add your site to it
Add your project site to this branch. The usual HTML, CSS and JS.
Push to Github
git push origin gh-pages
origin
is where you repository is. In this case it represents Github.
The site can take some time showing up on Github after the branch is pushed. Sometimes it shows up immediately, sometimes it can take up to 10 minutes.
Tips
- You can create a new empty branch
git checkout --orphan gh-pages
- Delete a remote branch
git push origin :gh-pages
User pages
The name of the repository must be username.github.io
A repo named username.github.io will appear online as username.github.io. Once you have that repository, anything you put in it wil become your user website.
The difference between user pages and project pages is that for Project pages, you create a branch in your project repo. For User pages, you create a whole new repo that is specifically for your website.
Steps for Creating Project pages
- Create a repo called username.github.io
- Create the site
- Start a local git repo in that site folder
- Add remote repo, the one you created in the first step
- Push it to the remote repo
Create a local git repo in the site folder and add/commit files
git init
git add .
git commit -m 'Initial commit'
-m
is for Message. The message that you want to add about the files your are committing. It is kind of a must to add a message, and it should be descriptive of teh changes you made to file.
Add Remote repo
Connect your site to Github
git remote add origin git@github.com:username/username.github.io.git
origin
is the name of your remote repo. It doesn’t have to be called origin, it can be anything. Origin is sort of a convention, to represent that is sort of the canonical repo for all your files. You can name it github if you want.
You can check where your remote is with git remote -v
Push it up
git push -u origin master
origin
is your remote repo, master
is your branch.
Again, it can take up to 10 minutes for the site to become live on username.github.io.
Add a CNAME record
If you want to use your own domain, you can. Make that username.github.io username.com. All you have to do is cerate a CNAME alias with your DNS provider, and add a CNAME file to your repo.
CNAME details for your Domain Regsitrar
Name / Host / Alias: www Time to Live (TTL): 86400 Record Type: CNAME Value / Answer / Destination: username.github.io
Creating and committing a CNAME file
Create a file called CNAME
(notice that there is no file extension) and add your domain www.yourdomain.com
to it. Save that file in the root of your repo.
git add CNAME
git commit CNAME -m 'Added CNAME'
git push origin master
Links
- Source
- Here are help articles about creating a CNAME record at registrar, and adding a CNAME file to your repo.