How to make static demo sites on Github

You did a wonderful project using HTML, CSS and JavaScript. And you uploaded the project to Github so that other can get help. People now can easily fork, clone, or even download the repository. But something is missing – if a visible demo can be provided, it’d be great!

We will discuss on: How to create a static demo site on Github.

Static site means, there’s no server-side code there – you’re creating a site using pure HTML, CSS and JavaScript. Because we’re not getting any place to store a database.

Pre-requisite

You should know how to create a HTML file. For others, we will learn on the way…

How to proceed?

Step 1: Deploy code in Github

Easy as pie. It’s assumed that you’ve already created a static site, where there’s a index.html. (As we already made ours)

Let’s make it a Git repository. If you don’t know how to use git, let’s have a quick look on how to use Git: (The following article is in Bengali. For English sources, please consult: Git Book by Scott Chacon and Ben Straub)

গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ১

Open Git bash, and type:

git init
git add -A
git commit -m "Initial Commit"

Let’s create a blank repository on Github, just create a repository with only its name. You will be notified what to do next upon making the new repo. Just copy the following line from there to git bash:

git remote add origin https://github.com/{username}/{repository-path}.git

You understood, {username} and {repository-path} should be replaced by your username and repo path। By doing this, we’ve added the Github repo as a ‘remote’ to our local git repo. So, let’s push the local code into Github:

git push origin master

 

Final Step: Creating Git Pages

Technique 1: Using the ‘master’ branch
Choose branch for Github Page

Choose branch for Github Page

As we want to display the demo with the thing what we have in our master branch, it’s pretty simple. Get to the Settings page on your Github repository (URL will be something like this: https://github.com/{username}/{repository-name}/settings)

Get to “Github Pages” block and from Source, use the dropdown and choose master branch. Save it. You’re done. 🙂

You are demo site is ready with the files (index.html) from your master branch. You can visit the site using a path like below:

https://{username}.github.io/{repository-name}/

You’re done. 🙂

 

Technique 2: Creating a new branch

If you want to separate your demo site from the master branch, you will need to create another branch. So we will create a new branch here. If you are unaware about how to do git branch, let’s learn from the following Bengali article: (For English article, consult Git Branching and Merging)

গিট দিয়ে ভার্ষন নিয়ন্ত্রণ – git branch

Github pages works with this branch by default, and the name of the branch is pre-defiend gh-pages। So let’s use git bash:

git checkout -b gh-pages

This will create a branch named gh-pages and we are now in that branch. If we understood git branching properly we now know that, what were in branch master is now in our new branch too. That means we have the same index.html from our master branch. We can easily change our index.html as per our choice, and commit here in this branch (in our demo site). Now push the updates with the new branch onto the Github repo:

git push origin gh-pages

It will automatically create our demo site into the following path:

https://{username}.github.io/{repository-name}/

 

Additional Information

  • Branch gh-pages is not mandatory. To display demo site from any branch, you just have to get to the Settings page and choose the branch from where you want to display the demo site.
  • You can even display the demo site using your own URL, like: example.com. Just get to the Custom domain portion, write down your URL http://example.com. But you have to update the domain’s CNAME record toward the page.
  • If you are good enough with static site generator like Jekyll^ you can deploy those sites to Github pages too. Moreover, you can use “Automatic Page Generator” and can create your own one using Markdown syntax.

Conclusion

So, hopefully, from now on, we will see a demo page with your HTML, CSS, JavaScript projects that are hosted for public uses. Don’t miss our demo, what we’ve made for this tutorial: https://mayeenulislam.github.io/tuts-nano-github-pages/

Comment here...