Content Managment System

Install Sveltia CMS step by step

Foreword

I tried a few CMS for 11ty, but the only that do not require an extra account —other that the git repository system (Forgejo, gitlab or github)— are Decap CMS and its recent fork Sveltia CMS. I chose the second one because it looks better maintained, more promising and it has a better UX.

Sveltia CMS

Sveltia CMS is a content management system (CMS) designed to provide a user-friendly interface to manage content for static site generators. It is firstly created to be hosted by Netifly. It offers a clean and accessible interface to create and edit pages that are still saved as files on the git repository of your project.

Sveltia CMS is a complete reboot of Netlify CMS whose development was discontinued in 2022 and then rebranded in 2023 under the name Decap CMS. Since Sveltia CMS aims to offer all features of the original CMS, there is alost no difference between the two in terms of feature and configuration. For this reason, it is possible to follow the documentation of the later while using Sveltia CMS.

Sveltia CMS is a single-page app that is pulled in the /admin part of this starter kit. Nevertheless, you will need to go through a few steps before you can take advantage of it.

Create OAuth Application

Go to the Github OAuth settings from Settings > Developer Settings > OAuth Apps > Generate New.

Fill Homepage URL with the url of where you will install your external OAuth client. Authorization callback URL will get the same url followed by ‘callback’ https://example.com/callback.

Then hit on the button [Register application].

On the next step, you will have to create your Client Secret (CLIENT_SECRET) and save it in a secure file. Also save the Client ID (CLIENT_ID).

Deploy an external OAuth client

In Netify you can set up all you need to deploy and host your site on Netifly and maintain it with Sveltia CMS, but you can also deploy your site elsewhere and also use your own external OAuth client. Decap documentation has referenced a list of external apps you can install on your server for this.

I chose the PHP Netlify CMS GitHub Oauth that comes with a blogpost detailing how you can use it on a small hosting server.

git clone https://github.com/mcdeck/netlify-cms-oauth-provider-php
cd netlify-cms-oauth-provider-php
composer install

You will then have to copy the .env file into a new .env.local where you will add the CLIENT_ID and CLIENT_SECRET you need from the OAuth Application that you previously created on github:

OAUTH_PROVIDER=github
...
OAUTH_CLIENT_ID=CLIENT_ID
OAUTH_CLIENT_SECRET=CLIENT_SECRET
REDIRECT_URI=https://oauth.example.com/callback
ORIGIN=https://host.example.com

Do not include any path or trailing slash on ORIGIN or it will not redirect.

You will then have to upload everything to your server and make sure you set the document root of your server in the public directory.

The index page of your site should say hello and offer a link to Log in with Github. The current starter kit has a link to “My login with Github”.

Install Sveltia CMS to your static site

In this starter, the CMS is already installed in the _assets/public/admin. You will find two files: index.html and config.yml.

If you prefer to use Decap CMS over Sveltia, simple uncomment the line in index.html, where the decap script is loaded and remove the one for Sveltia.

The index.html is the page that will load the CMS application.
config.yml is the config file. You can update it to set the behaviour of your CMS. Before that, you will need to update the base_url: with the path to the cms oauth provider you just published.

base_url: https://oauth.example.com # Path to ext auth provider

You may also change the media_folder where all images and media will be uploaded to. The last part, with the collections defines what folders and pages are editable by the CMS as well as the fields that will be available in the CMS. Usually you will set here all variables that are present in the Front Matter of your pages.

In the current setup, I used media_folder: '' and public_folder: '//' to allowimages to be saved in the same folder as the page.

Once the CMS installed, you can go to your website admin section. (i.e. https://aloxe.github.io/huwindty/admin/), and once you are authenticated with your github account, you can start edit the pages that are in your config file.

User management with github

In your repository settings on Github, go to settings > collaborators and click on the button [Add people]. You will be able to add any github user are collaborator. Only people that you added will be able to edit your pages and you can revoque them at any time by removing them from the list.