2023-02-09 12:59:26 +00:00
|
|
|
# Static Publishing Platform
|
2023-02-09 13:02:33 +00:00
|
|
|
|
2023-02-09 14:22:31 +00:00
|
|
|
created at: 2023-02-09.
|
|
|
|
|
if you are reading this file years later,
|
|
|
|
|
it is very probably obsolete.
|
|
|
|
|
|
|
|
|
|
based on:
|
|
|
|
|
- Gitea: https://github.com/superboum/gitea
|
|
|
|
|
- Teabag: https://github.com/denyskon/teabag
|
|
|
|
|
- Static CMS: https://www.staticcms.org/
|
|
|
|
|
- Drone: https://github.com/harness/drone
|
|
|
|
|
- Garage: git.deuxfleurs.fr/Deuxfleurs/garage/
|
2023-02-09 13:02:33 +00:00
|
|
|
|
|
|
|
|
## Install Gitea
|
|
|
|
|
|
2023-02-09 14:22:31 +00:00
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
```ini
|
|
|
|
|
[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.
|
|
|
|
|
|
2023-02-09 13:02:33 +00:00
|
|
|
## Install Teabag
|
|
|
|
|
|
2023-02-09 14:22:31 +00:00
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
```ini
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!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:
|
|
|
|
|
|
|
|
|
|
```yml
|
|
|
|
|
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".
|
2023-02-09 13:02:33 +00:00
|
|
|
|
|
|
|
|
## Install Drone
|
|
|
|
|
|
|
|
|
|
## Configure Drone on your repo
|
|
|
|
|
|
|
|
|
|
## Install Garage
|
|
|
|
|
|
|
|
|
|
## Configure a website on Garage
|
|
|
|
|
|
|
|
|
|
## Configure Drone to deploy your website on Garage
|
|
|
|
|
|
|
|
|
|
## Profit
|
