Software

Creating an SRD Site with Publii and Bunny.net

Alex walks through using Publii and Bunny to publish a TTRPG SRD website for those who want a less technical option.

Alex Ward

Mar 3, 2025 • 11 min read

If you know anything about me, you know that I do a fair amount of static site blogging, and I've been searching for a really solid workflow that fits for a lot of needs. I've written about this at length, in fact:

Recently, a friend raised the question "how can I make an online SRD for my game?" and I provided a lot of … probably extraneous details in my excitement. But, ultimately I wound up recommending Publii and some sort of static file host (Netlify, in fact). I figured the wider community might benefit from some instruction here, so here we are.

😈

This post is geared towards those who have no idea what git is, or how to set up a CI/CD pipeline, or anything of the sort.

Now, there are a fair number of downsides to this approach, which I'll cover at the end of the article, but I'll spend the majority of this article walking through building out the example. Likewise, my goal for this is to do as little customization as possible.

Today, we're going to build the Raccoon Train Heist SRD:

Raccoon Train Heist SRD - Example

Prerequisites

So, if you want to follow along with this example, you'll need to Download Publii along with the free Editorial 2 theme. For testing this on your own computer, that'll be enough. If you want to make this live somewhere you'll need somewhere to deploy it. This article will provide instructions for Bunny.net's SFTP compatible storage, but Publii also has instructions and configurations for several other hosts (documentation).

Firing up Publii

When you first launch Publii, you'll be greeted with a "create your first site" window which looks like this:

Both of these settings are changeable, so don't stress too much about what you put here. I've called mine "Raccoon Train Heist SRD — Example".

After creating your site you'll be dumped into the editor window.

The sidebar has many sections, and differentiates between "posts", which are sorted by their publication date on the site, and "pages" which are designed to be more "static". The majority of the content on our demo site will be pages.

The other thing you'll want to notice is the "Menus" section, we'll be making heavy use of that section later.

The Theme

If you click the "preview your changes" button right after creating a new site, you'll be greeted with something that looks like this:

You're seeing the default theme (called "Simple 3.1.2.0" at the time of this writing), but there are many others. Let's go install the theme we downloaded earlier: Editorial 2.

Finding the section to upload themes is fairly counterintuitive. First, you need to click on the "three dot" menu in the top right-hand corner and then "Themes", like so:

After that, you can click the "Install Theme" button, selecting the .zip file that you downloaded earlier. Once that's done it'll appear in the list of themes.

Selecting the Theme

Selecting the theme, however, takes place in a different location (which is weird since this is a per-site setting). Go to "Site Settings" in the Sidebar, and then change the theme under "Current Theme".

If you now preview your changes again, you'll see this:

There are a few sections worth noting here. "Menu" is where our sidebar content is going to wind up. "Recent Posts" is intrinsic to the theme, and is where and posts will appear. We'll put a single one in for content — but if we want to remove that section entirely we'll need to modify the theme.

The "get in touch" section is controlled by a theme option, so let's go turn that off under "Theme" > "Sidebar". We can also change the color of the bar and accents here.

With that, our base work is done, and we're ready to start making content.

Creating the SRD Content

In order to start putting together the SRD, we're going to need some pages. Navigate to the "Pages" menu, and you'll see the editor choices from before. You have three options:

WYSIWYG Editor: You'll get a rich text editor with controls at the top, letting you format things easily via the editor itself.
Block Editor: This is an editor where each bit of content is a "block" similar to how Ghost, Drupal, and WordPress handle it.
Markdown: This is a very simple markdown editor, with no frills.

You can choose a different editor for each post, but the last one you used will be the one you get if you click the "new page" button.

Raccoon Train heist is a single page game, so it doesn't have much in the way of "rules". We'll start by creating the Character Creation page using the WYSIWYG editor, putting the first section in there and adding some embellishments. Here's how that looks in the editor once I'm done:

😈

Yes, the example Raccoon's name is Bagel.

Here's the point where I say "now draw the rest of the owl" and fill out the rest of the pages. This is what that looks like when I'm done:

Now it's time to set up the menus.

Menus

The way menus work in Publii is the theme provides menu "slots" and you can assign your custom menus are assigned to the slot. In the Editorial 2 theme, there is but a single slot: Main menu.

Now, create a menu. I've named mine "sidebar". Once you do that, you're given the option to assign it to the Main menu. Do so.

Next up is to create the menu items. When you create a menu item, a sidebar appears to the right with a few different options. You must give the menu item a label (which will usually be the same name as the page you're linking to) and then select the "Type". Type can be a number of things, but for most of our menu we want to link to those pages we created above.

Once you've created all the links, you can create a hierarchy with those pages to further split up the sections of your SRD. You can see how my menu wound up looking in the list above.

😈

That "SRD" page is set as a "divider", if you link it to a page in the Editorial theme it won't let you expand the menu. This is a limitation of the theme.

Let's take a look at how that looks now by previewing the site:

I've expanded the SRD menu, which starts closed by default. Now, there's a problem: if you click on one of the SRD subpages, the menu will be closed when you visit the page. That's not a great UX, and this is something the theme really should handle (but currently doesn't).

