Two ways to create a Live Demo for your GitHub project

Diego Lira
2 min readJul 13, 2020

How to create a live demo for your HTML and CSS projects hosted on Github? Let’s see two simple ways to create it with no hassle.

Githack

  1. Navigate to Githack.com;
  2. Copy-paste your repository URL to it;
  3. Select the “Use this URL for development” to copy the URL and that’s it, just share it or add it to you readme file;

You can also replace the following URL with your own data and create your live demo:

https://raw.githack.com/yourUserName/yourRepository/yourBranch/index.html

Github Pages

  1. On your repository page go to Settings;

2. Scroll down until the Github Pages section (you need to have admin privileges );

3. Click on ‘None’ to show options and then select ‘master’ as your branch for Github Pages;

4. That’s all. Your project is live!

GitHub Pages creates a URL for your project

Bonus tip: Using the following syntax [Links name](linkurl) you will get a nice effect on your Readme file as shown below

🔗 Mint's Sign up page](https://raw.githack.com/lirad/html-forms/features/index.html

Creating a link on Github Readme file

Both methods are fairly easily, on my personal Github account I was not able to select other branches in my repository to serve as a source for Github pages, that is when Githack was very helpful.

What is your favorite method? Can you share other ways on how to do it?

--

--