Building a website used to be easy.

You’d code some HTML, throw in a little CSS, spice it up with JS, and voilà!

You’d then push these static files to any server, and BAM, a live site would appear.

Today, you can easily get lost in tooling to build “modern” sites: JS frameworks, task runners, module bundlers, package managers, testing frameworks, linting, pre-processors…

But it doesn’t ALWAYS have to be that way:

Recently, I asked that question myself.

See, I had this project: build a website to show how disappointed I was with Apple (long story).

My goal? Create a static HTML site I could manage with a CMS, with as little coding and $ as possible. And do all of that in a single weekend-tops.

(The tutorial section further down shows you exactly how I did this. Step. By. Step.)

First, I looked at the static CMS space a bit.

The bumpy landscape of static CMS There are LOTS of static site CMS available on the market.

1. Git & SSG-based

Caption For the simplest of statically-generated sites, key options are:

These work in sync with static site generators like Jekyll, Hugo, VuePress, Gatsby, etc. If you’re down with SSG, you’ll love these. Pre-built sites you can serve on the fly? Hell yeah.

2. Flat-file

Caption Then there are “flat-file CMS,” which swap databases for files and folders. Key options:

No MySQL or PostgreSQL involved. But developers need to embrace templating/style languages like Liquid or Twig. Oh, and server-side rendering is still required here.

3. Headless & API-driven

These are the beasts. The JAMstack champions. The omnichannel, “I don’t care about your frontend” CMS. Key options:

Being API-based, these connect to any/multiple frontends. Though they are powerful (and trendy) JAMstack tools, they can be overkill for barebones content management needs.

SO, after digging through all of the above, I found something… different. Something perfect for my tiny static site project: Publii.

Publii: static content management AND site generation

Publii is an open source desktop CMS generating static HTML, CSS, JS files.

It inhabits this sweet spot between static site generator and simple CMS. It works on both Mac & PC.

It has a marketplace of simple themes to get started. These use Handlebars.js -a minimal templating language. Very HTML-like, and easy to pick up.

Publii runs on your desktop and allows offline editing and previews; a feature most CMS don’t support.

It outputs static files and doesn’t care where and how you choose to host them:

It boasts a lot of other awesome features: Free to use Instant switching between unlimited sites No backend knowledge required Highly-secure-no database + works locally Built-in SEO Supports AMP pages WordPress importer Publii tutorial: building a static site deployed on Netlify Let’s see how I used Publii’s CMS to generate a simple HTML site. To throw in some funk, we’ll make it an site!

Disclaimer: I am not a developer-far from it. And I did all of what follows by myself. Consider this an experiment in proving how easy it is to launch a basic static site. 😊

→ Total time spent: 2 hours → Total money spent: 19$ (on the domain and hosting)

What I did for this project:

Purchased a domain name (wahaabsiddique.com) using websouls.com. Used Publii’s free static site CMS to generate HTML, CSS, and JS files (i.e. a basic static site!). Deployed and hosted the site on Netlify (for free). Redirected my Netlify default domain to my own custom domain name + enabled SSL Created a custom contact@wahaabsiddique.com address using Zoho Mail (free) In this tuts, I’ll focus on the website creation and deployment parts (Publii, Netlify).

1. Installing Publii

First, I installed Publii. It’s a simple process starting with a download on this page.

2. Creating the static site with Publii

Once installed, Publii invited me to create a site. I obliged.

I then picked a theme, Simple, under the Settings tab.

Now for the fun part. I went to Posts and added a new one.

Then, I used a mixture of customer frustration (at Apple) and lousy design skills to create this beauty:

After that, I stripped some stuff away from the Simple theme under Themes > Custom settings:

Following this thread, I also managed to display a single post as the home page. I won’t go into details about this here-but feel free to ask questions in the comments.

The final touch was adding a favicon troll:

As you can see from the gif below, updating/previewing locally works A1:

With this done, I went back to my Publii post, and opened the HTML editor:

3. Deploying the static site to Netlify

All that was left? Deploying that beauty on the world wide web.

I used Netlify to do that (for free). I mostly followed these simple instructions in the Publii documentation.

The Site ID is under Site settings in Netlify.

The Netlify token can be generated under Account > OAuth applications.

I then transferred my custom domain to Netlify. I used this straightforward resource to do so.

After adding my custom domain, I swapped DNS in my iwebsouls panel using the ones provided by Netlify:

I also added SSL to my custom domain using Netlify’s integration with Let’s Encrypt (for free!). Here is how you can do it.

And that’s it, friends.

Closing thoughts

I didn’t think I’d create and deploy a working static site in one weekend. But thanks to Publii & Netlify, I did! Ain’t life grand.

What I could do next:

Do a few visual tweaks-it’s ugly. Add an About section-to answer the obvious “u mad bro?” Launch on Product Hunt? 😅 Anyhow, here’s hoping this post inspires you to launch cool static sites!