Looking for our Bitbucket add-on?Click here to read about recent Aerobatic changes.

Hugo Continuous Deployment with Bitbucket Pipelines and Aerobatic

Saturday, Feb 4, 2017

Hosting a Hugo site with Aerobatic can be as easy as typing in a couple of commands using the Aerobatic CLI:

[$] hugo new site my-new-hugo-site
[$] cd my-new-hugo-site
[$] cd themes; git clone https://github.com/eliasson/liquorice
[$] hugo -t liquorice
[$] aero create                                           # create the Aerobatic site
[$] hugo --baseURL https://my-new-hugo-site.aerobatic.io  # build the site overriding baseURL
[$] aero deploy -d public                                 # deploy output to Aerobatic

Version v1 deployment complete.
View now at https://hugo-docs-test.aerobatic.io

In the example above, we compiled our site locally and deployed the /public directory to Aerobatic. However, using Bitbucket Pipelines, we can set things up such that we can create new blog posts directly in Bitbucket, and have Bitbucket Pipelines automatically build our Hugo site and deploy a new version to Aerobatic.

Step 1: Create a Bitbucket Repository

First, create a repository in Bitbucket, and then push your hugo site to the newly created repository:

# initialize new git repository
[$] git init

# set up our .gitignore file
[$] echo -e "/public \n/themes \naero-deploy.tar.gz" >> .gitignore

# commit and push code to master branch
[$] git add --all
[$] git commit -m "Initial commit"
[$] git remote add origin git@bitbucket.org:YourUsername/my-new-hugo-site.git
[$] git push -u origin master

Step 2: Configure Bitbucket Pipelines

In your Hugo website’s Bitbucket repo;

  1. Click the Pipelines link in the left nav menu of your Bitbucket repository.
  2. Click the Enable Pipelines button.
  3. On the next screen, leave the default template and click Next.
  4. In the editor, paste in the yaml contents below and click Commit.
image: aerobatic/hugo
pipelines:
  branches:
    master:
      - step:
          script:
            - git clone https://github.com/eliasson/liquorice themes/liquorice
            - hugo --theme=liquorice --baseURL https://!!baseurl!! --buildDrafts
            - aero deploy -d public
---

To make the build as steps as streamlined as possible, there’s a ready-made docker image aerobatic/hugo that already has hugo, aerobatic-cli, and other supporting software all ready to go.

The baseURL of https://!!baseurl!! is a special value that Aerobatic will substitute on the fly with the current website URL. This makes it so the same deployed version can be safely pushed to a different deploy stage and all absolute URLs will auto-correct themselves.

Step 3: Create environment variable

This step only needs to be done once per account. If you haven’t already done this in Bitbucket, from the command line;

[$] aero apikey
  1. Navigate to the Bitbucket account settings for the account that the website repo belongs to.
  2. Scroll down to the bottom of the left nav and click the Environment variables link in the PIPELINES section.
  3. Create a new environment variable called AEROBATIC_API_KEY with the value you got by running the aero apikey command. Be sure to click the Secured checkbox.

Step 4: Edit and Commit Code

Now that we’ve got Bitbucket Pipelines set up, we’re now ready to test that everything is working smoothly.

[$] hugo new post/good-to-great.md
[$] hugo server --buildDrafts -t liquorice #Check that all looks good

# commit and push code to master branch
[$] git add --all
[$] git commit -m "New blog post"
[$] git push -u origin master

Your code will be committed to Bitbucket, Bitbucket Pipelines will run your build, and a new version of your site will be deployed to Aerobatic.

At this point, you can now create and edit blog posts directly in the Bitbucket UI.

Author in Bitbucket

Suggested next steps

The code for this example can be found in this Bitbucket repository. Aerobatic also provides a number of additional plugins such as auth and redirects that you can use for your Hugo site.

Ready to try Aerobatic?

You can have your first website live in 30 seconds!

Get Started for Free