Using Github Pages to host HTML CSS and Javascript website

I did not know that GitHub offers GitHub Pages that allow members to host a website directly from their GitHub repository. Each member can get one site per GitHub account.

The procedures to host a website using GitHub Pages on Ubuntu Linux:

• Create a repository. Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub. If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

• On my Linux computer, create a directory. For example, html_publish and copy all the HTML, CSS and Javascript of the website file into that directory. My directory structure is:

+--- html_publish/
|    /about.html
|    /blog.html
|    /contact.html
|    /index.html
|    /README.md
|    /services.html
|   +--- css/
|        /bootstrap.min.css
|        /magnific-popup.css
|        /templatemo-style.css
|   +--- font-awesome-4.5.0/
|        /HELP-US-OUT.txt
|       +--- css/
|            /font-awesome.min.css
|       +--- fonts/
|            /FontAwesome.otf
|            /fontawesome-webfont.eot
|            /fontawesome-webfont.svg
|            /fontawesome-webfont.ttf
|            /fontawesome-webfont.woff
|            /fontawesome-webfont.woff2
|   +--- img/
|        /img-11-01.jpg
|        /img-11-02.jpg
|        /img-11-03.jpg
|        /img-11-04.jpg
|        /img-11-05.jpg
|        /img-11-06.jpg
|        /img-11-07.jpg
|        /img-11-08.jpg
|        /img-21-01.jpg
|        /img-21-01.jpg
|        /img-21-02.jpg
|        /img-21-03.jpg
|        /img-21-04.jpg
|        /img-21-05.jpg
|        /img-21-06.jpg
|        /logo-bg.jpg
|   +--- js/
|        /bootstrap.min.js
|        /jquery-1.11.3.min.js
|        /jquery.magnific-popup.min.js

• Then, I used Linux shell terminal to create a README.md file, initialized a Git repository, added all untracked files, committed the changes, set remote GitHub push fetch URL locations, and pushed the files to GitHub. This is what I did:

cd html_publish

echo "# jimmy2046.github.io" >> README.md
git init
git add README.md
git commit -m "first commit"

git add -A
git commit -m "added all html css images javascript files"

git remote add origin https://github.com/jimmy2046/jimmy2046.github.io.git
git push -u origin master

• This is a more reader friendly version of Git shell commands. Please replace username with your GitHub username.

cd html_publish

echo "# username.github.io" >> README.md
git init
git add README.md
git commit -m "first commit"

git add -A
git commit -m "added all html css images javascript files"

git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

• And the website is done. In Firefox or your favorite browser, I type: https://jimmy2046.github.io/. You type https://username.github.io/

 

• GitHub Pages support all functionalities of CSS and Javascript. It allows me to have total freedom and flexibility of website design.  The speed of the GitHub server is extremely fast. Fantastic.

References:
GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
https://pages.github.com/

Finally, a Guide to Hosting Your Website
https://www.jonhmchan.com/blog/2014/4/28/finally-a-guide-to-hosting-your-website

Author's GitHub Pages (under construction)
https://jimmy2046.github.io/index.html