Jekyll is a static site generator based on Ruby. Scalingo is a hosting provider (similar to Heroku, Platform-as-a-Service). One of the great things about Scalingo is that they are an European company with a data center in France.
At Ravioli, we're moving all our apps to EU-based hosting providers to ensure the privacy of customers. This is necessary because the USA has very lax privacy laws, and it's easy for the US government to access customer data that is residing on data centers owned or operated by US legal entities. So, even if you host your app on AWS's Frankfurt server, you compromise your users' privacy.
If you're still reading this after my privacy detour, thanks! Let's get to the juicy part.
Scalingo doesn't offer a native way to serve static applications such as Jekyll or Hugo. Rather, they recommend that you run an Express server that serves the static assets.
Sounds easy enough. Why do we need a wordy blog post for this?
Because there are two gotchas which make deploying your Jekyll site not that straight-forward. The good news is that I have the solution right here for you.
Like Heroku, Scalingo works with buildpacks. Buildpacks tell Scalingo which environment to install before deploying and running your app. We are basically running an Express app that just serves the static files generated by Jekyll. Therefore, we need to choose the nodejs
buildpack.
When you do that, you'll quickly realize that your build fails. The reason is simple: The nodejs
build pack doesn't include Ruby, but before deploying we need Ruby to generate the static files for our website. The Jekyll command for that is bundle exec jekyll build
.
Of course, we could run the command before and check in the static build output (usually the _site
folder) to our version control. But this would be a major pain in the ass.
We need a buildpack that somehow contains Node and Ruby. It's our lucky day! Scalingo offers Multi Buildpacks. To combine multiple build packs, add a file called .buildpacks
to your root with this content:
https://github.com/Scalingo/ruby-buildpack
https://github.com/Scalingo/nodejs-buildpack.git
The order is important. The nodejs
buildpack needs to come last, because we're deploying a Node application.
Our package.json
should look like this:
{
"scripts": {
"start": "node server.js",
"build": "bundle exec jekyll build"
},
"dependencies": {
"express": "^4.18.2"
}
}
The nodejs
buildpack runs the build
task before deploying. That's where we build our Jekyll static files. And then it uses the start
task to run the Express server.
Speaking of Express, our second gotcha comes to mind. In their documentation, Scalingo suggests this setup for server.js
:
var express = require('express');
var app = express();
var directory = '/' + (process.env.STATIC_DIR || 'dist')
app.use(express.static(__dirname + directory));
var port = process.env.PORT || 3000;
app.listen(port, function () {
console.log('Listening on', port);
});
With Jekyll, this works ok for the index page, but not for any other page. That's because it expects the .html
extension. So, /about
won't work, but /about.html
will. But that's a bit too 1995 for me. Fortunately, a simple modification to server.js
fixes this problem:
app.use(express.static(__dirname + directory), { extensions:['html'] });
That's it. Using an Express server and leveraging Scalingo's Multi Buildpacks, you should be able to deploy any static website on Scalingo.
This static website that you're reading is generated with Hugo and ironically still runs on Netlify. I'll make sure to migrate it over to Scalingo one of these days.
Top comments (0)