How We Built & Deployed Devjavu With Jamstack
Tags: blog, softwareengineering
Published: 2023-05-25 21:16:07

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](https://devjavu.space/), you ask?

[Devjavu](https://devjavu.space/) 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.
{% embed https://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](https://stripe.com/global) (hopefully, this changes).

{% embed https://medium.com/@martinsOnuoha/creating-an-inclusive-space-for-writers-c1221a464d7c %}

---
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](https://namelix.com/). Namelix uses artificial intelligence to create a short, brandable business name.
{% embed https://namelix.com/ %}

Having chosen one, We got a domain name on [Hostinger](http://www.hostinger.com/) for an affordable cost.

---

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.

![Devjavu hero image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0p49wjjzrvnfwjmwbo4.png)

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](https://jamstack.org/generators/), 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](https://gohugo.io/getting-started/quick-start/). 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:
{% embed https://devjavu.space/post/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](https://wordpress.com/) abstract many technicalities for you. I believe going through this list should help you make a decision on which SSG to choose:
{% embed https://jamstack.org/generators/ %}

---
## 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](https://forestry.io/) (now [Tina](https://tina.io/)) 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.
{% embed https://github.com/MartinsOnuoha %}

---
## 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](https://firebase.google.com/docs/hosting). It’s pretty easy to [set up](https://devjavu.space/post/build-deploy-a-site-with-hugo-firebase/).

{% embed https://firebase.google.com/docs/hosting %}

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 ☕️