Hands on with Publii, a Free Static CMS Generating HTML Sites

Code on screen

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:

At Snipcart, for instance, we receive lots of requests for adding e-commerce to static sites.

While our Jekyll, Hugo, Gatsby, and 11ty tutorials help developers, another, recurring request often pops up later on:

How can I add a CMS to my static site?

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

Static CMS options

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

Flat-file CMS options

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

Headless CMS options

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 Static CMS

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:

Publii deploying options

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

Last but not least, it’s built with Electron + Vue.js. And we ❤ Vue.js at Snipcart.

Publii tutorial: building a static site deployed on Netlify

Publii static site demo

I went all in.

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 e-commerce site!

Unlike many of our usual tutorials, the demo in this one is a real, fully functioning e-commerce site. You can actually buy the stickers. ¯_(ツ)_/¯

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: 4 hours
Total money spent: 115$ (15 on the domain, 100 on stickers!)

What I did for this project:

  • Designed a very basic sticker using Sketch.
  • Used Sticker Mule to create and order 100 stickers.
  • Purchased a domain name (https://nextonewontbeamac.com/) using iwantmyname.
  • Used Publii’s free static site CMS to generate HTML, CSS, and JS files (i.e. a basic static site!).
  • Made a couple of design tweaks to their Simple theme using VS Code.
  • Added e-commerce to my static site using Snipcart.
  • Created and connected a Stripe account to my Snipcart account—to accept credit card payments.
  • 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 [email protected] address using Zoho Mail (free)
  • Sold my first sticker to a colleague! (Shipping was fast.)

In this tuts, I’ll focus on the website creation and deployment parts (Publii, Snipcart, Netlify).

1. Installing Publii

Downloading Publii's desktop app

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

2. Creating the static site with Publii

Creating a site in Publii

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

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

Picking a theme in Publii

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

Adding a new post in Publii

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

Editing a post in Publii

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

Custom theme settings in Publii

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:

Adding Mac’s spinning beachball of death as a favicon

Adding Mac’s spinning beachball of death as a favicon

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

Publii local offline preview

3. Adding e-commerce with Snipcart

Publii + Snipcart flow live

You’ll need a Snipcart account if you want to do this part. It’s forever free in Test mode, FYI.

With Snipcart, adding e-commerce to a Publii site is easy. In the Publii admin, I added Snipcart’s required JS under Tools > Head. In Snipcart’s dashboard, you can find that snippet of code under Account > API Keys.

Including Snipcart's JS in Publii source

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

Accessing the HTML source of a Publii post

From there, I added a buy button for my product, with the appropriate Snipcart HTML attributes:

<button class="snipcart-add-item"
    data-item-name="Next One Won't Be a Mac - Sticker"
    data-item-description="Cancel that free Apple promo you're doing with your Mac.">
    Buy the sticker

Adding the buy button in Publii's HTML

4. Deploying the static site to Netlify

Synchronizing Publii with 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.

Netlify site admin dashboard

Netlify site admin dashboard

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

OAuth access tokens in Netlify

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

Netlify custom domains management

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

Netlify nameservers

iwantmyname Netlify DNS updates

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.

Netlify SSL Let's Encrypt panel

And that’s it, friends.

Make sure you visit my fully functional, very profitable, Awwwards-winning e-commerce site.

If you don't want you next laptop to be a Mac, buy a sticker—I’ll personally send it to you.

Closing thoughts

I didn’t think I’d create and deploy a working static e-commerce 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!

If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!

Suggested posts: