Welcome to my blog! In this first blog post I want to tell you how I made this awesome website. I won’t go into the finest details, but will tell you about the experience I got with the tools I used to make this website. I will start with a brief history of my experience in web design.
I started getting interested in web development in the period between I finished my PhD and started as a postdoctoral researcher. Through some online courses (mainly from Udemy) I learned some basic HTML, CSS and javascript, which I used to make my previous site. The website was made in WordPress, which is convenient when you want to build a website without a lot of technical skills. In the same period, I also made two other websites (see About me) and I started to get some more experience in web design.
On my previous website, I had a list of my publications and presentations, links to social media accounts and a timeline of my working experience. Most of this information also features on my current website. It is always good practice to frequently update your content on a personal website. For instance when I publish a new article or give a presentation, I want to add this information as soon as possible. With the little content I had on my previous website, I could manage to keep the website up-to-date. But I was not so happy with WordPress. It constantly asks to update itself and the plugins you installed. And the content is stored in a mySQL database, which is difficult to access without a lot of mySQL experience.
Then I ran into blogdown, which totally changed my way of thinking of how I wanted to build a website and manage the content. Blogdown is an R package which allows you to make a website in R using R markdown files. The site is then generated with Hugo, which is a so-called static site generator. Hugo is very well suited to built websites with list content, such as lists of publications, presentations, blog posts, etc. Therefore, it works really well with the kind of website I wanted to make. Like WordPress, Hugo makes use of themes. I made a first draft of this website with the Academic theme. Soon I realized that it would be much easier to built the website in Hugo, without blogdown. The main difference is that now I make use of normal markdown files, instead of R markdown files. Hugo is very well documented and there is a tutorial on YouTube. This gave me enough confidence to make this website from scratch, without a theme.
I also wanted to give a modern look to the website and use CSS grids for the layout. I started searching for recent courses on CSS and found the Advanced CSS and SASS course on Udemy. This course gave me some inspiration for the design of the website, such as the header background effect and the cards I use for the presentations and videos. The course also teaches CSS grids, which I used to build the overall layout and several elements, such as the publication popups. As a bonus (for me at least), the course also teaches SASS, which I never heard about before. SASS (Syntactically Awesome Style Sheets) is a preprocessor for CSS and allows you to chop your CSS code into different files and to make use of variables, for instance to define colors. SASS gives a lot of structure to your CSS and can speed up your productivity.
So I finished my website, but how do you host a Hugo website? At first, this turned out to be more difficult than I thought. The big advantage of WordPress is that you can add content through the CMS (Content Management System). The content of Hugo websites are stored in markdown files, which are then generated into HTML. So I was thinking that each time you need to add content to your site, you need to build the website locally and update the files on your hosting server. So a lot of going back and forward to your ftp client. Well, it turns out that some clever people made this a lot easier. I made a repository on my Github account where I store all my Hugo files. Then the site is build and deployed through Netlify. This happens every time I update (push) files on my Github repository. Due to the speed of Hugo, the website is build almost instantly.
So, this was the story about how I made this website. I use Hugo to generate the site from markdown files and some modern CSS and SASS for the layout and the design. Finally, I host this website through Netlify, which builds and deploys the website from Github.