Quick tip: hosting HTML/CSS/JS demos from source code on GitHub Pages

Did you know that you can host HTML/CSS/JS demos with execution and source code display on GitHub? All you need is a few include commands in a markdown file and your html/css/js files in a folder. Try it out here: https://codepo8.github.io/code-hosting-demo/example/ See the source here: https://codepo8.github.io/code-hosting-demo/example/index.md

# My Code Demo
## Try it out
## HTML
`​``html
`​``
## JavaScript
`​``javascript
​`​``
## CSS
`​``css
`​``

How to do it

You can start by forking this example repo. In order to see the demos being rendered, you need to turn on GitHub pages and the build process:

  1. Go to the settings of the repository and go to pages in the secondary navigation:

the settings of the repository link in the main navigation and the pages link in the secondary navigation

  1. Select Deploy from a branch under Build and deployment, choose the main branch and the root folder and press save.

The Github pages screen with the sections highlighted you should interact with This triggers the build of the page.

  1. Check the Actions tab of the main navigation to see the page being built.

Actions tab showing a running build of GitHub pages Whilst building this shows a yellow animated dot. When it is done it turns into a green check mark. If there are some issues it will show an error icon and explain what went wrong. Once it is in the green, your changes are live.

  1. When the page is done building you can see in the Pages section that it has been deployed.

Github pages section with successfully deployed page information Your page is now available on the web as an HTML/CSS/JS capable environment. For example, this one is at https://codepo8.github.io/code-hosting-demo/. The structure is https://{​{user}​}.github.io/{​{repository_name}​}/ and comes from the repository URL at https://github.com/{​{user}​}/{​{repository_name}​}. The next step will be to style the paged differently to what GitHub shows them as. Stay tuned for part 2.