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 }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s