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:
Some web projects are really simple, and so should their tooling be.
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
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
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
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
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
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:
Adding Mac’s spinning beachball of death as a favicon
As you can see from the gif below, updating/previewing locally works A1:
3. Adding e-commerce with Snipcart
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.
With this done, I went back to my Publii post, and opened the HTML editor:
From there, I added a buy button for my product, with the appropriate Snipcart HTML attributes:
<button class="snipcart-add-item"
data-item-id="1"
data-item-name="Next One Won't Be a Mac - Sticker"
data-item-price="5.00"
data-item-image="boring-bose-80b3c8.netlify.com/media/posts…"
data-item-weight="10"
data-item-url="nextonewontbeamac.com"
data-item-description="Cancel that free Apple promo you're doing with your Mac.">
Buy the sticker
</button>
4. 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.
Netlify site admin dashboard
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 iwantmyname 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.
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!
Originally published on the Snipcart blog and in our newsletter.