How We Built & Deployed Devjavu With Jamstack

Starting anything can be hard…I know. It’s even harder when you’re working full-time and intend to build a long-term side project. Perhaps reading this extensive breakdown of how we built and deployed Devjavu might make it easier for you to get started on your next side project. Let’s get down to the details.

What’s Devjavu, you ask?

Devjavu is a self-hosted blog for exploring practical software development articles. It’s something we worked on on the side while I worked a full-time job and my partner had a remote internship on her hands.

Devjavu.space

Getting Started

There was one concern — With new policies and trends, it was becoming harder to access content, particularly on Medium, thanks to Medium’s Metered Paywall. As much as this program benefits writers, as it serves as a passive income, it also makes it harder for their content to be easily accessed by readers.
Another problem with the Medium Partner Program is — not every writer can benefit from this, particularly African writers like myself and others not on Stripe’s supported countries list (hopefully, this changes).
Creating an Inclusive Space for Writers

One Solution — we could self-host our content and decide how we want to make “passive income” from it. Whatever the case, we’d have 100% control over how the content we create is served to readers and how we benefit from it. That said, let’s see how we achieved that with Devjavu.

Choosing a Name

If I’m gonna tell a real story, I’m gonna start with my name.
— Kendrick Lamar

If you’d be building anything that’s user-facing, you want users to recognize you or your work by a name, logo, or phrase. So the first thing was to select a name. As much as Devjavu was a breeze to come up with, it might be hard to come up with names sometimes. In such cases, you can use a platform like Namelix. Namelix uses artificial intelligence to create a short, brandable business name.
Having chosen one, We got a domain name on Hostinger for an affordable cost.

Design

In the spirit of keeping it simple, I made a design with Figma. Since I really wasn’t looking for something complex, this one seemed good enough.

Feel free to go crazy with your designs, but remember to keep it simple. It’ll most likely be a trademark if you intend to keep it for a while.

Static Site Generators (SSGs)

There’s a handful of them, and before you choose one, be sure it’s within your domain of technical know-how, and it has a fairly large community, so you don’t get stuck. Static site generators help you generate static HTML pages from a template and populate them with the data source content.

For Devjavu, we chose Hugo. Mostly because it is fast, easy to start with, and “just right” for this use case (Also, I have experience working with Hugo).

I wrote a “Get Started” guide with Hugo:
Build & Deploy a Site with Hugo & Firebase

Alternatively, you might use a CMS instead of a Static site generator. Choose this option if you have little experience in technical details, as CMS tools like WordPress abstract many technicalities for you. I believe going through this list should help you make a decision on which SSG to choose:

Static Site Generators - Top Open Source SGG

Content Management

With Hugo, we wrote our content in Markdown. Hugo automatically generates HTML pages for each of the markdown pages. We’re a small team of two, and I’m the only one with experience writing Markdown. To bridge this gap, we set up Forestry (now Tina) with Hugo & Github. Forestry (Tina) is CMS with an editor that lets you the ability to create, edit, and instantly preview Markdown-based sites. This allows us to create content without actually needing to write Markdown.

Whatever SSG you choose, Tina has support for a handful of them, and to keep your site in sync, all your changes are automatically committed to Git.

Hosting

If you’re starting out small, it’s alright to use a free hosting platform — of course, with the intention to scale on demand. We hosted Devjavu on Firebase using Firebase Hosting. It’s pretty easy to set up.

We also set up auto-deployment with Github Actions. These actions listen for triggers and update the site automatically when changes are made.

SSL & CDN

Cloudflare offers a free plan that includes SSL provisioning. Setting up Cloudflare for the Devjavu.space domain was a breeze, especially working with Hostinger. If you ever get stuck, I’d advise using a domain service provider with great customer care. With Cloudflare, we were able to optimize content delivery using Cloudflare’s CDN.

This should give you a basic idea of how Devjavu’s running.

Others

• Google Analytics

• Prism.js

• Clipboard.js

Cheers ☕️