My attempt at a generic manga CMS
Monochrome requires a copy of this repository, docker and docker-compose to run.
Once those requirements are fulfilled you need to set up your
.env and simply run
make install
, and the different services will be launched.
Two different "flavors" are available:
caddy
Includes PWA support, HTTPS (requires a domain name and to be the only web server on the machine), and optimisations, the one you most likely want.make flavor=caddy install
nginx
Same as production but without the HTTPS, in case you have other web servers and have a reverse proxy or want to handle the HTTPS yourself (ex. intranet).make flavor=nginx install
Monochrome uses a .env
file to take your settings,
an example is provided here.
Note: The database should be isolated by docker and only accessible by the Monochrome API, however using unique username and password is very recommended.
DB_NAME
Name for the database.DB_USER
User to connect the database with.DB_PWD
Password of that user.SECRET_KEY
Secret used to encrypt the connections, change it asap.
Note: Those can and are recommended to be completely random, to generate them
you can use make secret
PROTOCOL
http
orhttps
, if you use a flavor that doesn't handle HTTPS automatically, you'll still have to set it up on your own.DOMAIN_NAME
The domain the app will be available on, ex:manga.d34d.one
orlocalhost
TITLE
Name of your website, used for stuff like the title of the tab when you open the website.DESCRIPTION
Description of your website.
Updating is as simple as running the make update
command. Do keep in mind that major version updates may break some stuff
so please read the version changelogs before updating.
In case you want to compile the WebUI static files, you simply have to edit the
.env.webui
file(details)
and run make build-webui
. This will create the static files inside a ./dist
folder.
The motivation behind the Deta implementation was to have a stateless full stack (the frontend being static already). This would allow us to to deploy Monochrome on the cloud, potentially for free. If you want to go down this route here's a not detailed list of the options you have to do so.
All of this is possible because of Deta, which allows us to have a cloud database and file storage for free. To use the deta version of the API you'll need to create a Deta account and obtain a project key, that's all you need for the API to work.
Note: Deta is good, but if there's another free DB and file storage service out there, the API could be implemented easily enough with those as well.
The API is available as a docker image
ghcr.io/monochromecms/monochrome-api-deta:latest
,
so any service that allows us to run docker containers should be able to host
the API.
Actually, the first option doesn't use the docker image, but it fits within the
Deta theme. You'll need git
and the Deta CLI.
# If you want to go the Deta CLI route:
git clone https://github.com/MonochromeCMS/monochrome-api-deta
cd monochrome-api-deta
deta login
deta new .
deta deploy
deta auth disable
# Set up the .env file ex: https://github.com/MonochromeCMS/monochrome-api-deta/blob/main/.env.example
deta update -e .env
# A deta cron job is available to clean up the lingering upload sessions,
# more info: https://docs.deta.sh/docs/micros/cron
deta cron set "7 days"
You can then use the Deta UI to check the logs and the URL the API is hosted on.
NOTE: Micros are limited to 128MB per execution, this can be a problem when uploading big chapters, luckily an increase can be requested.
This one is harder but the one that gives the best performance for free:
- Create a Google Cloud free account (requires a credit card, but doesn't cost anything): https://cloud.google.com
- Copy the image from the GitHub registry into the Google registry: https://cloud.google.com/artifact-registry/docs/docker/pushing-and-pulling
- How to create a Cloud Run service: https://cloud.google.com/run/docs/deploying Details:
- Set the container port to 3000
- 128Mb can be short sometimes, so 256Mb memory is recommended
The frontend is built into static files, either inside a container make build
or directly to a dist
folder (details).
So we can either use the same providers as the API and CDNs.
- Set up the .env.webui file
- Create a Netlify account
- Build the app with
make build-webui
- Drag and drop the
dist
folder on the Netlify dashboard - This will give you a Netlify URL, change it to your liking and update the .env.webui file to the new domain name.
- Build the app again and publish it again in Netlify.
My production deployment is available on https://manga.d34d.one, it uses the Postgres API inside a VPS.
A demo deployment is available on https://monochromecms.netlify.app, it uses
the Deta API inside Google Cloud Run and the website on Netlify.
You can test it out with the user test:test
, please don't remove or edit
it to allow other users to test it out.
Check those, for more information on the services that make up Monochrome:
Credits:
- Base API template: https://github.com/grillazz/fastapi-sqlalchemy-asyncpg
- Logo font: Lemon Milk by Marsnev