Utilizing GitHub - Launching Websites In 24hrs - FREE
“GitHub is the largest code host on the planet with over 14.1 million repositories. Large or small, every repository comes with the same powerful tools. These tools are open to the community for public projects and secure for private projects.”
Start A New Account
A GitHub account will be your guide into the world of code and Internet possibilities by giving you access to the world’s largest collection of open repositories you can use, share, branch and fork.
Now that you have signed up for a new account it’s time to start building our new websites
The first step to using GitHub is to download the client.
Windows https://windows.github.com/
Mac https://mac.github.com/
Setup A New Repository
To launch a new website we first have to setup a new GitHub repository, so we can host our project files.
If you are not familiar with the terms like “repository, branching or forks” don’t worry! I promise you it will all make sense faster then you think.
I setup my repository with the name Warrior Forum, added a README file and licensed it under MIT, which means you can find the project at https://github.com/KamesCG/warrior-forum/tree/gh-pages and view the project page at https://kamescg.github.io/warrior-forum
Extra Resources & Information
https://help.github.com/articles/set-up-git
https://help.github.com/articles/create-a-repo
https://help.github.com/articles/fork-a-repo
Edit The Read Me File
The README.md file contains the project’s description: who, what, why, where and how.
Editing the Read Me isn’t essential to launch a new project page, but if this is your first time creating a repository I recommend playing with the README.md file that was automatically generated — to become familiar with the GitHub interface and to learn how you can edit files directly in the browser.
Understanding Branches
We’re focusing on how we can launch a new a website in 24 hours or less, so the only files that we’re going to keep in the master branch are the Read Me and License files.
Normally GitHub is used to store a project’s codebase, which means the master branch is used to store production-ready code.
Required Branches
master: The master branch used to host the projects latest code release.
gh-pages: The gh-pages branch is used to store the project page files; HTML, CSS and Javascript.
Creating A New Branch
GitHub at the core is a code development tool-set for developers to be able to collaboratively work on code together, so one of the primary feature is being able to branch projects — Giving every contributor the ability to work on projects in a local environment, then generate pull-requests to upload code back into an existing or new branch: master, sandbox, gh-pages, etc…
To use GitHub as free hosting service we have to create a branch called “gh-pages”. The branch will host the project’s HTML, CSS and Javascript files.
When you create a new project branch and name it gh-pages it tells GitHub “Hey GitHub! Look at the files located in this project branch and render the html, css and javascript files for the world to see when we enter the project URL”
Even components like online forms and commenting can be done if the website utilizes third party plugins like Wufoo or Disqus to handle non-native database features.
Clone The Repository
To start building our new website we have to create a local version of the project on our computers. Where we can add, edit and modify the HTML, CSS and Javascript files.
Click “Clone in Desktop” to save a copy of the repository onto your local computer.
Double check to make sure you’re editing the gh-pages branch in the GitHub client and not the master branch.*
All of the project files are tracked using Git magic, which means only the branch you’re currently working on shows up in the folder where the project is located, so you can’t view both the master and gh-pages branch at the same time — choose one or the other.
Select A Template
Now that have a copy of the repository on our local computer with two branches — master and gh-pages — we’re ready to select a template and start crafting our new website.
1. Download a copy of the template.
2. Copy the template into the project repository branch gh-pages.
3. Edit the the HTML, CSS and Javascript files.
I decided to pick a template from BlackTie Co called Instant, because I think the template is simple, looks great and is perfect for demonstration purposes because it’s simple a portfolio website.
Once we’re happy with our new website we sync the project with GitHub using the GitHub Client.
Enter a short-blurb to describe the what changes you made made, commit the changes, than sync the project with GitHub.
When I enter the URL Warrior Forum - Building A Website Using GitHub it brings me to my new project page…Success!
I decide to change the Hero area content from “Hello People, My Name is Paul Silva — Web Designer, Developer & Game Addict” to “Hello Warriors, My Name is Kames CG — I write tutorials for Warrior Forum Members!”, edited the style.css file to change the link colors and changed the background image from a black & white forest to an image of me conquering my local hill!
Let The Journey Begin
You now have the knowledge to start building project pages for free and in less then 24 hours! Feels awesome doesn’t it?!
Start A New Account
A GitHub account will be your guide into the world of code and Internet possibilities by giving you access to the world’s largest collection of open repositories you can use, share, branch and fork.
Now that you have signed up for a new account it’s time to start building our new websites
The first step to using GitHub is to download the client.
Windows https://windows.github.com/
Mac https://mac.github.com/
Setup A New Repository
To launch a new website we first have to setup a new GitHub repository, so we can host our project files.
If you are not familiar with the terms like “repository, branching or forks” don’t worry! I promise you it will all make sense faster then you think.
I setup my repository with the name Warrior Forum, added a README file and licensed it under MIT, which means you can find the project at https://github.com/KamesCG/warrior-forum/tree/gh-pages and view the project page at https://kamescg.github.io/warrior-forum
Extra Resources & Information
https://help.github.com/articles/set-up-git
https://help.github.com/articles/create-a-repo
https://help.github.com/articles/fork-a-repo
Edit The Read Me File
The README.md file contains the project’s description: who, what, why, where and how.
Editing the Read Me isn’t essential to launch a new project page, but if this is your first time creating a repository I recommend playing with the README.md file that was automatically generated — to become familiar with the GitHub interface and to learn how you can edit files directly in the browser.
Understanding Branches
We’re focusing on how we can launch a new a website in 24 hours or less, so the only files that we’re going to keep in the master branch are the Read Me and License files.
Normally GitHub is used to store a project’s codebase, which means the master branch is used to store production-ready code.
Required Branches
master: The master branch used to host the projects latest code release.
gh-pages: The gh-pages branch is used to store the project page files; HTML, CSS and Javascript.
Creating A New Branch
GitHub at the core is a code development tool-set for developers to be able to collaboratively work on code together, so one of the primary feature is being able to branch projects — Giving every contributor the ability to work on projects in a local environment, then generate pull-requests to upload code back into an existing or new branch: master, sandbox, gh-pages, etc…
To use GitHub as free hosting service we have to create a branch called “gh-pages”. The branch will host the project’s HTML, CSS and Javascript files.
When you create a new project branch and name it gh-pages it tells GitHub “Hey GitHub! Look at the files located in this project branch and render the html, css and javascript files for the world to see when we enter the project URL”
Even components like online forms and commenting can be done if the website utilizes third party plugins like Wufoo or Disqus to handle non-native database features.
Clone The Repository
To start building our new website we have to create a local version of the project on our computers. Where we can add, edit and modify the HTML, CSS and Javascript files.
Click “Clone in Desktop” to save a copy of the repository onto your local computer.
Double check to make sure you’re editing the gh-pages branch in the GitHub client and not the master branch.*
All of the project files are tracked using Git magic, which means only the branch you’re currently working on shows up in the folder where the project is located, so you can’t view both the master and gh-pages branch at the same time — choose one or the other.
Select A Template
Now that have a copy of the repository on our local computer with two branches — master and gh-pages — we’re ready to select a template and start crafting our new website.
1. Download a copy of the template.
2. Copy the template into the project repository branch gh-pages.
3. Edit the the HTML, CSS and Javascript files.
I decided to pick a template from BlackTie Co called Instant, because I think the template is simple, looks great and is perfect for demonstration purposes because it’s simple a portfolio website.
Once we’re happy with our new website we sync the project with GitHub using the GitHub Client.
Enter a short-blurb to describe the what changes you made made, commit the changes, than sync the project with GitHub.
When I enter the URL Warrior Forum - Building A Website Using GitHub it brings me to my new project page…Success!
I decide to change the Hero area content from “Hello People, My Name is Paul Silva — Web Designer, Developer & Game Addict” to “Hello Warriors, My Name is Kames CG — I write tutorials for Warrior Forum Members!”, edited the style.css file to change the link colors and changed the background image from a black & white forest to an image of me conquering my local hill!
Let The Journey Begin
You now have the knowledge to start building project pages for free and in less then 24 hours! Feels awesome doesn’t it?!