Deploy your project using TravisCI and a shared hosting in 5 minutes (Namecheap)

If you reached this article, chances are you want to deploy your project using a continuous integration like The most common and free tool around is definitely TravisCI. This will allow you to handle everything using only Git and automate the upload process to your FTP. This is what exactly I’ve done for this theme and the styleguide.

In my case I wanted to use my Namecheap hosting service, since I’d already a WP project (this one) using PHP, which meant could not be used Github, plus I wanted to use the subdomain to create parallel projects.

The following steps are taking example from a setup of a Hugo website.

Create FTP user for your project

Since you dont want to mess around with all your files and need margin of security, you will need to create credentials with restricted permission.

To do so you can access to your Cpanel and create one for the case using FTP Accounts, as follow:
namecheap cpanel

In Directory you will have to remember to write the exact path, including the directory of your project, to avoid issues. Also you have to remember to have SSL and write permission enabled.
Whenever you could not do it alone, you can always contact the support.

 

Preparing Travis CI process

After creating a free account to TravisCI here, you will have the possibility to link it to your Git account and fetch the project you want to automate.

This will give you also the chance to create some variables to hide your sensible information from the repository, such like user and password for your FTP.

 

Copy build to your shared host

If you are creating a configuration from scratch, you can look the example I’m using here.

Whenever you already have a travis.yml file with your deployment, just add this snippet at the bottom or below other scripts in after_success:

after_success:
 - set -e
 - sudo apt-get install -y lftp
 - lftp -c "set ftps:initial-prot ''; set ftp:ssl-force true; set ftp:ssl-protect-data true; set ssl:verify-certificate false; open ftp://$FTP_USER:$FTP_PASS@$FTP_HOST:21; mirror -eRv $FTP_DIR .; quit;"

Then add the variables secured inside the snippet, which can be reused for all the projects.
$FTP_USER and $FTP_PASS: will be the credentials with restricted permission you created to copy the file for this project only.

$FTP_HOST is the address you use to connect usually with you FTP, which has been reported after your registration, in case you missed it 😉

$FTP_DIR will be the directory Travis CI image with the built project, eg: /home/travis/build/your_username/your_project_name/

 

Excluding packages and dev files

Another important part to keep in mind, especially since we deal with the slow FTP, is to exclude the files and folder you do not need. Usually the most commons are the node and all the files starting with a dot.

Extending the command for LFTP we used above, we can just add as follow:

 - lftp -c "set ftps:initial-prot ''; set ftp:ssl-force true; set ftp:ssl-protect-data true; set ssl:verify-certificate false; open ftp://$FTP_USER:$FTP_PASS@$FTP_HOST:21; mirror -eRv -x ^\. -x node_modules/ $FTP_DIR .; quit;"

As you can see we used the command -x to exclude followed by a Regex rule, -x ^\. for everything which start with a dot, -x node_modules/ for the node folder.

 

Adding codecov

If you want to integrate your testing tools (e.g. Jest or Karma) with codecov inside your TravisCI build, you can simply add the command as reported in their doc.

Related content: