Github is the new open source game changer in application development. You can host your code on GitHub and do amazing things including branching, Reviews, PR, Push and Pull. Github also provides a sophisticated set of options to host and maintain code.
In this article, I will make a complete workflow from pushing the code to automatic deployment to live website or application. For the purpose of this tutorial, I have assumed that you have made a website or web app and that you are ready to push it to GitHub.
Install Git on Local Machine
The first step of the process is the installation of git on the local machine. Git is a well-know code version control system. Developed by the eminent Linus Torvald, Git is an open-source project that ensures that the complete history of the development of the code is meticulously maintained. Download the git installer and install it on the local machine.
Create GitHub Repository
Signup and then login to your GitHub account.
Once logged in, click New Repository button to create a new repository.
Insert repository's name and description, select Public and, finally click Create Repository button.
The repository is now available for further processing.
The next step is to push the code in this repository . For this, navigate to the project saved in your local system and follow the next step.
Pushing Code to the GitHub
For the purpose of this tutorial, I have created a simple website. I will push this project in testdemo repository.
The following commands are used to push the code to the GitHub repository. I assume that you are already in the test project's directory. Next, launch the command prompt.
git init
git init initializes an empty .git folder in the project directory
git add
Running git add . command adds the entire directory to the index. if you want to add only one file then run this command git add <filename>
git commit
This command sends a commit message with new changes in the code.
Type git commit -m “my first commit”
This command will commit all the changes from the staging environment and create a new pointer with a unique hashcode. All commits will be identified by the Unique hash codes.
To see the complete History Of commits run the following command.
git log
you will see all the commits in the list.
git remote add origin
The next step is to add the URL of the GitHub repository in which you want to push the code. Since I have created the testdemo repository, I will use the corresponding link.
Copy the URL and run the following command
git remote add origin https://github.com/shahroznawaz/testdemo.git
This will add the remote URL to the git index and the repository is ready for code deployment.
git push
The final step is to push the code to GitHub. You should also specify the branch name in which you want to push the code. Run the following command:
git push origin master
A sign-in form for GitHub will be open. Enter your GitHub credentials and hit the login button.
Once the processing finishes, the code has been successfully pushed to the GitHub repository. Open GitHub and check the repository.
Working With Branches In Git
Git Provides the playground in the form of branches you can test the code in separate branch and finally merge it to master. Branch is a separate working directory contains it's own staging environment in which you can commit changes and maintain the history. Let's see some of the main commands for branches.
Create Branch
You can create branch by passing a name in the following command
git branch demobranch
Now type git branch you will see demobranch created in the list
You can also Switch between branches by following command.
git checkout <branch name> i.e git checkout demobranch
You will see the Head(*) moves to demobranch.
Clone Your App on Any Hosting
At this point, the application has been successfully pushed to GitHub and the initial configuration on local machines has been done.
Now, I need to host the website on a hosting service so that the automatic deployment feature could be tested. . You could use any hosting platform for testing. Personally, I prefer Cloudways because it is a managed hosting solution. I have already created an account and a PHP application is already active on my server.
Open SSH terminal from server settings and clone the app with following command
git clone https://github.com/shahroznawaz/testdemo.git
Check the staging URL, where you will see the website running live.
Create and Upload github.php File
Here comes the exciting part of the tutorial.
I will now create a github.php file and upload it to the hosted project. Basically I will add a command in the file that will automatically pull the code every time the code is pushed from the local machine. While this looks like magic, the answer lies in a webhook that is added to the GitHub repository.
First, add the following command in github.php file
<?php `git pull`?>
This simple command changes the game. To add the webhook in the github.php, first find the path of the file on the Cloudways server. In my example, the path is:
http://phpstack-21306-56790-176024.cloudwaysapps.com/testdemo/github.php
Copy the path and paste it in GitHub webhook settings.
Add the webhook and go to index.html on the local machine. Make changes to the code and then push the code using the following commands:
git add index.html
git commit -m “edit some code”
git push -u origin master
Check the webhook, and it will show how successful deployment of code looks like.
Quick Summary to Push Code
For people who do not wish to go through the lengthy article above, here is a short summary of the five Push commands:
git init
git add . //(.) is the part of command
git commit -m “my first commit”
git remote add origin https://github.com/shahroznawaz/testdemo.git
git push origin master
You need to enter your GitHub credentials when pushing the code to a repository.
Working With Branches In Git
Git allows you to test various approaches by forming a branch for every idea. Once you are done, you could merge the branches with the master branch. Every branch is a separate working directory with it;s own staging environment in which you can commit changes and maintain the history of the branch. Here are some important commands for branches.
You can create a branch by passing a name in the following command
git branch demobranch
Now type git branch you will see demobranch created in the list
You can also switch between the branches through the following command.
git checkout <branch name>
You will see the Head(*) being moved to demobranch.
Final Words
Though the process of pushing code from the local machine to live website appears very tempting, it often has unintended consequences. There is always a chance that someone on the team will push code that might break the live project. In this case you need to setup branches and then commit the final code to master branch.You can also use the deployment libraries like deploy
Top comments (6)
git push -fin beginners guide?! I am pretty sure, that is not something what people should learn at the beginning if everHi that -f for the forced push otherwise it can be used simple as "git push origin master"
You shouldn't be telling beginners to use force at all.
Thanks I've updated the command.
The PHP code for the GitHub webhook is insecure. Anyone can all it any number of times and bring down your site.
After you've setup the webhook please read developer.github.com/webhooks/secu... and secure your webhook with a secret!
I would also rename github.php to a .php so it's not guessable by attackers, for example using textmechanic.com/text-tools/random... to come up with a filename.
It's quite sad that I could not easily find a gist with a recommended example.
You could use github.com/adnanh/webhook