Deploy a hexo blog from Github using Travis

Straightening a lot of things out at the moment I got stuck with my blog.

This should be about the fourth blog I have run in my life. And so far the longest standing one. Mainly thanks to my stay in China. And it has gone through multiple stops so far.

First it was a Wordpress powered blog hosted on my webspace at der-grüne-baum.net. That rapidly turned into a maintenance nightmare of "Wordpress needs a security update". So in September of 2015 I took a look around for alternatives and found Hexo. A Node based static blog generator. Technology wise totally my thing and static means pure HTML files without so much security stuff going on. So I switched to Hexo at first uploading by hand via FTP.
Last year while I stayed in China the manual upload didn't work so great anymore. The connection just didn't take it. So I moved my blog to GitLab. They had native support for Hexo based sites. I never managed to get the domain moved to there however. So now in 2017 I set out to go for the new domain hoverbaum.net and have it there.

I wanted to still use Git but have things under my own domain. Since I couldn't find the A record thingy for my domain withing a few minutes I decided that it should be possible to upload to my webspace via FTP through some continuous integration. So here is how to do that.

# FTP deploy Hexo based site using Travis-ci.org
# https://gist.github.com/HoverBaum/524528aec1032b29669fe9cc82dba066
#
# 1. Copy this file to the root of your repository, then rename it to '.travis.yml'
# 2. Replace 'YOUR NAME' and 'YOUR EMAIL'
# 3. Create "Environment Variables" in travis. Make sure to not show them in the output.
#     - FTP_USER: The username for FTP transfer.
#     - FTP_PASSWORD: Password for the user.
# 4. Replace "DOMAIN.TLD" with your FTP domain and maybe the path where to put things.
#
# This should also work with other static site generators. Just replace hexo
# with your generator.

language: node_js

node_js:
- "6"

# Only build the master branch.
branches:
  only:
  - master

before_install:
- npm install -g hexo

install:
- npm install

# Notice: Replace 'YOUR NAME' and 'YOUR EMAIL'.
before_script:
- git config --global user.name 'YOUR NAME'
- git config --global user.email 'YOUR EMAIL'

# Generate static files.
script:
- hexo generate

# Upload site using FTP.
# -exec must be closed with ";" which must be escaped (hence the "s).
# Finds all files and calls curl to upload them for every file.
after_success:
'find public -type f -exec curl -u $FTP_USER:$FTP_PASSWORD --ftp-create-dirs -T {} ftp://DOMAIN.TLD/{} ";"'

Let me tell you a few things I learned during the afternoon of setting this up.

Travis has a page about Custom deployment and that already mentions the use for curl to upload a file via FTP. Now we don't want to only upload a single file but a bunch of files. Namely the entire public folder which contains the generated site.

Some googling brought me to Stackoverflow where I learned that you can use find to get all files and use the -exec command to do something with each file. However the -exec must be closed with a ";" which typically gets escaped using ";". But that doesn't work for YML. I got around this by escaping it using "s instead which means I had to change the surrounding "s to 's.

Looking further at the last line the $FTP_USER and $FTP_PASSWORD are straight forward environment variables. Those should be configured in Travis and be set to not show during runtime. Or else other people will be able to get username and password for your server. Lastly the weird {} parts are referencing the original path of a file. This leads to everything being uploaded to yourFolder/public/FILES. I couldn't get that the upload to yourFolder/FILES so I changed where my domain pointed. You can't have everything be perfect.

Feel free to use my travis.yml file. Make sure to follow the steps in the comments up top.

---

Originally posted on hoverbaum.net on April 18, 2017.