Created a complete documentation system for new documentors, including
interactive architecture diagrams and step-by-step guides for all documentation
workflows.
New LikeC4 architecture project (resources/doc-likec4/):
- Created documentation-platform.c4 model with 252 lines covering:
* Actors: documentor, reviewer, CI system, edge platform
* Tools: Hugo, LikeC4, Git, VS Code, markdownlint, htmltest
* Processes: local development, testing, CI/CD pipeline
* Repositories: git repo, cloudlet registry
- Defined 6 comprehensive views:
* overview: Complete documentation platform ecosystem
* localDevelopment: Local writing and preview workflow
* cicdPipeline: Automated testing and validation
* deploymentFlow: From commit to production
* fullWorkflow: End-to-end documentation lifecycle
* testingCapabilities: Quality assurance toolchain
New documentation pages (content/en/docs/documentation/):
- _index.md: Overview and introduction for new documentors
- local-development.md: Setting up local environment, live preview
- testing.md: Running markdown, HTML, and link validation
- cicd.md: Understanding automated CI/CD pipeline
- publishing.md: Deployment to Edge Connect Munich cloudlet
- quick-reference.md: Command reference and common tasks
Hugo shortcode for embedding LikeC4 diagrams:
- Created layouts/shortcodes/likec4-view.html
- Supports loading state with animated indicator
- Graceful error handling for missing views
- Automatic shadow DOM checking to ensure webcomponent loaded
- Usage: {{< likec4-view view="viewId" project="projectName" >}}
Supporting documentation:
- resources/LIKEC4-REGENERATION.md: Guide for regenerating webcomponents
- All diagrams are interactive and explorable in the browser
- Views include zoom, pan, and element inspection
This implementation provides:
1. Self-documenting documentation platform ("meta-documentation")
2. Visual learning for complex workflows via interactive diagrams
3. Clear separation of concerns (6 focused views vs 1 overwhelming diagram)
4. Onboarding path for new team members
5. Living architecture documentation that evolves with the platform
All new documentation passes markdown linting and builds successfully.
4.8 KiB
| title | linkTitle | weight | description |
|---|---|---|---|
| CI/CD Pipeline | CI/CD | 40 | Automated testing and container build process. |
Overview
Our documentation uses a continuous integration and deployment pipeline to ensure quality and automate deployment.
{{< likec4-view view="cicdPipeline" project="documentation-platform" >}}
GitHub Actions Workflow
The CI/CD pipeline is defined in .github/workflows/test.yml and runs on:
- Pushes to
mainbranch - Pull requests to
mainbranch
Workflow Steps
1. Checkout Code
- uses: actions/checkout@v4
with:
submodules: recursive
fetch-depth: 0
- Clones repository with full history
- Includes Git submodules (Hugo modules)
2. Setup Hugo
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: 'latest'
extended: true
- Installs Hugo Extended
- Uses latest stable version
3. Setup Node.js
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '24'
cache: 'npm'
- Installs Node.js v24
- Caches npm dependencies for faster builds
4. Install Dependencies
npm ci
go install github.com/wjdp/htmltest@latest
- Installs npm packages (markdownlint, htmlvalidate)
- Installs htmltest for link checking
5. Run Tests
npm run test:build
npm run test:markdown
npm run test:html
- Validates Hugo build
- Lints Markdown files
- Validates HTML output
6. Link Checking
- name: Run link checker
run: htmltest
continue-on-error: true
- Checks all links
- Continues even if links fail (soft requirement)
7. Upload Results
- name: Upload htmltest results
uses: actions/upload-artifact@v4
if: always()
with:
name: htmltest-report
path: tmp/.htmltest/
- Uploads link check report
- Available for download from GitHub Actions
Container Build Process
After tests pass, a container image is built:
task build:oci-image
Build Process
-
Reads version information from
.env.versions:NODE_VERSIONGO_VERSIONHUGO_VERSION
-
Builds Docker image using
Dockerfile:- Multi-stage build
- Hugo generates static site
- Nginx serves the content
-
Tags image with:
latest- Git commit SHA (short)
Dockerfile Structure
# Build stage
FROM node:${NODE_VERSION} as builder
# Install Hugo, build dependencies
# Run: hugo --gc --minify
# Output: public/ directory
# Runtime stage
FROM nginx:alpine
# Copy public/ to /usr/share/nginx/html/
# Configure Nginx
Testing the Container
task test:oci-image
This:
- Builds the image
- Starts container on port 8080
- Tests HTTP endpoint
- Cleans up container
Package.json Scripts
The package.json defines test scripts:
{
"scripts": {
"test:build": "hugo --gc --minify --logLevel info",
"test:markdown": "markdownlint 'content/**/*.md'",
"test:html": "htmlvalidate 'public/**/*.html'"
}
}
Running CI Locally
Simulate the CI environment locally:
task ci
This runs the same tests as GitHub Actions.
Monitoring CI Results
Successful Build
✅ All tests pass → Ready to deploy
Failed Build
❌ Tests fail:
- Click on the failed workflow in GitHub Actions
- Expand the failed step
- Read the error message
- Fix locally:
task test:<specific-test> - Commit and push fix
Viewing Artifacts
- Go to GitHub Actions
- Click on workflow run
- Scroll to "Artifacts" section
- Download
htmltest-report
Best Practices
- Don't push to main directly - Use feature branches and PRs
- Wait for CI before merging - Green checkmark required
- Fix broken builds immediately - Don't let main stay red
- Review CI logs - Understand why tests fail
- Update dependencies - Keep versions current in
.env.versions
Continuous Deployment
After successful CI:
- Container image is built
- Image is pushed to registry
- Deployment process begins (see Publishing)
Troubleshooting
Tests pass locally but fail in CI
Possible causes:
- Different Hugo version
- Different Node.js version
- Missing dependencies
- Environment-specific issues
Solution: Check versions in .env.versions and ensure local matches CI
Build timeouts
Possible causes:
- Link checker taking too long
- Large number of external links
Solution:
- Use
continue-on-error: truefor link checks - Configure
.htmltest.ymlto skip slow checks
Cache issues
Solution: Clear GitHub Actions cache:
- uses: actions/cache@v4
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
Update the cache key to force refresh.
Next Steps
Learn about deployment to Edge environment.