Hugo Continuous Deployment with Bitbucket Pipelines and Aerobatic
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.aerobaticapp.com # build the site overriding baseURL aero deploy -d public # deploy output to Aerobatic Version v1 deployment complete. View now at https://hugo-docs-test.aerobaticapp.com
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 firstname.lastname@example.org:YourUsername/my-new-hugo-site.git git push -u origin master
Step 2: Configure Bitbucket Pipelines
In your Hugo website's Bitbucket repo;
- Click the Pipelines link in the left nav menu of your Bitbucket repository.
- Click the Enable Pipelines button.
- On the next screen, leave the default template and click Next.
- 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
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;
- Navigate to the Bitbucket account settings for the account that the website repo belongs to.
- Scroll down to the bottom of the left nav and click the Environment variables link in the PIPELINES section.
- Create a new environment variable called
AEROBATIC_API_KEYwith the value you got by running the
aero apikeycommand. 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.