Firstly welcome, I'm going to talk through how I've come about making this blog and the processes involved.
Many times I've wanted to start and continue making a blog but either life or the process has gotten in the way. My main focus is a secure static HTML artifact, along with an easy to use Content Management System (CMS). Which provides the usual enriched content options (images, videos etc) but with code snippet inclusion which can be any programming language.
I wanted to keep the CMS virtual machine privately accessible from my home network, then make use of my already existing Jenkins CI/CD virtual machine. This would allow me to communicate with the CMS and then compile it into static HTML, deploy it to a simple web server virtual machine and expose to the internet. In the diagram above the red lines indicate data which takes place on the private network and the green lines are public traffic.
Firstly for the CMS if possible I'd like to try a new technology that I hadn't previously tried, for this I settled on Ghost it looked easy to setup, use, developer friendly and I knew that I could plug it directly in to Gatsby a fast and modern site generator for React.
Ghost is an open source, professional publishing platform built on a modern Node.js technology stack
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
Setting up the CMS
To install Ghost it has a couple of prerequisites
- A computer running MacOS, Windows or Linux - Debian 9
- A supported version of Node.js - Node 10
- Either yarn or npm to manage packages - NPM
- A clean, empty directory on your machine
Once this has been installed you are ready to install the Ghost package on the machine/computer.
The Ghost-cli installer will ask a few questions during install, we will need the
systemd service file and we do want to start ghost an example output should look like the following once completed. There are many ways to setup Ghost using NGINX for example, more can be found in their documentation here.
Internally I'm already using HAProxy as an application load balancer for some other internal/external services. So it was a simple case of adding the ACL and backend, by default Ghost runs on port
2368 so using HAProxy this is proxied to
This completes the infrastructure setup for Ghost, if we head over to the URL (https://ghost.atathome.me/ghost/) given in the install output we should now see the welcome page if all was successful.
Setting up the Jenkins Project
This section of the tutorial is going with the understanding that you know the basics of setting up Jenkins projects and that you have already configured Jenkins with a ssh key which allows access to the repository, this process is very similar for both GitHub and BitBucket (I'm using BitBucket for the purposes of this tutorial).
The above diagram shows how the build project is connected up. It starts with Git as a source control which Jenkins checks out into a workspace, this then will invoke a Jenkinsfile Pipeline. The steps for this pipeline are as follows
- Install NPM Dependencies
- Run the Gatsby Build Step
- Synchronise static website to destination server
The Gatsby Build Step communicates via the Ghost API to retrieve information needed to generate the static website.
I have included the Jenkinsfile for reference above. To set this up start by clicking 'New Item' when logged into your Jenkins instance.
Enter your Jenkins job name and select Pipeline and click 'OK' this will present you with the configuration page. Then select 'Do not allow concurrent builds' and scroll down to the Pipeline section. For Definition select 'Pipeline script from SCM', use Git as SCM value which will present you with information for entering the Repository URL, Credentials and Source Branch as pictured below.
At the point you've entered your own details click 'Save' and it will go to the project overview page. This should then trigger a branch scan and if your Jenkinsfile is already in the repository it will start building.
Setting up the Web
The web machine is a very simple NGINX web server, which just serves static html. Its sat behind my existing HAProxy instance with the following frontend/backend configuration.
To setup the virtual machine, I installed NGINX and created a directory to server the static content from. The caveat being that the user needs to be accessible via Jenkins or a
jenkins user will need permission to write in the content directory.
# I'm using gatsby in this example; you can use whatever you want sudo mkdir -p /var/www/gatsby # Replace ansible with the name of your user who will own this directory sudo chown ansible:ansible /var/www/gatsby # Set the correct permissions sudo chmod 775 /var/www/gatsby # Change directory into it the directory you've created cd /var/www/gatsby
Then to get NGINX to server the static files I added the following conf file to the sites-enabled directory for NGINX.
Once this is added you can enable the conf by reloading NGINX.
sudo systemctl reload nginx
Hopefully this article has talked you through the basics of setting up Ghost CMS and then integrating it into a Jenkins CI/CD Pipeline and then hosting on a static NGINX server.