Follow Me Icons

 

Follow @KendrickColeman on TwitterConnect on LinkedInWatch My Videos on YouTubeFollow me on FacebookCheck Out My Projects on GitHubStay Up To Date with RSS

Search

BSA 728x90 Center Banner

Use Travis CI to Update Your Website using FTP and Git

After learning how to build websites from scratch using HTML, CSS, and JavaScript (like bourbonpursuit.com and emccode.github.io) I have ventured out of the realm from normal CMS platforms like Wordpress and Joomla. Most of the sites I build are only a few pages and aren't big content monstrosities. I use Sublime as my local editor and use git for version control. But after I make changes and want to make the files live on the site, I have to use normal FTP methods of moving those files to the shared hosting server. This became really confusing if you made changes to lots of files. Plus, it's boring work.

 

What I ideally wanted was a way to automatically update the website from the latest changes in the master branch directly from GitHub. Of course, there are ways to update every single file on the site, but why not just use git version control to figure out what files were added or changed. There are tools out there like git-ftp that could do this, but that requires an extra step from me.

 

I had a few minutes today to finally start implementing and using a continuous integration tool. By default, I decided to use Travis CI because it has native GitHub integration. My immediate gut reaction was to use Travis' FTP file transfer utility. However, there is an issue with the curl command that requires you to specify the filename you want to upload. My use case is for Git to give Travis all the changed/added files and have only those files be uploaded.

 

I asked this question in the EMC {code} Community and Brian gave a good response. So that's where I started.

 

I decided to write a script called deploy.sh that would be called after all "tests" have passed. Here's the thing... this is a plain jane website and there are no tests. So we have to trick Travis CI into thinking we wrote some tests. To make this simple, we are going to make our website into a fake Node.js app. Every Node.js application requires a package.json file that says how to package the Node app. This is where we specify where to run the test. Now, we don't really have any "tests" because I didn't write anything using Phantom.js, so I created a simple test.js file that has a simple console out that does nothing. (gist below)

 

Awesome. Now when Travis tries to run this, all the pieces are in place to think it's a Node.js app and it will run our "tests", which is nothing. After this has succeeded, the deploy.sh file will be ran. This is a bash script that uses a few git commands to figure out if the last commit is a merge, if it is a merge, it grabs the commit that has the changed files. When we grab the commit with the changed files, it loops through them and uploads them to our FTP site. Taadaaa! 

 

Make sure you use Travis encrypted environment variables so you don't put your username and password on github.

 

 

 

Now once it all runs we have something cool to look at in Travis CI. Here's my example.

Related Items