Building a Website with Netlify and Publii – The New Stack

For many of us, the fortunes of various front-end technologies seem as feverish as the pop charts. Lots of energy and excitement erupts about new things that really feel like old things. Meanwhile, there are many underlying trends that are quietly evolving. This article talks about one of them and encourages you to try it.

The Internet has never had a “target design”; it’s just a series of pipes. But over time we’ve come to accept that websites are nice and if everyone follows the rules for HTTP requests and serves HTML pages, that’s the best way to satisfy most casual user requests.

An ecology of web servers, providers and developers has evolved. Basically, a user types a URL into the browser, the request is then routed to a web server, the server verifies the user’s credentials and creates the appropriate page and sends it into the channel. Waiting a bit for a page is always okay if that page is exactly what you need.

And yet, many sites do not personalize information at all. If the website always displays the same information for everyone, why do we have to go to a web server to generate it?

This introduces the idea of static website. Like all industry terms, it can mean slightly different things depending on the context, but on the original web, it was all a static site. The innovation then was the “hyperlink”, or the ability to seamlessly jump to different pages on different servers.

Technically, a site had three good reasons to communicate with its origin server:

  • A user’s credentials needed to be verified,
  • the site displays regularly updated information,
  • or the page collected information from the user to be consumed by the server.

With tools like javascript and modern browsers, the page itself can quite easily communicate directly with a service through its APIs. So, a more accurate definition of a static page is one where the structure of the pages and the site is fixed, and any dynamic information injected does not change that. How a site appears on the display of a specific device is also decided by the page itself, probably with javascript media queries.

Most of us are aware that some sites load oddly faster than others. Today, the Internet is still a series of channels, but there are many transmission stations that collect, store (i.e. cache), and even accelerate certain content for easier local access. It’s no surprise – if I want to see the latest popular and widely spread cat meme, surely it should be easier to find or recall than an academic paper on the scarcity of cobblestones in Patagonia.

Indeed, the Internet is based on Content Delivery Networks (CDNs) to help expedite most requests. The CDN supports the idea that “the edge” is a valid place to cache documents, so that you don’t have to trace back to the original source.

So we have everything we need to understand jamstack (or more and more just jamstack). The Jamstack consists of creating predefined static pages to be served directly from a CDN.

If you were wondering, the acronym is Javascript (for scripting), AIP (if necessary), Markup (as in HTML and CSS). If a site no longer has a web server behind it, there are less obvious entry points for malicious attacks – in short, the Jamstack is considered more secure.

Okay, but if we’re not using a web server to dynamically generate and serve pages, how do we build sites? It’s here that static site generators While these are often developer-focused tools that require knowledge of templates and frameworks, there are a few generators that are actually desktop applications. Once you’ve defined your site, the builder will build it ready to deploy to a CDN.

So, in summary, all you need to reach the edge is:

  • Signing up with a CDN hosting service.
  • A static site generator.
  • A domain name that you control.

For example, I use Netlify and the site builder Publish with my domain, surveillance.productionsbought at Float. I built and still update the site with Publii, push it to Netlify, which then publishes it to their CDN.

Publii is an easy to use application that allows you to create a website much like a classic CMS. Set themes and layouts, then add your content. You don’t have precise control, but it’s a great way to build sites quickly. But whatever builder you try, make sure it can create the type of site you want with the skills you have.

You will need to establish a trust relationship between your domain provider and your CDN service. It should be a documented process, even if it’s a bit technically complicated.

I modified the Hover control panel to redirect DNS traffic to Netlify:

And I added my custom domain to Netlify so that it is registered as an external provider. You can then add any changes to DNS records that you might need.

With Netlify, you’re given a locally generated name and domain (I’m afraid it’s just “dreamy goodall”) which makes testing easier; you then add your personalized name next to:

Custom domains

On the Publii app, you can explicitly configure creative for Netlify. Note the need for a site ID and token:

Server settings

Back on the Netlify site, you can retrieve this site ID:

Site ID

And on another screen, you can create a new access token.

Don’t worry too much between the specifics – once you establish trust between the tools, you can create a site and then deploy it to the edge.

Although it required some technical acumen, there was no need to write any code, and for a personal project, the only cost was for the domain name. Playing in this realm also gives you a real sense of what “serverless” means.

So go ahead and enjoy the flavor of JAM you prefer.

Sherry J. Basler