How does this blog work?
This is the blog of a web developer so let’s have a look behind the scenes: why did I choose Jekyll instead of writing my own blogging software and boil that down to a blogging framework and then end up using Wordpress?
Well… I didn’t want to write something on my own because there are so many good blogging solutions out there. I also didn’t want to use something like medium or similar blogging sites. It’s my content and I want to host it. But I know how to write code and HTML and I don’t need some kind of WYSIWYG editor. Also I don’t want to host a software I have to keep updated and secured for a little side project. I can use this time to write this content. Shortly I thought about writing the posts in plain HTML but then decided markdown would be easier.
That’s why I was looking for a markdown based static site generator. Why Jekyll one might ask… well… I don’t know. It promised to be blogging focused and I just tried it first and it worked as I wanted it to work. So I sticked to it.
I don’t need anything running on the server because Jekyll just puts out plain HTML and CSS for me which I can throw on any web server. And I also don’t need anything on my local machine since I put the build step into GitLab CI. All I need is a text editor and git. Tools I use daily. Therefore the perfect fit.
Everything I push to the main branch of my blogging repository is automatically built and deployed to the server. GitLab already has a template to host Jekyll pages on GitLab pages.I used that as a basis and added a little step to push the website content to my webserver via FTP. Guess I will change that to scp or rsync in the future but it works for now.
How does this work? First of all: you don’t want to have your credentials in your repo do you? In GitLab CI you can create variables for that. Git Settings > CI/CD settings and create variables for user, host and password. You can also configure them to be hidden in CI logs.
Then you’ll need a config file to tell GitLab what to do and when to do it. Just throw it into the root directory of your repository. My .gitlab-ci.yml looks like this:
image: ruby:2.3 variables: JEKYLL_ENV: production LC_ALL: C.UTF-8 before_script: - bundle install test: stage: test script: - bundle exec jekyll build -d test except: - master publish: stage: build script: - bundle exec jekyll build -d public - apt-get update -qy - apt-get install -y lftp - lftp -e "open $FTP_SERVER; user $FTP_USER $FTP_PASSWORD; mirror -X .* -X .*/ —reverse —verbose public/ public_html/; bye" only: - master
GitLab CI can run docker containers for you. Jekyll is written in Ruby so we tell GitLab to create a container from the Ruby image.
In the variables part we tell Jekyll to run in production mode.
The before_script part defines scripts that should run before all defined jobs. In our case it installs Jekyll via bundle install.
After that you can define the jobs that will be triggered on changes. The first job is called test. It will be triggered on every branch except the master branch and run a jekyll build command. This way I can see errors in my posts e.g. links that are broken before publishing them. The artifacts option define where the result of the step is saved.
The second job called publish is limited to only run on changes in the master branch. It will first build the page then install lftp and copy the generated files to the webserver via FTP. The variables starting with $ will be filled from the CI settings mentioned above.
With this config I don’t have to do anything to publish new content but to push it into the correct branch of my repository. This enables me to write content from anywhere I want without the need to host a blogging software or a CMS or anything. I’m writing this post right now lying on my couch with my iPhone with a git client with integrated markdown editor. And since it’s managed via git I can easily undo stuff if I mess things up. And the best part: Only HTML and CSS on my webspace. All the other stuff runs in the CI pipelines.
Since Jekyll is based upon Ruby as mentioned earlier getting the right prerequisites running on your local machine if you want to do more than creating content like working on the layouts and CSS and stuff like that can sometimes be tiresome. But the web dev community has you covered: you can also use docker for that. Just cd into the main directory of your Jekyll page and run
docker run -p 4000:4000 -v $(pwd):/site bretfisher/jekyll-serve. Your blog can now be accessed on http://0.0.0.0:4000/ and has a watcher running to automatically compile your changes.
Visit this GitHub repo from Bret Fisher if you want to learn more about that.