26.10.2011 (a day after my 17th birthday). That’s the date squareys.de was initally registered.
Since then it hosted zombiehunt.squareys.de 1 and a range of half-finished wordpress themes. I always wanted a website, but C++ is just more fun for me than web development. Hence, my website was always lying around in a very dirty state.
Every now and then I find my tumblr blog again, though, which reminds me of projects I almost fully forgot about. Since I take quite some pride from having worked on a big amount of little personal projects which were more important to me than school or university or most everything else, I really wanted to have a place where I archive every one of them. Optimally with a download link to its last state — or maybe a github link.
So, here is my old website with new makeup! Based on m.css and pelican it should now be a lightning-fast static website and fun to write new content for, since powered by a Gitlab Ci pipeline in the background.
What follows are some details on how I implemented this. If you’re interested, stick around!
- Since it used a buggy self-made php framework that even I could hack, I reworked the code. This is now a more static version and features like the highscores are disabled for data privacy reasons. The registration form is only a mockup.
Recently I had a discussion about static websites and how their biggest disadvantage is that you always have to recompile and reupload everything. With continuous integration, I am able to have the recompiling be done automatically for me.
My current workflow for working on content or the theme of the website 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 pelican start a local webserver that watches the content/ and pelican-theme
directories in addition to a pelicanconf.py file. This allows editing
.rst (or other
markdown) files and shortly after see the fully compiled result in the browser.
As you can tell, compilation of the entire thing is still bareable. It’s even slightly faster when regenerating after a change. There are ways to tell it to only regenerate modified content, though.
git push origin master
Is then all I need to do to get a staging version of the website. With the Gitlab CI pipeline I set up, it just automatically compiles and deploys everything.
git push origin master:published
Finally runs a slightly different Gitlab CI pipeline, which uploads the entire website to the webspace via ftp. The relevant gitlab-ci.yml config is super simple:
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 complicated stuff in the
Makefile, but that’s
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 slighly modified version of what pelican already generates for you with
quickstart, except that I use
lftp to securely pass the password from Gitlab CI.
I recently put some minimal effort into my old wordpress theme. Because it was based on a wordpress version of 2011, I actually broke the website in the process of updating wordpress.
I did, however, like the simplicity that I had come up with and really wanted to make this pelican based website looks pretty much like it.
What I want to say is that if he does something, he usually does it properly and to its fullest. And what else could you wish for when deciding on what technologies to use for your website.
Starting with the “Light Theme” of m.css, I was able to reconstruct my old theme by changing 5-10 lines of the theme’s templates and modifying the colors, which are all configurable in a neat list of css variables in a single css file.
Additionally, I converted the Molokai color style I use in vim to pygments using vim2pygments. And since the code blocks also use Consolas as font (if you have it installed), the code snippets should look just like I see them!
My website was always very empty. Back in 2011 I started blogging on tumblr, but since 2014, all that was posted there was an occasional “tumblr birthday” post.
To have all my writing in a central space, I really wanted to import the 94 of them to this website.
I found this tumblr2markdown python script,
which I heavily customized to my needs to produce restructured text files from the downloaded
html blog contents using
pandoc and also fixed some issues like not downloading
images and more.
In the process I also 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 enjoyed the read!