So, as a stopgap you can use a bit of JavaScript to paper over the problem. Go to the "Tools and Plugins" menu and then "Custom HTML". Select the "footer" section and add the following code:

<script type="text/javascript">
    const opener = document.querySelector('.active-parent .opener');
    if (opener) {
    	opener.classList.add('active');
    }
</script>

That'll look like this when you're done:

All this does is append the "active" class to any opener element that is the active parent of the child page, which will cause it to open.

Let's fill that blank spot

So you might have noticed a blank spot on the homepage under "Recent Posts". One way to deal with this is to modify the theme so that doesn't matter (and that's longer term something I'll probably do), but for the moment you can simply create a post and it'll fill up the space.

I've done so by making a very simple "About this SRD" post, using the markdown editor so you can see how that looks:

Publish that, and we'll have a finished homepage in the preview!

Getting the Site On Bunny.net

Okay! Now that we have a semi-functional example site, we can get it up online. Bunny.net is a great little CDN host which is intuitive and affordable (but not free, unlike some other options).

If you're interested in bunny.net, consider using my referral code which will give me some credit to keep stuff like this running: https://bunny.net?ref=aq5tlnnx0c

Now that's out of the way, there are two things we need to get the site up on Bunny. The first is setting up a "Storage Zone" in Bunny which will also create a "Pull Zone". That'll give you a public URL for the site. After that, we need to connect it to Publii via the SFTP server option.

Creating the Storage Zone

First, visit https://dash.bunny.net/storage/add and create your new storage zone. You can call it whatever you want. For this post, I've picked "publii-srd-example". You can keep the storage settings at their defaults.

Once that's created, you can click into your new storage zone, and go to the "FTP and API Access" page to get your SFTP credentials:

😈

Note that the Hostname will be different depending on where your primary storage zone is located.

Then, you'll need to create a Pull zone, so you can have a public hostname for your storage zone. There are two ways to get here, but the easiest way is to click "Connect Pull Zone" and then "New Pull Zone". You'll be taken to a page like the following screenshot. Make sure you pick "Storage Zone" as the origin type and only select the regions you want to replicate to in order to keep costs down:

Note the name you give the Pull zone, you'll use that in a moment. Also, it has to be globally unique.

Finally, you'll need to set up the server settings in Publii. Click on the "Server" option in the sidebar and pick "SFTP" as the server type.

Then, fill out the details from your Storage zone's FTP page. The first option for "site name" will be the one you put in the first field so that URLs will be generated correctly. Here's how that'll look when you're done:

😈

Even though Bunny says the port should be 21, you need to keep the port as 22 in Publii.

Once that's done, save your changes and "Sync your Website". Once the process is done, you'll be able to visit your *.b-cdn.net URL and your example SRD will be accessible.

💡

If you want to protect the files.publii.json file like the infobox says, you can do so via Bunny Edge Rules.

We're done! … Not quite.

So, there are a few more settings you probably care about. What about header images? Preview cards?

A lot of stuff you might care about are under the Site Settings menu. This includes stuff like generating Open Graph tags (this is what controls the pretty link previews on social media).

There's also a lot of goodies under the Theme setting, allowing you to link to socials or whatnot.

What's next from here?

So, from here, if you want to use Publii to maintain an SRD for real, there are several things you might want to consider. Several of these are the reason I prefer to use 11ty and Front Matter for my static sites (though Publii's editing experience is pretty good).

Having Multiple Authors on a Publii site is hard

So, Publii doesn't have a great way to synchronize content between different computers. Their current recommendation is to use Dropbox and point the sites folder at Dropbox. You can do this with other services that sync storage from local to the cloud, I'm using Nextcloud for this and the instructions are basically the same.

If you want to allow multiple people to access the site, you just put it in a shared folder and invite them to the folder (and have them set up Publii in the same way).

This creates another problem, which is...

Version Control is lacking on the creation side

Publii allows you to use Git to deploy the site, but it does not allow you to use it to version control the source content. This is because all the content is stored in a SQLite database in that sites folder (under the input folder).

You can take manual backups every time someone makes a change, but rolling back if someone makes a change is, suboptimal. I'd like them to implement a proper versioning system, which they could do by adding a post_versions table to that SQLite file, but I don't see that anywhere in the roadmap or suggested locations.

So, yeah, take backups.

Exporting Content doesn't really exist

Yeah, remember what I said about all the content being in a SQLite file? Yeah, they don't give you a way to export that easily (though it's pretty easy to write a tool to do so) and the format is in whatever editor you picked. So that means if you picked the markdown editor for a post the content is in Markdown, otherwise it's in HTML.

That could be improved by adding a bulk exporter to the app.

Alternatives

So, there are a bunch of other ways to do this, but a lot of them involve some familiarity with writing software, nodeJS, git, or automatic deployments. If this is something you're comfortable with, I recommend 11ty. I write about using it to make a solo-play site over here: