1. Introduction
  2. Prerequisites
  3. Setting Up Pipeline
  4. Resources

Introduction

Over the past few weeks, I’ve been going over how to set up a Git repository and CI/CD with Drone. Today, I’m going to be going over how I use all these technologies to write and automatically deploy this blog. Is this overcomplicating a simple thing? Most definitely! Could I have just installed Ghost and have been done with my blog set up? Absolutely! However, I wanted to use the simplicity of Hugo but still have things automatically publish. In this setup, I host my Hugo blog on a Gitea repository and use Drone to automatically build and deploy the blog.

Prerequisites

First, you’ll need to have a Git repository service that is supported by Drone. At the time of writing, Drone officially supports GitHub, GitHub Enterprise, BitBucket, BitBucket Server, and Gitea (You can find a complete list here). Personally, I use Gitea (I wrote a post on how to self host Gitea if you want to self-host an instance yourself).

Next, you’ll need a running instance of Drone. It comes in two parts, the Server and the Runners. I detail how to install them in this blog post.. We’re going to use the Drone instance that is already installed to set up a Drone pipeline for Hugo. If you want more general information on what a pipeline is and how to set up a pipeline for Node, I go over this in my last post.

Lastly, a Hugo blog that you want to automate deployment for will be needed. In this example I’m going to start a new one from scratch. I go over how to do so in this blog post.

Setting Up Pipeline

To start setting up the automated deployment for your Hugo website, you’ll need to create a Git repository.

Creat new repository

Once you’ve created the repository, go to the folder of your blog on your local computer and push your blog to the repository:

touch README.md
git add .
git commit -m "Prep for git repository"
git remote add origin https://git.yourdomain.com
git push -u origin master

Now that we have the repository set up, let’s link the repository to Drone. Go to the your Drone server and click activate on the repository you just pushed to. If you don’t see it, you can click the sync button and it should appear.

Next, we must create a .drone.yml file to define how Drone should build and deploy our app. This is the pipeline. First let’s create and open the file for editing:

touch .drone.yml
vim .drone.yml

We can utilize the Hugo plugin for Drone to help build our pipeline. Hit i to start editing and define the pipeline:

kind: pipeline
type: docker
name: default

steps:
- name: fetch submodules (themes)
  image: alpine/git
  commands:
  - git submodule init
  - git submodule update

- name: build
  image: plugins/hugo
  settings:
    hugo_version: 0.72.0
    validate: true
    extended: true

- name: deploy
  image: appleboy/drone-scp
  settings:
    host:
      from_secret: ssh_host
    user:
      from_secret: ssh_user
    key:
      from_secret: ssh_key
    passphrase:
      from_secret: ssh_password
    port: 22
    target:
      from_secret: ssh_target
    source: public/*

trigger:
  branch:
  - master

Type :wq and hit enter to save and exit the file. The first step of the pipeline is to fetch the themes that are added as submodules. If we don’t include this step, your website won’t build correctly if you use a theme from the Hugo themes page. After the themes are downloaded, we tell Drone to build the Hugo website and upload it to the server. The reason we are giving the server settings as secrets is so that we can upload this configuration file onto a public repository. This way you can still let people look at your repository without them knowing information about your server.

To add the secrets, go to the settings page on the Drone server and add them in. ssh_host is the IP/Domain of the server you want to upload your website to. ssh_user is the user of the server that you want to upload as. ssh_key is the private ssh key that is used to access the server as the user you indicated. ssh_password is the password used to authenticate the ssh key. Lastly, ssh_target is the file path where you want the uploaded contents to go. If you’re a little confused about the ssh stuff, check out my last blog post on setting up a pipeline where I go over this in more detail.

In my case, I chose to only trigger builds when I push to the master branch. This is handy in case I want to branch the repository to work on a theme or something.

Now that the pipeline is set up, simply add and push it to your git repository, and Drone should do all the work:

git add .
git push

After you push, the Drone server will read the .drone.yml file, create a task based on the file, and have a runner execute the pipeline. If everything goes smoothly, it should show on the Drone page:

Drone success!

Now you should be able to see the changes on the domain you’re pointing to the server you deployed to!

Resources

  1. Hugo plugin for Drone (http://plugins.drone.io/cbrgm/drone-hugo/)