Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Commit 51f88b0

Browse files
Copilotmaiwald
Copilot
and
maiwald
authored
Publish armchair using GitHub pages (#36)
* Initial plan * Add GitHub Actions workflow for GitHub Pages deployment Co-authored-by: maiwald <355026+maiwald@users.noreply.github.com> * Fix YAML formatting and remove trailing spaces Co-authored-by: maiwald <355026+maiwald@users.noreply.github.com> * Add GitHub Pages deployment documentation to README Co-authored-by: maiwald <355026+maiwald@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: maiwald <355026+maiwald@users.noreply.github.com>
1 parent 792673e commit 51f88b0

3 files changed

Lines changed: 186 additions & 0 deletions

File tree

‎.github/workflows/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# GitHub Actions Workflows
2+
3+
## Deploy to GitHub Pages
4+
5+
The `deploy.yml` workflow automatically builds and deploys the Armchair application to GitHub Pages.
6+
7+
### How it works
8+
9+
1. **Trigger**: The workflow runs automatically on every push to the `main` branch, or can be triggered manually via the Actions tab.
10+
11+
2. **Build Process**:
12+
- Sets up Node.js (using the version specified in `.node-version`)
13+
- Sets up Java 17 (required for shadow-cljs/ClojureScript compilation)
14+
- Installs npm dependencies
15+
- Creates a `.env` file with the necessary environment variables
16+
- Runs the build process (similar to `scripts/build.sh`) which:
17+
- Compiles ClojureScript using shadow-cljs
18+
- Compiles Sass stylesheets
19+
- Compiles Tailwind CSS
20+
- Versions the output files using the git commit hash
21+
- Updates `index.html` to reference the versioned files
22+
23+
3. **Deploy**: Uploads the `build` folder contents to GitHub Pages
24+
25+
### Setup Requirements
26+
27+
To enable GitHub Pages deployment for this repository:
28+
29+
1. Go to your repository Settings → Pages
30+
2. Under "Build and deployment", select "GitHub Actions" as the source
31+
3. The workflow will automatically deploy on the next push to `main`
32+
33+
### Manual Deployment
34+
35+
You can manually trigger a deployment:
36+
37+
1. Go to the Actions tab in your GitHub repository
38+
2. Select "Deploy to GitHub Pages" workflow
39+
3. Click "Run workflow"
40+
4. Select the branch and click "Run workflow"
41+
42+
### Build Differences from scripts/build.sh
43+
44+
The workflow inline builds the project instead of calling `scripts/build.sh` directly because:
45+
- `sed -i ""` (macOS syntax) doesn't work on Linux - the workflow uses `sed -i` (Linux syntax)
46+
- Better visibility of each build step in the Actions logs
47+
- More control over error handling and logging
48+
49+
The build logic is functionally identical to `scripts/build.sh`.

‎.github/workflows/deploy.yml‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
16+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
17+
concurrency:
18+
group: "pages"
19+
cancel-in-progress: false
20+
21+
jobs:
22+
build:
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
28+
- name: Setup Node.js
29+
uses: actions/setup-node@v4
30+
with:
31+
node-version-file: '.node-version'
32+
cache: 'npm'
33+
34+
- name: Setup Java
35+
uses: actions/setup-java@v4
36+
with:
37+
distribution: 'temurin'
38+
java-version: '17'
39+
40+
- name: Install dependencies
41+
run: npm ci
42+
43+
- name: Create .env file
44+
run: |
45+
echo "VERSION=$(git rev-parse HEAD)" >> .env
46+
echo "RELEASE_FOLDER=build" >> .env
47+
48+
- name: Build project
49+
run: |
50+
# Make build script executable
51+
chmod +x scripts/build.sh
52+
53+
# Create release folder
54+
mkdir -p build
55+
56+
# Run the build commands directly to avoid sed -i "" issues on Linux
57+
source .env
58+
59+
# Clean release folder
60+
rm -rf $RELEASE_FOLDER/*
61+
62+
# Create directories
63+
mkdir -p $RELEASE_FOLDER/compiled/css
64+
mkdir -p $RELEASE_FOLDER/compiled/js
65+
mkdir -p $RELEASE_FOLDER/compiled/tailwind
66+
67+
# Create symlinks
68+
ln -s ../resources/public/css/ $RELEASE_FOLDER/css
69+
ln -s ../resources/public/images/ $RELEASE_FOLDER/images
70+
ln -s ../resources/public/webfonts/ $RELEASE_FOLDER/webfonts
71+
72+
# Build ClojureScript
73+
npm exec -- shadow-cljs release app \
74+
--config-merge "{:output-dir \"$RELEASE_FOLDER/compiled/js/\"}"
75+
76+
# Build Sass
77+
npm exec -- sass --source-map src/sass/app.sass $RELEASE_FOLDER/compiled/css/app.css
78+
79+
# Build Tailwind CSS
80+
npm exec -- tailwindcss -i src/tailwind/styles.css -o $RELEASE_FOLDER/compiled/tailwind/styles.css -m
81+
82+
# Rename and update files with version
83+
mv $RELEASE_FOLDER/compiled/tailwind/styles.css $RELEASE_FOLDER/compiled/tailwind/styles-$VERSION.css
84+
85+
mv $RELEASE_FOLDER/compiled/css/app.css $RELEASE_FOLDER/compiled/css/app-$VERSION.css
86+
mv $RELEASE_FOLDER/compiled/css/app.css.map $RELEASE_FOLDER/compiled/css/app-$VERSION.css.map
87+
sed -i "s/sourceMappingURL=app\.css\.map/sourceMappingURL=app-$VERSION.css.map/" \
88+
$RELEASE_FOLDER/compiled/css/app-$VERSION.css
89+
90+
mv $RELEASE_FOLDER/compiled/js/app.js $RELEASE_FOLDER/compiled/js/app-$VERSION.js
91+
mv $RELEASE_FOLDER/compiled/js/app.js.map $RELEASE_FOLDER/compiled/js/app-$VERSION.js.map
92+
sed -i "s/sourceMappingURL=app\.js\.map/sourceMappingURL=app-$VERSION.js.map/" \
93+
$RELEASE_FOLDER/compiled/js/app-$VERSION.js
94+
95+
# Copy and update index.html
96+
cp resources/public/index.html $RELEASE_FOLDER/index.html
97+
sed -i \
98+
-e "s/app\.css/app-$VERSION.css/" \
99+
-e "s/styles\.css/styles-$VERSION.css/" \
100+
-e "s/app\.js/app-$VERSION.js/" \
101+
$RELEASE_FOLDER/index.html
102+
103+
- name: Setup Pages
104+
uses: actions/configure-pages@v4
105+
106+
- name: Upload artifact
107+
uses: actions/upload-pages-artifact@v3
108+
with:
109+
path: './build'
110+
111+
deploy:
112+
environment:
113+
name: github-pages
114+
url: ${{ steps.deployment.outputs.page_url }}
115+
runs-on: ubuntu-latest
116+
needs: build
117+
steps:
118+
- name: Deploy to GitHub Pages
119+
id: deployment
120+
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,23 @@ To compile clojurescript to javascript:
2828
make build
2929
```
3030

31+
## GitHub Pages Deployment
32+
33+
This repository includes a GitHub Actions workflow that automatically builds and deploys to GitHub Pages.
34+
35+
### Setup
36+
37+
1. Go to your repository Settings → Pages
38+
2. Under "Build and deployment", select "GitHub Actions" as the source
39+
3. Push to the `main` branch or manually trigger the workflow
40+
41+
The workflow will:
42+
- Build the ClojureScript, Sass, and Tailwind CSS
43+
- Version the output files using the git commit hash
44+
- Deploy the `build` folder to GitHub Pages
45+
46+
For more details, see [.github/workflows/README.md](.github/workflows/README.md).
47+
3148
# Credit
3249

3350
All graphic assets are taken from [opengameart.org](https://opengameart.org)

0 commit comments

Comments
 (0)
⚡