A Makefile template for Kirby CMS with esbuild and tailwindcss

.deploy

.htaccess
index.php
favicon.svg
favicon.png
assets/
media/index.html
kirby/
site/accounts/index.html
site/blueprints/
site/cache/index.html
site/collections/
site/controllers/
site/config/
site/models/
site/plugins/
site/sessions/index.html
site/snippets/
site/templates/

.gitignore

# Ignore Kirby files
/media/*
!/media/index.html
.lock
/site/cache/*
!/site/cache/index.html
/site/accounts/*
!/site/accounts/index.html
/site/sessions/*
!/site/sessions/index.html
/site/config/.license
/site/logs/*

# Ignore node files
/node_modules

# Ignore content files
/content/*

# Ignore built files
/assets/bundle

readme.md

Kirby CMS Makefile

This gist is an example of how to use a Makefile for working with Kirby CMS.

It exposes a few different tasks:

• make dev starts a dev server on localhost:9000, running Tailwind CSS and esbuild watcher processes in the background.
• make build builds a set of minified production assets
• make deploy runs a build and then uses rsync to deploy to a remote server, defined by the DEPLOY_ variables at the top
• make content downloads content from the remote server, deleting any local files. This makes it easy to test against production data in your local environment.
• make kirby upgrades Kirby to the latest version by fetching the new files from GitHub
• make clean removes any built files

The .deploy file is a simple text file that we pass to rsync to tell it which files and folders to sync. This helps avoid syncing sensitive or local data like the license file or user account information. You can add or remove lines as needed.

Makefile

DEPLOY_HOST ?= "example.com"
DEPLOY_USER ?= "user"
DEPLOY_DIR  ?= "~/example.com"

PORT ?= 9000

CURRENT_DATE=$(date +%Y%m%d-%H%M%S)

dev: yarn.lock ## Run a local dev server
	@./node_modules/.bin/concurrently -k \
		'php -S localhost:$(PORT) kirby/router.php' \
		'./node_modules/.bin/esbuild src/*.ts --bundle --outdir=assets/bundle --watch' \
		'./node_modules/.bin/tailwindcss -i src/index.css -o assets/bundle/index.css --watch'
.PHONY: dev

build: assets ## Build all static assets
.PHONY: build

deploy: build .deploy ## Deploy the site to the staging server
	@rsync -avrzP --delete --files-from=.deploy --exclude=".DS_Store" --exclude=".license" . "$(DEPLOY_USER)@$(DEPLOY_HOST):$(DEPLOY_DIR)"

content: ## Sync content from the server to the local environment.
	@rsync -avz --delete "$(DEPLOY_USER)@$(DEPLOY_HOST):$(DEPLOY_DIR)/content/" content/
.PHONY: content

kirby: ## Upgrades Kirby to the latest version
	@mkdir -p kirby.new
	@curl -L -o - $$(curl -s https://api.github.com/repos/getkirby/kirby/releases/latest | jq -r ".tarball_url") | tar xz -C kirby.new --strip-components=1
	@mv kirby "kirby.$(CURRENT_DATE)" && mv kirby.new kirby && rm -rf "kirby.$(CURRENT_DATE)"
.PHONY: kirby

clean: ## Clean all built files
	@rm -rf ./assets/bundle/
	@rm -rf ./node_modules/
.PHONY: clean

yarn.lock: node_modules package.json
	@yarn install
	@touch -mr $(shell ls -Atd $? | head -1) $@

node_modules:
	@mkdir -p $@

assets: assets/bundle.css assets/bundle.js
assets/bundle.js: yarn.lock src/index.ts
	@./node_modules/.bin/esbuild src/*.ts --bundle --outdir=assets/bundle --minify --sourcemap
assets/bundle.css: yarn.lock src/index.css
	@./node_modules/.bin/tailwindcss -i src/index.css -o assets/bundle/index.css

help: ## Show this help
	@echo "\nSpecify a command. The choices are:\n"
	@grep -E '^[0-9a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[0;36m%-12s\033[m %s\n", $$1, $$2}'
	@echo ""
.PHONY: help

package.json

{
  "private": true,
  "devDependencies": {
    "concurrently": "^7.6.0",
    "esbuild": "^0.14.39",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2"
  },
}