Github Pages tutorial and exploration!

What is Github Pages

Github allows free and easy hosting for users to create an html page to represent users, organization and projects. All you have to do is upload your files through version control (git) and Github will serve your html, css and js – all static assets*.

How do you create a github page?

Step 1: Create a repo

Simply create a github repo called <username>.github.io.

My username is theptrk so I created the repo theptrk.github.io.

* Here are the command line instructions on your Mac:

curl -u <user_name> \ https://api.github.com/user/repos \ -d "{\"name\": \"<repo_name>\"}"

Step 2: Upload your index.html

Github will serve your index.html page by default so create this and git push

This is the most simple way to create an html page

$ echo "Hello world!" > index.html

Step 3: Push your files to github

$ git add index.html

$ git commit -m "My first commit"

$ git push origin master

Visit your new Github webpage!

url: <username>.github.io

Mine is located at https://theptrk.github.io

What next?

Note that all your files are completely accessible at this path.

So if you create a javascript file called kale.js, you can access it with

https://your_username.github.io/kale.js and your index.html.

Exploration

Github will serve your static assets.

Will github serve text files?

Yes! I’m serving an entire copy of the Autobiography of Benjamin Franklin here

Will github serve css and javascript?

Yes! Add css files to your repo and reference them in index.html.

On most major browsers, you may even have module support like this:

|- index.html
|  <!DOCTYPE html>
|    Hello World
|    < script type="module" src="kale/index.mjs"></script>
|  </html>
|- mjs/
  |
  |- index.mjs
  |    import { hello } from './hello.mjs'
  |    hello()
  |
  |- hello.mjs
  |    function hello() {
  |      console.log('hello modules!');
  |    }
  |    export { hello }