Kristoffer Lislegaard

New website and how it was made

I am happy to start off 2022 with my new website! After a few years of making and maintaining my Wordpress based website I was ready to go in a different direction. The site was made from scratch and in the process I learned a lot of new things, made myself a program to help me do some of the repetitive tasks and ended up with a much better site that I have full control over. And if there is something I don’t know how to do, the solution is to learn how to do that, not look for someone elses oversized plugin to put on top of an already too big site.

Why did I make a new website?

I was getting more and more frustrated using the Wordpress site. Everything felt so slow and full of extra things. When I wanted to change the look of something, I had to go dig in menues after menues to figure out why something wasn’t working right. Some things was working correctly on desktop, but not on mobile. Some things broke when I adjusted something else. It was a big mess of invisible code basicly. Whenever I made a new page, before I had written anything on that page, it allready had 800 lines of code in the background. Crazy!

What was my goals for the new site?

When I was going to make my new site I wrote down a list of what I wanted it to be like:

Simple and minimal - The old one had too much things I didn’t use og want, but couldn’t get rid of.
No tracking, cookies or other annoying stuff - I really dislike when I feel like I have to read a full contract just to browse a website.
Look the same on desktop and mobile - I don’t want to have to do double work.
Optimized for writing, sharing and explaining - One of the reasons for making this site is to be able to share stuff. This means it should be easy to add new content, link to explanations of things I am talking about and that I can write my texts in a text editor and not a web editor.
Contain lots of information - This gives some challenges to how everything is structured. I wanted to use lots of lists to give people the possibility to explore at their own pace.

How did I make it?

The great thing about pure html based websites, is that they are open source. You can just click view page source and all the code is shown. Everything should be open source! So I looked around after other websites that had a minimal approach to them, clicked view page source and I used that to figure out how to make mine. This site is heavy inspired by Brian Crabtree’s website. Quite fitting I would say considering how much I am using his Monome Grid in my work.

Creating a good workflow

After deciding and coding up the design I figured out that I needed to make myself a comfortable workflow that made the formating easy and removed some of the repetitive tasks. I didn’t want to type up all html-codes every time, or make the menu from scratch etc, and I knew I would be using a lots of things like lists etc.

My favorite format to write in is Markdown. It is easy, fast and minimal but capable. There are lots of good markdown editors and it is easy to convert info html. So right now I write my Markdown with Neovim. This is a fantastic text editor, allthough with a bit of a learning curve. Any text editor that can edit markdown files will work though.

After I have written my markdown file I convert it to HTML with Pandoc. This is another fantastic program that can convert between a lot of text documents. Then I add my header with the navigation menu, font design etc.

To do this I made myself a little program. To be accurate it is a little Bash script.

After this the html file is ready to be uploaded to my server. I use Cyberduck as my ftp client.

Conclusion and to do list

In general I think the website works very well! And it has been a great learning experience as well. It is such a cool feeling when you are able to make your own stuff! There are still some things I want to figure out.

Figure out how to updates all websites with one click f.ex. in case I want to update something like the main menu or change font.
- This I have also figured out how to do with Bash. Since all my files are in the same folder I can make a script that goes thru the whole folder and exchanges a line of code for another in all the documents. Should be pretty easy to set up!
~~Optimize Markdown workflow even more. There are a few quirks in Typora, and I would anyways like to keep the whole chain open source.~~

Update March 2022: I did this bit and updated the text to match the update. Now I create the Markdown document in Neovim, then execute my script and it creates the finished webpage.

~~Can font / design be even more improved for readability?~~
- Set up style.css so it is easier to change font on all pages if needed.

Updates

Added a sitemap.xml
Added robots.txt
Added .htaccess
Added style.css

Updates 2023

It turns out when you make something yourself you end up learning so much that documenting every new feature is too big of a job. So since making this blogpost I have made a bunch of updates :)