Functional Paper Theme

Defining Scope

After I’ve decided to start a blog, I first had to define the scope. I wanted a framework focused on posts that was scalable and performant within a low budget, easy to create a theme for and maintain, and simple to set up anywhere to prevent vendor lock-in. As you can deduce, I did not want any publishing platforms or even prebuilt themes. It was important to me that this was a learning opportunity to gain some front-end development skills.

Foundational Framework

Looking at the scope, I decided to go with a statically generated site. When I have a new post, I just rebuild the site and have all the statically generated files pushed to one of the multiple static site hosting providers, or in storage behind a Nginx web server.

There are many static site generator (SSG) options to choose from, you can check the list on Jamstack. While doing my research, I came across Astro and its great features. The ones that attracted me the most are the following:

• Zero JavaScript by default, so everything can be as fast as possible
• Integration with Tailwind CSS, to make styling easier
• The friendly JSX-like syntax, having some previous experience with React, meant a gentle learning curve
• Islands architecture that gives a lot of flexibility in mixing static HTML with interactive UI components written in any or multiple of your preferred frameworks, such as React, Vue, and Solid

Theme Overview

Using Astro, I created my blog theme, which I named Functional Paper. You can check it out on its dedicated demo site, available at functional-paper.vercel.app.

I consider it to have a simple UI design with all the expected features of a modern site, such as responsive design and light/dark themes. The navigation changes to a hamburger menu for mobile, and post cards also adjust for the vertical layout. The color palette is heavily inspired by the GitHub themes, of which I am a big fan.

Some technical features implemented include:

• Post comments and reactions powered by giscus and GitHub to enable interaction with the community
• A tagging system that helps the user find other related posts on the same topic
• A search function powered by pagefind with indexes generated at build time, with a claimed payload of under 300kB for a 10,000-page site
• Pagination, which loads only the necessary content
• Size-optimized images using the recent AVIF format for better compression than WebP at the same quality

I benchmarked the theme using Google Lighthouse and obtained a score of 100% for both mobile and desktop.

How to Use It

I wanted to share the work I have done building the theme. Maybe it will inspire others in their designs, or even fits as a good starting point for some. Hence, the Functional Paper theme is free and open-source under the MIT license. The source code is available on GitHub here.

You can start a new Astro project with the theme by simply running the following command:

npm create astro@latest -- --template vlad77ivan/functional-paper

During setup, you will be asked a few questions. First, you need to select a project location. By default, Astro will create a randomly named directory in your current path. You can write . to set up directly in your current path if you have already created a custom directory, or use ./CUSTOM_NAME to have your preferred name choice. Then you need to enable TypeScript. I suggest selecting the Strict mode at the next question, as this is what I used. Next, you’ll have to install the dependencies. Finally, you have the option to initialize a git repository, or you can do it later if you decide to.

After you start playing with Functional Paper, share your opinions and suggestions in the comments section below. I will start a Dev Log series in the upcoming posts, going into detail on the technical aspects of the code, Markdown post formatting, and how to change the styling of any of the parts. See you then!