A faster, more secure personal website

How we got here

Since 2014 I have been hosting my work on Behance, an excellent self-promoting network for creative professionals, which allowed me to manage my portfolio through their platform, and then fetch it through their API with simple wrappers on a PHP server, to dynamically assemble my personal website.

This was all well and good, but I always had to work around the limitations and constraints that came from working with someone else’s management system. I also started to realize that I would have enjoyed having more features, such as a blog.

Why not just use WordPress?

When brainstorming for possible solutions for a content-driven website, WordPress came immediately to mind, as I have some experience working with custom themes and types. But then I wondered: do I really need a full fledged CMS, with user privileges, templates, and countless customizable settings? Do I really want another MySQL database and credentials to worry about, for something so small as a personal site? Of course WordPress can be a fast and secure solution when necessary, but is it the right solution for me?

I really did not want to go back to stitching pieces of HTML together to manually build a static files like I did 10 years ago, and a simple static site generator, such as Jekyll, was not a well-integrated enough solution for what I had in mind, as I needed a visual way to organize my content.

What I did

Not happy with any of the existing solutions, I decided to build my own: an offline headless content management system to author and handle my content, coupled with a static site generator, to build a small, fast, highly cacheable, vastly more secure website, that could be hosted basically anywhere, very cheaply (or even for free).

This allows me to move most of the performance bottlenecks and security concerns away from the live server, and into my local machine. Great! Resource intense and sensitive database operations are only performed offline every once in a while on my computer (for example, when I add new work on the portfolio, or a new blog post), while the server only delivers ready-made static HTML files.

The headless CMS

I developed a local node.js application to serve as a dashboard and management system for my content. I used express to build the necessary routes, and pug to generate the backend interface. The content is managed with CRUD operations via lowdb, and stored in a simple .json file, as I don’t need the complexity or security of a full database system. Case studies and blog posts are written in Markdown through a user-friendly WYSIWYG editor, and the work section is easily managed via drag and drop to sort the items. Since I now that – at least for now – only I will be using the CMS in a controlled environment (up-to-date browser and system), I was able to use the latest and greatest when it comes to JavaScript and CSS. ES6 and CSS-grids for the win!

The static site generator

Since the content is stored in a standard .json file and written in Markdown, it is highly compatible with modern build tools, and can easily be parse by the site generator. I again use lowdb to read the database and feed it to Gulp, which is in charge of compiling the frontend pug templates into HTML, the Sass files into autoprefixed CSS, JavaScript ES6 code into a bundled, old-browser compatible script, and compressing the images. The output is a static, minified website, with very few HTTP requests, that can be hosted on virtually any web server, even for free on GitHub, with the additional benefit of out-of-the-box Version Control.

The result

Add some CDN on top for speed and caching, and the final result is what you see here. A faster, stronger website, that performs much better than any dynamic solution I previously had, is much safer against malicious activities or outdated code, and costs a fraction to host. Furthermore, I can manage it with a custom dashboard, so adding new content is a breeze, and when I inevitably decide to change its look, I will only need to adjust the frontend side of my templates.

But most importantly, in the process I learned a lot about server-side JavaScript and node applications, as well as some important design and optimization techniques.