Kristoffer Lislegaard


About / Blog / Contact / Dates / Follow / Work


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:

 

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 in Typora. A minimal Markdown editor with instant visual feedback to your code. After I started using Typora it has become a paid application. I will probably be changing to something free and open source at some point, or even just use NeoVim or Micro if I feel like I don't need the instant visual feedback.

After I have written a post, I export that from Typora into an html file. Again there are lots of Markdown to html converters to choose from.

This html file comes out with some metadata, but not the correct metadata, so I need to strip the old html code and replace it with mine. This will make sure the design elements like font, background color etc. is correct, and insert the navigation menu on top.

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

newwebsite

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.