Booting up the blog

in Blog-launch on Jekyll, Gratisdns, Hydejack, Bengtsson-driven-development, Letsencrypt, Haproxy

Hi there and thank you for visiting Bengtsson Driven Development. My name is Lars Bengtsson and I’m currently working for Danske Spil as a DevOps Engineer. For quite some time I have thought about starting up a blog. However, throughout that process all the hows, can I’s and so forth, started to ooze out from my brain. But then, a few months back, as I wandered about on the interwebs I bumped into this static site generator called Jekyll. Not only hope came to me. The feeling of triumphant victory as well. I quickly hit up Ctrl-D to have myself a bookmark…..aaaaand went back to my regular routines.

Many a day went by. Finally I conquered my usual process of ‘let me do this other “thing”’, ‘let me do that “thing” right here’ and went about it. So without further ado…..

Wassup Jekyll

“Say hello to my little friend” AKA Jekyll. A ruby based static site generator. You write your posts in markdown. Oh wee. Easy peasy, nah think again (at least I would come to think better of it). However, it reads to be very well suited for the CI/build happy people out there ;-). You know, markdown/static text. Can I program a parser for that? Yes you can! A converter then? Yes you can! Hooray, let’s:

go make the web great again.

Or is it US of A? Anyways. If nothing else, GitHub is pretty happy about Jekyll. So much that you can use GitHub as a webserver for your Jekyll based site (see: GitHub Pages). Furthermore, there seems to be a good community around Jekyll, its free and several pre-cooked, customizable themes are available. These are some of the features that made me realize that Jekyll was exactly what I had been looking for. So please, come a long for a trip down memory lane.

…as I go back into my short-term memory. Through the process of launching this very website/blog.

Setting up Jekyll

In bulletproof bullet points the frog croaked.

  1. A good old follow this how-to was my friend.
  2. Finding a theme was needed, so I gave this web-query a hit-up (hit-up explained, if needs be.).
  3. Now lets read that Hydejack theme documentation.
    1. And some more Jekyll doc.
  4. To the SoThem links, okay SoMe, but isn’t it really about the social media companies themselves, at the end of the day? You tell me!? Oh hey, so what I did was to make sure that URI’s to twitter, GitHub and so forth, pointed to the correct SoThem websites.

Customization

- pictures

I went looking in my digital archives and found a good picture for the left sidebar. The picture is from Japan. It’s a Jellyfish my friend, and the pic was taken at Aqua Park Shinagawa. Then one of myself. With glasses, even though I don’t use focal aids. But hey, I call myself a connoisseur, so the least I could do is to pretend to look like one.

- the favicon

A had a little gem laying around. So I used that. If you can guess/see what it is I will give the very fine price of a digital high-five. What, to you, is probably more interesting, is how I overruled the favicon that the HydeJack theme uses. So….

  1. A general rule is that a Jekyll theme has an “assets” folder. In this folder the theme author would store images, favicons and so forth. I therefore created such a folder in my websites local Git repo.
  2. Inside the assets folder I created a folder named “icons”.
  3. You guessed it? Store the favicon you want to use inside the “icons” folder. And! Make sure to name it “favicon.ico”.

Pro tip! In order to see the folder structure of the theme you are using. Execute > open $(bundle show minima) on macOS© or > explorer /usr/local/lib/ruby/gems/"Ruby_Gems_Version"/gems/"theme_name_and_version" on Windows©

The first post

Hey there, look at my monkey AKA my first blog post.

"Look at my monkey"

In fact you are. Right here.

You write your posts in Markdown when you use Jekyll. What’s more though is the fact that writing in markdown is not intuitively straight forward. Much the same as learning pretty much any other new language, whether that is Swedish (jävla bra) or Brainfuck. Markdown it is though. Markdown has its own syntax and various people have made it fit specific scenarios. However, Jekyll seems to respect the Markdown language at its core standard. What’s the fuzz then? The exact syntax! That’s whats up. How-to do a comment, a link reference and for example a clickable picture without the anchor icon. Which by the way on this HydeJack Jekyll theme, is not mentioned in the documentation.

So I had to:

  1. Open the HydeJack theme folder. As mentioned in the “Pro tip!” above.
  2. Look around, looking for clues on how-to exclude the anchor icon.
    1. The “_mark-external.scss file under */jekyll-theme-hydejack-“versionNumber”/_sass/hydejack/__link” looked promising.
  3. I opened it up and found a CSS class named “{.no-mark-external}”.
  4. Added it to the image link:
    1. before == [![](/somewhere/image/yesSir.jpg)][linkSectionName]
    2. after == [![](/somewhere/image/yesSir.jpg)][linkSectionName]{:.no-mark-external}

The anchor was gone and daddy was happy clap. Notice that clap emoticon being displayed “inline”? Oh yeah, thank you Jekyll for using kramdown as your converter. As this converter supports setting style related settings in markdown directly. As I did with that clap emoticon.

I had to:

Write > : clap :{:style="display: inline"} in markdown. The : clap : part (normally without spaces) is what is rendered to be the clap emoticon image. The : clap : placeholder works because I have installed the emoji_for_jekyll plugin. It took me a while to figure this out, but I arrived in due time. Documentation, tests and fiery helps A LOT.

Getting the blog on its wings

Hmm now to the question of where to host it. A domain for it and all these other peripheral practical tasks of getting myself a blog.

The domain and a story on the name

Yeah why that freaking name? I mean, come on, Bengtsson Driven Development? Wassup with that! Listen up smile. Have you heard of Behavior Driven Development (BDD)? Experienced the jolly-go happy developers at Danske Spil? And now what’s my name? What do I do, DevOps. A development driven methodology towards running software platforms and services.

It’s aaaaaaalive and its perfect.

