DocsPipelines for ApplicationsApplication tutorials
Jekyll application: Build and deploy

Jekyll application: Build and deploy


In this tutorial we will go through how to automate the build and deployments of your Jekyll website. We will take the sample Jekyll blog and I will show you how to automate the build and the deployment process.

Before You Begin

To complete this tutorial you will need to have all the requirements to run Jekyll installed on your local machine. Make sure you have Ruby, RubyGems, Nodejs, and Python installed and running the correct versions. Below you can find links for information on how to install each requirement.

You will also need a server to deploy to. I will be deploying the Jekyll website to a DigitalOcean Ubuntu 14.4 cloud server.

Setting Up

To set up your project, you first: install Jekyll, then create & initialize your project, and then check to make sure everything was created correctly.

To install Jekyll enter the following command in your termianl/command line

$ gem install jekyll

The next step is to create your project directory and initialize your Jekyll project. Navigate to where you want to store your files in your terminal and then you can use the following commands

Create your project folder by enter the below commands. mkdir JekyllSite creates a folder from the terminal and then you enter cd JekyllSite to navigate to that folder.

~ $ mkdir JekyllSite
~ $ cd JekyllSite

Intialize Jekyll project by using the command below. This command will create all the necessary files and structure your project automatically.

~/JekyllSite $ jekyll new .

Finally, create a local server to make sure everything was set up correctly. To create the local server, enter the following command

$ jekyll serve

You should see an output similar, if not identical to this

Configuration file: /Users/zack/ws/src/JekyllTutorial/_config.yml
            Source: /Users/zack/ws/src/JekyllTutorial
       Destination: /Users/zack/ws/src/JekyllTutorial/_site
 Incremental build: disabled. Enable with --incremental
                    done in 0.265 seconds.
 Auto-regeneration: enabled for '/Users/zack/ws/src/JekyllTutorial'
Configuration file: /Users/zack/ws/src/JekyllTutorial/_config.yml
    Server address:
  Server running... press ctrl-c to stop.

You should then be able to navigate to localhost:4000/ to see the sample Jekyll Website.

Sample Jekyll Website

Step 1. Make Changes to Jekyll Website (Optional)

To make changes to the settings of our entire site, use the config.yml file. To change or add posts open the _posts/ directory and make your changes there. Please keep in mind that all of your posts should be in Markdown format.

For this tutorial I have made changes only to config.yml, which you can see below.

# Welcome to Jekyll!
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.

# Site settings
title: Jekyll Deployed by Distelli
description: > # this means to ignore newlines until "baseurl:"
 This is a sample Jekyll Static Blog, built and deployed by Distelli!
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site
twitter_username: distelli
github_username:  distelli

# Build settings
markdown: kramdown

Pipelines Jekyll Sample Site

Step 2. Create distelli-manifest.yml

The next step to complete is to create a distelli-manifest.yml file. You will need this file to create a fully automated build and deployment process that is triggered eveytime you commit to your source control. Below are the contents of the file

Note: You will need to replace <-username-> with your Pipelines username & <-app name-> with your Pipelines Application’s Name

