May 20 2018 New old Website

Pel­i­can + m.css + Git­lab CI = ❤

Re­cent­ly I had a dis­cus­sion about stat­ic web­sites and how their big­gest dis­ad­van­tage is that you al­ways have to re­com­pile and re­u­pload ev­ery­thing. With con­tin­u­ous in­te­gra­tion, I am able to have the re­com­pil­ing be done au­to­mat­i­cal­ly for me.

My cur­rent work­flow for work­ing on con­tent or the theme of the web­site now is:

$ ./develop_server start 80
...
Done: Processed 96 articles, 0 drafts, 3 pages and 0 hidden pages in 7.67 seconds.
...
-> Modified: content. re-generating...
Done: Processed 96 articles, 0 drafts, 3 pages and 0 hidden pages in 5.92 seconds.

Which has pel­i­can start a lo­cal web­serv­er that watch­es the con­tent/ and pel­i­can-theme di­rec­to­ries in ad­di­tion to a pel­i­can­conf.py file. This al­lows edit­ing .rst (or oth­er mark­down) files and short­ly af­ter see the ful­ly com­piled re­sult in the brows­er.

As you can tell, com­pi­la­tion of the en­tire thing is still bare­able. It’s even slight­ly faster when re­gen­er­at­ing af­ter a change. There are ways to tell it to on­ly re­gen­er­ate mod­i­fied con­tent, though.

git push origin master

Is then all I need to do to get a stag­ing ver­sion of the web­site. With the Git­lab CI pipe­line I set up, it just au­to­mat­i­cal­ly com­piles and de­ploys ev­ery­thing.

git push origin master:published

Fi­nal­ly runs a slight­ly dif­fer­ent Git­lab CI pipe­line, which up­loads the en­tire web­site to the web­space via ftp. The rel­e­vant git­lab-ci.yml con­fig is su­per sim­ple:

image: library/python:3.6

stages:
    - deploy

variables:
GIT_STRATEGY: fetch
GIT_SUBMODULE_STRATEGY: recursive

[...]

published:
    stage: deploy
    only:
        - published
    before_script:
        - pip3 install pelican Pyphen
        - python3 pygments/setup.py install
        - apt-get update
        - apt-get install lftp
    script:
        - make ftp_upload

You may think that I just hid all the com­pli­cat­ed stuff in the Makefile, but that’s just:

publish:
        $(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(PUBLISHCONF) $(PELICANOPTS)

ftp_upload: publish
        lftp ftp://$(FTP_USER)@$(FTP_HOST) --env-password -e \
            "set ftp:ssl-allow off ; mirror -R -p $(OUTPUTDIR) $(FTP_TARGET_DIR) ; quit"

Which is a just sligh­ly mod­i­fied ver­sion of what pel­i­can al­ready gen­er­ates for you with quick­start, ex­cept that I use --env-password of lftp to se­cure­ly pass the pass­word from Git­lab CI.

Cus­tomiz­ing the m.css pel­i­can theme

I re­cent­ly put some min­i­mal ef­fort in­to my old word­press theme. Be­cause it was based on a word­press ver­sion of 2011, I ac­tu­al­ly broke the web­site in the process of up­dat­ing word­press.

I did, how­ev­er, like the sim­plic­i­ty that I had come up with and re­al­ly want­ed to make this pel­i­can based web­site looks pret­ty much like it.

Thank­ful­ly I lived through mosra’s process of cre­at­ing the Mag­num web­site. He is one of those peo­ple who seem to turn ev­ery­thing they touch in­to gold – or at least leave some gold where they touched some­thing. (Be­cause of that I fol­low his work re­al­ly close­ly, heh 😜) Un­hap­py with the cur­rent state of web­de­vel­op­ment he built m.css, a “no-none­sense, no-JavaScript CSS frame­work and Pel­i­can theme for con­tent-ori­ent­ed web­sites”. While at it, sub­mit­ting many patch­es to pel­i­can, pyg­ments, la­tex2svg and doxy­gen – since he want­ed to have the doc­u­men­ta­tion of Mag­num in the same de­sign as the web­site. For more de­tails, please go read his blog post about it on the Mag­num web­site.

What I want to say is that if he does some­thing, he usu­al­ly does it prop­er­ly and to its fullest. And what else could you wish for when de­cid­ing on what tech­nolo­gies to use for your web­site.

Start­ing with the “Light Theme” of m.css, I was able to re­con­struct my old theme by chang­ing 5-10 lines of the theme’s tem­plates and mod­i­fy­ing the col­ors, which are all con­fig­urable in a neat list of css vari­ables in a sin­gle css file.

Ad­di­tion­al­ly, I con­vert­ed the Molokai col­or style I use in vim to pyg­ments us­ing vim2pyg­ments. And since the code blocks al­so use Con­so­las as font (if you have it in­stalled), the code snip­pets should look just like I see them!

Im­port­ing tum­blr blog posts

My web­site was al­ways very emp­ty. Back in 2011 I start­ed blog­ging on tum­blr, but since 2014, all that was post­ed there was an oc­ca­sion­al “tum­blr birth­day” post.

To have all my writ­ing in a cen­tral space, I re­al­ly want­ed to im­port the 94 of them to this web­site.

I found this tum­blr2­mark­down python script, which I heav­i­ly cus­tom­ized to my needs to pro­duce re­struc­tured text files from the down­load­ed html blog con­tents us­ing pandoc and al­so fixed some is­sues like not down­load­ing .bmp im­ages and more. In the process I al­so cleaned up the tags, since there were way too many.

If you made it this far, I thank you very much for your time, I hope you en­joyed the read!