That mesh of influences made me land on Bengtsson Driven Development as the name for my blog. A special thanks goes to Micki and Kasper, two developers at Danske Spil, for opening my drowsy DevOps eyes towards the potential of Bengtsson driven/bentze driven/#kanViFåOsNogetBDD.

That being the name. A little long though, so decided on bengtssondd.it as the domain. .IT < yeah it is the Italian tld but it is also my subject area computer.

DNS

From my days in the hosting biz I had come to know of GratisDNS. But, do they support DDNS? Oh yes they do. Do they have an API, I can call to update DNS records for the bengtssondd.it domain? Yes they have. Wicked times dancers.

  1. In order to be able to use the GratisDNS DDNS API service you have to setup a DDNS password on your account. See more here
  2. Generate the URI to use for updating the IP for the domain > GratisDDNS.
  3. From a ‘box’ on the same network from where you will host the website (the WAN source address has to resolve to the same address as on the ‘box’ that actually hosts the website.)
    1. Query the URI you generated in step 1 with cURL or something similar.
  4. Test that it works.
  • Seriously consider creating a cron job or whatever so that the WAN IP is automatically updated on the GratisDNS servers.

HTTPS on bengtssondd.it

This 1 was “more” fun. But hey, I learned myself some more HAProxy and Letsencrypt. What I wanted was to have a setup where:

  • I get a certificate that is approved by a trustable certificate authority and it should be free.
  • It is possible to renew the certificate automatically.
  • Ceritificate revocation should be possible.
  • It should be possible to use with HAProxy.
  • Also, it should be possible to use more than one certificatae with HAProxy. As I have different websites going through the same HAProxy.

I already had experience with Letsencrypt and it supports my other requirements as well. So I continued with that. Buuuuut! Because I’m using a QNAP NAS to host my websites there is some quirks to handle.

  • We are talking a Busybox flavored Linux distribution.
  • The QNAP per default has an old Python install (Letsencrypt likes Python in several CLI versions).
  • How exactly would I have HAProxy read more than one *.pem file when going over HTTPS?

I really had to put my max GoGoDuck lmgtfy skills to the test. After going back and forth. Testing. Thinking out a way to do ‘x’ and going back to T H E searchengine I arrived at the following recipe for setting up what I wanted.

Recipe for = > 1 website with a Letsencrypt certificate. On a QNAP NAS, through the HAProxy load-balancer

  1. Check your Python version. If below v2.7.6 update or install a newer version.
    1. IF you choose to install a newer version, do it throught the QNAP App-center.
    2. When installed make sure to use the Python installation in the .qpkg folder on your QNAP. E.g. by export PATH=/share/DATA_DRIVE/.qpkg/Python/src/bin/:$PATH in your scripts or on the cmdline.
  2. Install the Python package manager pip.
    1. Download get-pip.py script.
    2. Run it.
  3. Install the cryptography Python module: pip install cryptography
  4. Install the python version of certbot, the Letsencrypt certificate cli program.
  5. Check that certbot works by executing: certbot -h. If nothing happens or the cmd fails, make sure that the correct version of Python is in your environment path.
  6. I choose to use the webroot plugin method of Letsencrypt. As I did not want to shutdown HAProxy or any other web-related server. I therefore executed the following in order to get myself a certificate for bengtssondd.it: sudo certbot certonly --webroot -w /PATH_TO_WEBROOT_FOLDER/ -d bengtssondd.it --non-interactive --agree-tos --email myEmail@bentze.klartder
    • Of course, I prooved ownership by having ensured that the bengtssondd.it domain points to the WAN that the Letsencrypt certbot request would come from. See [#dns] above.
  7. Then we need to concatenate the certificate files that the certbot cmd above spits out. This is done by executing: sudo cat /etc/letsencrypt/live/bengtssondd.it/fullchain.pem /etc/letsencrypt/live/bengtssondd.it/privkey.pem | sudo tee /FOLDER_TO_STORE_PEM_FILE/PEM_FILENAME.pem
    • The order of concatenation is in fact very important.
  8. Now to the haproxy.cfg file.
    1. First I edited the line that said bind *:443 ssl crt /usr/local/etc/haproxy/ssl.pem, so that it would now say bind *:443 ssl crt /PATH_TO_PEM_FOLDER/"FILENAME".pem crt /ANOTHER_PATH_TO_PEM_FOLDER/"FILENAME".pem
    2. Then I added Bengtssondd.it website acl bengtssondd hdr_beg(host) -i bengtssondd.it use_backend my_back if bengtssondd …to my two frontend sections in the haproxy.cfg file.
    3. And ended that of by reloading the HAProxy container.
  9. Tested the site and things where :thumb:{:style=”display:inline”} up.

The following reads helped me.

  • Python installation steps > https://community.letsencrypt.org/t/dont-know-how-to-bootstrap-certbot-on-your-os/29905/2
  • Python pip installation steps > https://pip.pypa.io/en/stable/installing/
  • Configuring HAProxy > https://serversforhackers.com/c/letsencrypt-with-haproxy

Time for celebration

Yehaaarrr….we are live. #FartPå AKA #PedalToTheMetal. That’s all for now folks. Thank you for reading a long. Come back for the next 1. Where I’ll have a look at some CI and CD for Bengtsson Driven Developement (we might be talking Docker as well…oooh wee). Because right now the CI and CD process is pretty ugly:

  1. Build with bundle exec jekyll serve
  2. scp the files to my QNAP NAS from my dev. machine.
  3. F5 for a refreshing “deploy and pray”.

I think you get the idea. We are talking nasty pastry suspect.

Thank you for reading along. Over and out dash

© 2018. All rights reserved.

Powered by Hydejack v7.5.0