Deploy static html website from GitHub repository to the FTP server using CircleCI

,

Hi! Today we’re going to automate publishing static website process using github and CircleCI! No more manual/inconsistent FTP uploads!

What do we need:

  1. CircleCI account  (it’s free with 1.500 build minutes / month, which is enough for average user)
  2. GitHub account with your website in repository

After creating and pushing our project to the repository we need to create a CircleCI project. To do so, we need to go Projects -> Add project and select Setup project in the row with your repository. The next step is to create one directory .circleci (the dot at the beginning is important!)  with two files inside: config.yml and deploy.js.

Before running our deploy make sure to have ftp-deploy npm package present in your main package.json file.  To install simply type: npm install -D ftp-deploy.

In config.yml we have to define jobs that will be launched when we make a push to our repository:

  1. get the newest code
  2. run npm install to make sure all dependencies are present (ftp-deploy!)
  3. run gulp build task using npx. I’m using my starterkit – you can download it here: https://github.com/maciejkorsan/frontendkickstarter. It has support for SASS, ES6, live reloading and configured CircleCI integration described in this post. *
  4. run deploy.js script

 * It’s not mandatory to have a task runner – you can skip this step and use existing static files from the repository

To run our deploy job only on the master branch we have to define  filter in workflows section in the config.yml file.

So here we have our deployment script. To make it more secure, we are not storing credentials in files, but in environment variables on CircleCI. You have to set it manually by going to project settings -> environment variables and adding these three values:

  • FTPHOST
  • FTPUSERNAME
  • FTPPASS

You can also set the local and remote root in deploy.js file. I suggest to create a separate FTP user on your server that will have access only to the public_html directory of your website. The script is copying files from the dist/ directory to the FTPs root using credentials from env.

That’s all! After pushing changes to the repository you should see your build process running:

If you done everything well you should see your updated files on the server.

That’s all! If you have any questions – feel free to ask them in the comments section below!



Having a nice project to code?

pawel@polarbits.co // +48 606 115 330