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 }
