How We Built & Deployed Devjavu With Jamstack
A Breakdown of the tools used in developing Devjavu Blog.
Read this article in dark mode 🌙, easily copy and paste code samples and discover more contents like this on Devjavu.
Starting anything can be hard…I know. It’s even harder when you’re working a full-time job 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.
Getting Started
There was one concern — With new policies and trends, contents were becoming harder to access, particularly contents 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 contents 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).
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 contents we create are 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, or logo, or phrase. So 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 it with content from a data source.
For Devjavu we chose Hugo. Mostly because it is fast, easy to get started with, and “just right” for this use case (Also, I have experience working with Hugo).
I wrote a “Get started” guide to Hugo:
Alternatively, you might decide to use a CMS in place of a Static site generator. Choose this option if you have little experience in technical details, as CMS tools like WordPress abstracts a lot of technicalities for you. I believe going through this list should help you make a decision on which SSG to choose:
Content Management
With Hugo, we wrote our content in Markdown. Hugo automatically generates HTML pages of each of the markdown pages. We’re a small team of two, and I’m the only one with experience in writing Markdown, to bridge this gap, we set up Forestry with Hugo & Github. Forestry 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 needing to actually write Markdown.
Whatever SSG you choose, Forestry has support for a handful of them, and to keep your site in sync, all your changes are automatically committed to Git.
Version Control
It’s important to maintain versions of your application, in case you mess up anything, you can quickly revert back, and pretend nothing happened. For Version Control, we used Git and Github.
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
Cloudflare offers a free plan that includes SSL provisioning. Setting up Cloudflare for the Devjavu.space domain was a breeze, especially working with Hostinger. I’d advise using a domain service provider with great customer care, in case you ever get stuck. With Cloudflare, we were able to optimize content delivery using Cloudflare’s CDN.
Others
- Google Analytics
- Prism.js
- Clipboard.js
This should give you a basic idea of how Devjavu’s running.
Cheers ☕️
