How this Hexo website is build and deployed ?

Posted on Edited on In , , ,
How this Hexo website is deployed using Docker, Caddy, docker-caddy-proxy thanks to Ansible

Ansible deploying Hexo blog with Docker

This article is available in French

This website is built with the blog framework Hexo and the elegant theme NexT.
Nothing very exceptional for now… 🥸

Let see the server maintenance and the site deployment in-depth.

🔗Building Asymptote Pages/Posts

All the Asymptote pages and the Asymptote posts comes from the extensive examples’ Asymptote codes and are auto-generated by the the Asymptote exemples builder.
Once the Hexo markdown files are generated, a rsync synchronisation is done through this basic script.

With this organization, all projects around Asymptote are separated by concept with their own meaning, their own perimeter of use, and their specific functioning.

🔗Generating HTML With Docker

The deployment start by generating the static html files though a NodeJS Dockerfile and a docker-compose.yml so that the command make generate does all the job to generate all the static html files.

🔗Serving By Caddy

Next step to deploy the blog is done by serving the html static files with a Caddy web server instance in a simple Caddy Dockerfile though the same docker-compose.yml so that the command make serve does all the job.
The port 4280 is defined by the environment variable SERVER_PORT and you can see the Caddyfile used for my Hexo blog.

However, it’s not enough to serve the blog in a Docker container on the port 4280, the blog must be available on the ports 80 and 443 for the domain bolg.piprime.fr !

🔗Proxying 443 to 4280 With Caddy-Docker-Proxy

On the host machine, we want to serve multiple webservice on port 80 and 443, not on the port 4280.
In order to archive this, I use a Caddy Docker Proxy and the following Docker configuration :

1
2
3
4
5
networks:
   - caddy
labels:
   caddy_0: blog.piprime.fr
   caddy_0.reverse_proxy: "{{upstreams ${SERVER_PORT}}}"

and, in order to temporarily redirect www.piprime.fr to the blog, the next lines :

1
2
caddy_1: www.piprime.fr
caddy_1.redir: "https://blog.piprime.fr{uri} temporary"

Although the command make deploy-caddy-docker-proxy archive all the deployment process of this blog, I don’t want to remember where to clone the project, how update it, and what are the software to be installed on the host (git, make, Docker globally on the host machine).

🔗Deploying/Maintaining With Ansible

When it’s needed to use a new server instance, for any reason whatsoever, it’s a huge pain to install all the software dependencies, make all the configurations and proceed to all the deployment process for all the services.
Even to update the blog, I’m tired to connect though ssh, go to the good directory, remember the command to launch and ensure all was done correctly without missing a magic command hidden under bundles.

In order to automatize all the server installation, update and maintenance, I’ve chosen the Ansible software.
My Ansible configuration is so secure that I’m confidant to share it !

About this blog, the only thing to do and remember is to launch the command make piprimefr-blog ; this will ensure that most needed software are installed, properly configured and this will clone the blog or or update it if it’s needed.

  • To install a new server instance or to update it, the only command to launch is make all !
  • You can take a look to the main Ansible task to deploy this Hexo blog.

🔗Conclusion

This blog is partiality built by an automate tool (Asymptote pages and posts), served by a dockerized Caddy webserver instance herself proxyfied by Caddy Docker Proxy.
All the server maintenance and blog deployment is done though the automation engine Ansible.