My Deployment Process


#1

Hi,

Over Christmas I started using CircleCI to deploy Hugo to Amazon S3 instead of juggling multiple repositories with GitHub Pages (and also to gain HTTPS). This weekend I setup a site using Pygments and also got the scripts to handle Hugo version upgrades.

I’m planning to write a step-by-step blog post for newbies, but right now I’m just looking for feedback . Can I make any improvements to this setup? Particularly with my bash scripts, as I’ve just been learning bash scripting as I go along.

An example deployment site is on GitHub, but I’ve also included the relevant scripts with this post.

Deployment Scripts

circle.yml

machine:
  environment:
    CIRCLE_BUILD_DIR: $HOME/$CIRCLE_PROJECT_REPONAME
    PATH: $PATH:$CIRCLE_BUILD_DIR/bin
  post:
    - mkdir -p $CIRCLE_BUILD_DIR/bin

dependencies:
  pre:
    - bash ./ci-install-sassc.sh
    - bash ./ci-install-hugo.sh
    - go get -v github.com/nathany/s3up
  cache_directories:
    - bin

test:
  pre:
    - pygmentize -V
  override:
    - sassc sass/all.sass static/css/all.css --style compressed
    - hugo -v
  post:
    - if [ $CIRCLE_BRANCH == 'master' ]; then s3up -source=public/ -bucket=$BUCKET -key=$AWS_ACCESS_KEY_ID -secret=$AWS_SECRET_ACCESS_KEY ; fi

ci-install-sassc.sh

SASS_VERSION=3.1.0

set -x
set -e

# Install SassC if not already cached or upgrade an old version.
if [ ! -e $CIRCLE_BUILD_DIR/bin/sassc ] || ! [[ `sassc -v` =~ "sassc: ${SASS_VERSION}" ]]; then
  export SASS_BUILD_DIR=$HOME/src/github.com/sass
  mkdir -p $SASS_BUILD_DIR
  cd $SASS_BUILD_DIR

  git clone --recursive https://github.com/sass/libsass.git -b ${SASS_VERSION}
  git clone https://github.com/sass/sassc.git -b ${SASS_VERSION}

  cd sassc
  SASS_LIBSASS_PATH=$SASS_BUILD_DIR/libsass make

  cp $SASS_BUILD_DIR/sassc/bin/sassc $CIRCLE_BUILD_DIR/bin/sassc
fi

ci-install-hugo.sh

HUGO_VERSION=0.13

set -x
set -e

# Install Hugo if not already cached or upgrade an old version.
if [ ! -e $CIRCLE_BUILD_DIR/bin/hugo ] || ! [[ `hugo version` =~ v${HUGO_VERSION} ]]; then
  wget https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_linux_amd64.tar.gz
  tar xvzf hugo_${HUGO_VERSION}_linux_amd64.tar.gz
  cp hugo_${HUGO_VERSION}_linux_amd64/hugo_${HUGO_VERSION}_linux_amd64 $CIRCLE_BUILD_DIR/bin/hugo
fi

s3up

The tool I use to copy files up to s3 is custom built. It’s called s3up:

Local Development

For local development I’m currently using Reflex as SassC doesn’t have watching built in:

watch.sh

# watch Sass and Hugo files during development
reflex -r '\.(sass|scss)$' -- sh -c 'sassc sass/all.sass static/css/all.css --style compressed' &
hugo server -D --watch && fg

Thanks, Nathan.


Git push to Bitbucket and your Hugo site is live (using Wercker)
#2

@nathany Thanks for this! I’ve tested your script to download hugo for a project I’m working on and it works great.

I’m not sure what the proper way to deploy Hugo on CircleCI, but this seems like a properly good way to do so. I look forward to the blog post on this, so I can point people there that have questions about doing this same thing.

Thanks again!


#3

Glad it was helpful.

Yah, I really need to write that blog post. I’m still debating whether to keep my current setup or alter it slightly (CloudFront vs. CloudFlare, S3 vs. Google Cloud Storage).


#4

Let us know about the conclusion – and the arguments for doing so; I have some stuff on Amazon now, but I’m not married to them …