Added post about 2martens.de relaunch
Signed-off-by: Jim Martens <github@2martens.de>
This commit is contained in:
parent
f915044bc3
commit
c77963e2f9
|
@ -0,0 +1,148 @@
|
||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: "Relaunch of 2martens.de"
|
||||||
|
date: 2017-12-27 18:00:00 +0200
|
||||||
|
categories: site
|
||||||
|
---
|
||||||
|
|
||||||
|
A few weeks back I have read about the Public Beta of Uberspace 7. I was immediately
|
||||||
|
intrigued to know more and above everything else, to use it. Furthermore I always wanted
|
||||||
|
to create a proper hub of my online activity but never had the time to do it.
|
||||||
|
In April 2015 I started using GitHub Pages to publish my political pieces on my own
|
||||||
|
site and not on Facebook. It worked for over a year but never really felt good enough.
|
||||||
|
|
||||||
|
Especially after the introduction of Let's Encrypt and the inability of custom domain
|
||||||
|
names AND HTTPS with GitHub Pages for the foreseeable future, I came to the conclusion
|
||||||
|
that it was time to relaunch my web presence. In addition the previous inhabitant
|
||||||
|
of 2martens.de was the project website of the 2martens Web Platform. That was an
|
||||||
|
ambitious Symfony-based project intending to provide a ready to go base framework
|
||||||
|
for web applications (similar to the Woltlab Community Framework) but based on Symfony.
|
||||||
|
The concepting phase went good and I was convinced of the project, even announced it
|
||||||
|
to others. But the development stalled when I encountered the obstacle that PHP
|
||||||
|
didn't provide a decent standard way to install plugins into your application.
|
||||||
|
While I still think that the idea of the project was and is promising I effectively
|
||||||
|
stopped development on the 2martens Web Platform. As a result the domain 2martens.de
|
||||||
|
was blocked but not actively and productively used. A shame when you consider that
|
||||||
|
the domain is No. 1 on Google search results for the term 2martens, which is my
|
||||||
|
identification pretty much everywhere.
|
||||||
|
|
||||||
|
These facts made it very clear to me that the relaunched website shall be on 2martens.de
|
||||||
|
and on Uberspace 7 and therefore with HTTPS and HTTP/2.0 optimizations. Lastly I had
|
||||||
|
to find time to do it. The Christmas break offered the perfect opportunity and time
|
||||||
|
for the relaunch, especially considering what happened in my life between the end
|
||||||
|
of September and early December (see [Jahresabschluss 2017][0]). That way the relaunch
|
||||||
|
of the website would in addition to the mere technical aspects also resemble the
|
||||||
|
renewed spirit in my life.
|
||||||
|
|
||||||
|
[0]: {{ site.baseurl }}{% link _posts/2017-12-15-jahresabschluss.markdown %}
|
||||||
|
|
||||||
|
## Planning
|
||||||
|
|
||||||
|
With the backstory out of the way, let's start with the juicy technical details.
|
||||||
|
It was clear to me that the relaunched website should continue to use Jekyll
|
||||||
|
as static page generator. Furthermore I was dying to use Font Awesome 5, which
|
||||||
|
I had backed during it's Kickstarter campaign. In addition I wanted to use the new
|
||||||
|
Bootstrap 4.
|
||||||
|
|
||||||
|
Just like GitHub Pages the new website should build automatically upon push to the
|
||||||
|
GitHub repository. Hence a Continuous Integration and Deployment solution was required.
|
||||||
|
My Jenkins installation was somehow broken and TeamCity also didn't really work
|
||||||
|
on my virtual server. Therefore I thought about aquiring a better vServer.
|
||||||
|
Thankfully I encountered some information on the Jekyll documentation that pointed
|
||||||
|
my in the direction of Travis CI. I had used Travis CI before but never for
|
||||||
|
deployment.
|
||||||
|
|
||||||
|
In the week before Christmas I created mockups of the new website that depicted
|
||||||
|
how it should look - roughly. With that done, it was time to implement the
|
||||||
|
relaunch.
|
||||||
|
|
||||||
|
## Implementation
|
||||||
|
|
||||||
|
First I identified the features of the relaunched website based on the mockups.
|
||||||
|
These features were:
|
||||||
|
|
||||||
|
- header menu
|
||||||
|
- sub menu for some header menu items
|
||||||
|
- my image in the sidebar
|
||||||
|
- privacy-friendly embedded videos
|
||||||
|
- footer menu
|
||||||
|
- "action boxes" on the top right corner of the content
|
||||||
|
- Font Awesome 5 SVG icons
|
||||||
|
- recent blog posts
|
||||||
|
|
||||||
|
And as a kind of stretch goal, I came up with these:
|
||||||
|
|
||||||
|
- privacy-friendly events list
|
||||||
|
- privacy-friendly Twitter feed
|
||||||
|
- landing pages
|
||||||
|
|
||||||
|
I identified the following tasks in addition to the features:
|
||||||
|
|
||||||
|
- update layout
|
||||||
|
- recategorize existing posts
|
||||||
|
|
||||||
|
As it is usually with development, plans change. So did this plan as I was updating the layout. The first task
|
||||||
|
was feature parity with the GitHub pages site. This required a complete overhaul of the style approach to make the
|
||||||
|
site render properly again with Bootstrap 4. Once that was achieved, I started to implement the features one
|
||||||
|
by one and ended up with better features than thought of in advance.
|
||||||
|
|
||||||
|
Essentially I moved all hard-coded values into data files and made things as automagically as possible. Goal was of course
|
||||||
|
to minimize the maintenance requirements. Long story short I ended up doing the following. Dynamic doesn't mean on
|
||||||
|
runtime but data-driven on compile time.
|
||||||
|
|
||||||
|
- dynamic sidebar boxes
|
||||||
|
|
||||||
|
1. all html files under ``_includes/sidebar/`` are picked up as sidebar boxes
|
||||||
|
2. specify which boxes you want to appear in YAML front matter (order matters)
|
||||||
|
|
||||||
|
- dynamic header menu (2 levels deep): specify header menu in ``_data/header-menu.yml``
|
||||||
|
- dynamic footer menu: specify footer menu in ``_data/footer-menu.yml``
|
||||||
|
- dynamic notification: specify notification in ``_data/notification.yml``
|
||||||
|
- dynamic promotion in footer menu: specify image location, link, etc in ``_data/promotion.yml``
|
||||||
|
- concentrated all author information in ``_data/author.yml``; contains:
|
||||||
|
- name
|
||||||
|
- image of author
|
||||||
|
- brand name
|
||||||
|
- brand logo
|
||||||
|
- age
|
||||||
|
- location
|
||||||
|
- link to CV pdf
|
||||||
|
- link to CV page
|
||||||
|
- email for job offers
|
||||||
|
- email for job offers in spam proof
|
||||||
|
- email for politics
|
||||||
|
- email for politics in spam proof
|
||||||
|
- GitHub username
|
||||||
|
- Twitter username
|
||||||
|
- list of publications
|
||||||
|
- list of skills
|
||||||
|
- list of education
|
||||||
|
- list of politics experience
|
||||||
|
- home page that shows posts from category ``site``
|
||||||
|
- CV page that draws information from ``_data/author.yml``
|
||||||
|
- Speeches page that shows posts from category ``speeches``
|
||||||
|
- Politics page that shows posts from category ``politics``
|
||||||
|
- G20 sub page that shows posts from category ``G20``
|
||||||
|
- Blog page that shows posts from category ``blog``
|
||||||
|
|
||||||
|
This setup allows simple maintenance. New posts just have to be created in the
|
||||||
|
``_posts`` directory and appear automatically at the right location. All data can
|
||||||
|
be changed at a single location and doesn't have to be updated everywhere.
|
||||||
|
|
||||||
|
While I implemented the relaunch website I took extreme care to use almost no
|
||||||
|
JavaScript and minimize external requests. The result is that only Font Awesome 5
|
||||||
|
is using JavaScript to replace the span tags with SVGs. External requests as of now
|
||||||
|
only happen for Youtube videos. I took care to embed them by using the youtube-nocookie.com
|
||||||
|
domain to hopefully ensure that data about visitors to my page are not saved until
|
||||||
|
they click on the video to play it. All embedded videos are entirely optional and
|
||||||
|
not required to understand the post or page content.
|
||||||
|
|
||||||
|
The result of my efforts is a website that fulfills all my initially set criteria
|
||||||
|
and doesn't lose any of the posts previously available. The README in the [repository][1]
|
||||||
|
describes in detail the steps necessary to use my website as a starting point for your
|
||||||
|
own personal website. It also explains the deployment.
|
||||||
|
|
||||||
|
I am looking forward to a productive year 2018 and I'm happy that I will have a far
|
||||||
|
more potent website, hosted on Asteroids (Uberspace 7), available to support me.
|
||||||
|
|
||||||
|
[1]: https://github.com/2martens/2martens.github.io/
|
Loading…
Reference in New Issue