<-username->/<-app name->:

    - '_site/'

    - rvm install ruby-2.0.0-p598
    - gem install jekyll
    - gem install html-proofer
    - jekyll build
    - htmlproof ./_site

    - 'if [ -a /etc/nginx ]; then'
    -     echo "NGINX is already installed"
    - else
    -     sudo apt-get install nginx -y
    - fi
    - sudo rm -rf /usr/share/nginx/html/*

    - sudo mv -v _site/* /usr/share/nginx/html/



In this section we are telling Pipelines what to include in our deployment. We want to deploy only the the generated static webstie files, so we tell Pipelines to include the _site directory Jekyll creates during the build process.


The PreRelease section executes during our Build phase. Here we are installing Ruby version 2.0.0 on your build server. Jekyll requires Ruby version 2.0.0 or greater. The next step is to install Jekyll and then after the installation we build our Jekyll Website.


The PreInstall section is executed during the deployment phase. This section contains an installation of NGINX. We install NGINX to serve the pages of our static website. After the installation of NGINX we make sure to clear out any old files from the directory so there are no conflicts with our new files.


The Start section happens at the end of our deployment process. All that is happening in this section is moving our static site files from our Pipelines directory to our NGINX directory, so they can be served.

Step 3. Push Code to Repository

The next step is to push our content into a source control repository. Create a GitHub or BitBucket repository to store your code (I am using a GitHub repository for this tutorial). Create a repository and then push your code to that repository.

For more information on how to create a repository:

Step 4. Create Pipelines Application

If you do not have a Pipelines account, please Sign Up for one now. To create your app in Pipelines, follow these steps:

Click the new application button on your Pipelines account home screen

Create a new Pipelines Application

Name your app and then select the Repository type where you are storing your applications files.

Name Your Pipelines App

After we click the button to connect to our Repository, we then select the appropriate repo that contains your code.

Choose Your Pipelines Repo

Select the appropriate branch for your deployment. I have only a master branch, but you can deploy any branch from your repo!

Choose Your Pipelines Repo's Branch

Build Steps

Note: Make sure you have replaced <-username-> with your Pipelines username & <-app name-> with your Pipelines Application’s Name in your distelli-manifest.yml.

Next Pipelines will ask you set your build steps. You will need to the lower part of the section and check the box that says “Advanced User? Use a distelli-manifest.yml instead of editting your build steps in the app”. Instead of using the Builds Steps, we will use the distelli-manifest.yml we created earlier.

Use your own Pipelines Manifest

The final step is select our Build Image. In this case we are going to select “Distelli Base (Docker)” for our Jekyll Website. Select the “Auto Build” checkbox and the the “Looks good. Start Build!”.

Start Pipelines Build

Now our build should be automatically building. You can watch its progress by navigating to the builds tab on your Pipelines account and clicking on your build.

Step 5. Deploy Application

Now that we have successfully built our application we are ready to deploy to our server. On the builds page select the “New Deployment” button in the right hand corner.

Jekyll Website Pipelines Build

Install Pipelines Agent on Your Server

To be able to deploy your application to your server you will need to install the Pipelines Agent. You will need remote access to your server to complete the installation. Please consult the below information on how to install the Pipelines Agent on your server.

Note: This installation requires root (administrator) permissions.

Linux and macOS X

To install on Linux or macOS X you can use either curl or wget with one of the following syntaxes.

wget example

wget -qO- | sh

curl example

curl -sSL | sh


To install on Windows copy and paste the following powershell command into a command (cmd) window.

powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString(''))" & SET PATH=%PATH%;%ProgramFiles%/Distelli

Complete the Install

To complete the install of the agent, you must issue the /usr/local/bin/distelli agent install command.

/usr/local/bin/distelli agent install
ServerA:~$ <b>wget -qO- | sh</b>
This script requires superuser privileges to install packages
Please enter your password at the sudo prompt

[sudo] password for bmcgehee: 
    Installing Distelli CLI 3.51 for architecture 'Linux-x86_64'...
To install the agent, run:
    sudo /usr/local/bin/distelli agent install
ServerA:~$ <b>sudo /usr/local/bin/distelli agent install</b>
Distelli Email:
    1: User: jdoe
    2: Team: janedoe/TeamJane
Team [2]: <b>1</b>
Server Info:
Starting upstart daemon with name:  dtk-supervise-cc123456787ad94a8d34ac610381242f9ae28bb8

Verify the Install

To validate the agent is installed and working use the /usr/local/bin/distelli agent status command.

Note: This installation requires root (administrator) permissions.

/usr/local/bin/distelli agent status
Distelli Agent (serverA) is Running with id 766b88c8-e925-11e4-ae8b-080027cc07f7

If you would like more information on installing the Pipelines agent, visit Installing the Pipelines Agent.

Deploy your Website

Once you click the button, you should be directed towards Pipelines’s deployment page. The first step is to select the “Deploy a Release” option.

Deploy Pipelines Release

Pipelines will now prompt you to select the application you want to deploy. Please select the application we created earlier in the tutorial. My application is named “JekyllTutorial”.

Select Pipelines Application for Deployment

Then you will be asked to select the release you would like to deploy. For now there should be only one release for deployment.

Choose Your Pipelines Release

The last step in our deployment is to select the environment you wish to deploy in. First you will need to create an environment by enter a name and selecting the “Add Environment” button. Next select the Environment you just created and click “All Done”.

Select Pipelines Deployment Environment

Now Pipelines will ask you to add your server. Click the “Add Servers” button to get started. Select the server you configured earlier in the tutorial and add it to your account. Once you have added your server, you can close the “Add Servers” panel and continue with your deployment. You will see a final option to set your delay between deployments on your servers and a “Start Deployment” button.

Start Your Pipelines Deployment

Click the “Start Deployment” button to begin your deployment. You will redirected to a page where you can view the progress of your deployment. Click the “log” button on the left side to view realtime streaming logs for the deployment.

Pipelines Deployment Successful

And that’s it! You should now be able to point your browser to “http://<-You Server’s IP Address->” and see your Jekyll Website!

Jekyll Website Successful Deployment

And that’s it! You have now set up a Jekyll Website with Coninuous Integraion and Continuous Deployment! Thanks for following along and happy coding!

How helpful was this page?
Puppet sites use proprietary and third-party cookies. By using our sites, you agree to our cookie policy.