Creating a profile site in Dart with Jaspr

A getting-started guide

I’m not much of a web developer, but from time to time I need a web page. Here are a few options that I’ve tried:

• WordPress: It works OK, but dealing with the database and restoring backups is complex. Also, I don’t know much CSS or PHP, so creating a custom UI is too difficult.
• Docusaurus: This is a static site generator (similar to Jekyll or Hugo), which is great for generating a website from markdown files. You can also do more complex layouts using React components. I don’t know React, though, so that makes it difficult.
• Medium: The writing experience is convenient, but custom UI layout isn’t possible. The paywall is also undesirable.
• Flutter Web: I’d really like to use Flutter to build normal web pages (not just web apps), but currently the initial load time is too slow. Hopefully future developments will change this situation.

If I could use Dart to generate and layout my website, that would be great. Recently on Flutter Spaces, they talked about Static Shock and Jaspr. Static Shock is a Dart-based static site generator. I’m quite interested in using it to replace Docusaurus. However, today I’d like to replace my profile site. It’s currently written in Flutter Web and looks like so:

That layout isn’t something you can do with Markdown, so here is where Jaspr comes in. Jaspr allows you to create a layout similar to how you would in Flutter. However, it compiles to standard HTML, so you don’t have the problem of waiting for the Flutter engine to download.

Note: Jaspr is still in development, not yet widely used, and mostly maintained by a single package author. Normally I avoid this kind of risk (see Thoughts on using third-party packages (or not)), but in this case, it solves a problem. I’d also like to promote Dart-based solutions.

The following tutorial will walk you through the steps to create a profile site with your logo, email, and social media links.

Setting up Jaspr

I’ll assume that you already have Dart set up on your machine. If you don’t know Dart, Jaspr probably isn’t for you anyway.