Last time I created a simple Hugo based website, this time, we will deploy it. For free! With TLS!
OK, I am making a couple of assumptions here:
- You already own a domain name (cheap but not free)
- You are hosting your site in a GitHub repo (this is not required, but if you want to follow along, I’m going to use GitHub & Travis-CI)
NOTE: Since writing this I started using Netlify and I’d strongly recommend checking that out!
I hadn’t used Firebase before this; originally, I was going to use GitHub Pages + CloudFlare + LetsEncrypt + a CRON job. That was a lot of moving parts, free but not cheap. Other than reducing the complexity, there are a few other reasons I wanted to try out Firebase:
- Unless you use GitHub’s Jekyll build, you are required to check-in your generated/built artifacts into your
- I didn’t want to have a CRON job running on my laptop to update a certificate for a public site. I would then need to monitor that job, and I know for me, I’d forget about it, and the cert would be invalid.
Firebase is a CDN and can provide a TLS certificate for you (using LetsEncrypt). That leaves us with needing three things: 1. A source repo 1. CI 1. A Firebase account
Just… like any other software project. I’m using Github and Travis-CI.
One last note about Firebase, they have tiered payment plans, I fall well within the free tier.
Validated your Domain
Firebase is part of Google now, so naturally, you can log in with your Google account (or a domain account).
Follow the Add Project wizard to get started.
Next, in the left nav, click Hosting. This will instruct you to install an NPM package and log in.
$ npm install -g firebase-tools
Login (This kicks of a nifty OAuth flow in your browser):
$ firebase login
Initialize the Firebase project:
$ firebase init
Arrow key down to Hosting: Configure and deploy Firebase Hosting sites press Space then Enter. Select the project you created in the Wizard above and press Enter. Use all of the defaults (Press enter a bunch of times)
We haven’t configured our custom domain yet (I’ll get to that). To test the Firebase deployment, you will need to update your Hugo
config.toml’s base URL:
baseURL = "https://<your-project-name>.firebaseapp.com/"
Build and deploy!
$ hugo && firebase deploy
Along the way I did receive a message to login again
$ firebase login --reauth
I’m assuming this was just updating a few OAuth scopes.
https://<your-project-name>.firebaseapp.com/ and you should see your app!
Back in your browser, head back to the Firebase console (you should still be on the Hosting tab). Click the big blue Connect Domain button.
Follow along with this new wizard (you will need to update a DNS TXT record). I’m using a Google Apps managed domain and account, and I still had to do this. This could take a while depending on your current DNS setup (I’m switching providers, and I needed to wait for the changes to propagate)
I stumbled on this for a while because my DNS provider (NameCheap) uses the
@ notation instead of the domain name
example.com directly. After you pass the first validation screen Firebase does tell you to watch out for this…
Generate a API token:
$ firebase login:ci
You will once again be prompted through through browser.
The output will look something like this:
your-key-here Example: firebase deploy --token "$FIREBASE_TOKEN"
language: node_js node_js: - "7" install: - wget https://github.com/gohugoio/hugo/releases/download/v0.34/hugo_0.34_Linux-64bit.tar.gz -O ../hugo.tar.gz - tar -C .. -zxf ../hugo.tar.gz hugo script: - ../hugo
Add it to your travis.yml
travis encrypt "your-key-here"
deploy: provider: firebase skip_cleanup: true token: secure: "<a long string value>"
Set it and Forget it
Okay, maybe not forget, but
git push and let Travis CI take care of the rest!
That is all there is to it!