A self-contained example of a static publishing platform for websites with Garage, Drone, StaticCMS and Gitea.
Find a file
2023-02-09 15:35:59 +01:00
.gitignore wip 2023-02-09 15:22:31 +01:00
docker-compose.yml fix docker compose 2023-02-09 15:35:59 +01:00
README.md wip 2023-02-09 15:22:31 +01:00
teabag.env wip 2023-02-09 15:22:31 +01:00

Static Publishing Platform

created at: 2023-02-09. if you are reading this file years later, it is very probably obsolete.

based on:

Install Gitea

The recommended docker-compose is a good start for this toy example: https://docs.gitea.io/en-us/install-with-docker/

You need to configure CORS:

[cors]
ENABLED=true
ALLOW_DOMAIN=*
ALLOW_CREDENTIALS=true
SCHEME=*
HEADERS=Content-Type,User-Agent,Authorization

The last entry is required but ignored in Gitea version < 1.19, you must instead use a patched image to allow the custom header Content-Type. For example, I am using this one: superboum/gitea:1.17.4-cors.

Now you are ready to start your gitea instance:

docker-compose up -d

Now go to http://localhost:3000 and configure your Gitea instance. Create an administrator account by unfolding the last section.

Install Teabag

The first step is to create some tokens for Teabag in Gitea. Go to this page: http://localhost:3000/user/settings/applications And create an Oauth2 application with the following parameters:

  • name: Teabag
  • callback: http://localhost:3001/callback

Now, use the example env file from the official repo as a template. Mine look like that:

HOST=0.0.0.0
PORT=3001
SESSION_SECRET=JdNF...

GITEA_KEY=968c9...
GITEA_SECRET=gto_65p
GITEA_BASE_URL=http://localhost:3000
GITEA_AUTH_URI=login/oauth/authorize
GITEA_TOKEN_URI=login/oauth/access_token
GITEA_USER_URI=api/v1/user
CALLBACK_URI=http://localhost:3001/callback

This file is fetched from ./env/teabag.env or /etc/teabag/teabag.env, so pick one of this path.

Check that teabag is running:

$ curl -I http://localhost:3001
HTTP/1.1 200 OK
Date: Thu, 09 Feb 2023 13:32:15 GMT
Content-Length: 73
Content-Type: text/html; charset=utf-8

Create a blog with Jekyll

I don't really like CDNs so we will locally download the javasript file once and for all. For this example, we will create a basic jekyll blog.

nix-shell -p bundler
bundler install jekyll
bundle exec jekyll new my-blog
cd my-blog
bundle install
bundle exec jekyll serve

Now you website should be available at: http://localhost:4000.

You must now create a repository for your website on our target gitea instance. Mine is quentin/my-blog.

Use the gitea UI and then:

git init
git add .
git commit

git remote add origin http://localhost:3000/quentin/my-blog.git
git push -u origin main

Add "Static CMS" to your blog

In your blog folder (my-blog), create a file at this path admin/index.html with this content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the identity widget -->
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="static-cms-app.js"></script>
    <script>CMS.init()</script>
  </body>
</html>

And now, we must get the file static-cms-app.js. We will pull it from their CDN:

wget https://unpkg.com/@staticcms/app@^1.0.0/dist/static-cms-app.js

OR

you can also build it:

git clone git@github.com:StaticJsCMS/static-cms.git
yarn
yarn build
cp packages/app/dist/static-cms-app.js .

and finally, we need a configuration file:

backend:
  name: gitea
  repo: quentin/my-blog
  base_url: http://localhost:3001
  api_root: http://localhost:3000/api/v1
  branch: main

media_folder: 'assets/'
site_url: http://my-blog.web.localhost
display_url: http://my-blog.web.localhost
locale: 'en'
collections:
  - name: 'article'
    label: 'Article'
    folder: '_posts/'
    editor:
      preview: true
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    fields:
      - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

So, your blog folder should look like that (note the admin folder and its 3 files):

$ tree
.
├── 404.html
├── about.markdown
├── admin
│   ├── config.yml
│   ├── index.html
│   └── static-cms-app.js
...

And now you are ready to test your CMS admin interface!

bundle exec jekyll serve

And then go to: http://localhost:4000/admin/

Click on "Login with Gitea".

Install Drone

Configure Drone on your repo

Install Garage

Configure a website on Garage

Configure Drone to deploy your website on Garage

Profit