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

Image for post
Image for post
Photo by Marvin Meyer on Unsplash

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

1. Git & SSG-based

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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 info@nextonewontbeamac.com 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

Image for post
Image for post

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

2. Creating the static site with Publii

Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

3. Adding e-commerce with Snipcart

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

4. Deploying the static site to Netlify

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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

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!

Any questions? Feel free to hit comments to give us your thoughts, feedback, and questions. If you enjoyed this post, take a second to 👏 or share on Twitter!

Originally published on the Snipcart blog and in our newsletter.

Image for post
Image for post

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +444,678 people.

Subscribe to receive our top stories here.

Image for post
Image for post

The Startup

Medium's largest active publication, followed by +719K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store