website-and-documentation/content/en/docs/documentation/cicd.md
Stephan Lo 9aea2a3583 feat(docs): add comprehensive documentation platform architecture and guides
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.
2025-11-07 11:50:58 +01:00

264 lines
4.8 KiB
Markdown

---
title: "CI/CD Pipeline"
linkTitle: "CI/CD"
weight: 40
description: >
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 `main` branch**
- **Pull requests to `main` branch**
### Workflow Steps
#### 1. Checkout Code
```yaml
- uses: actions/checkout@v4
with:
submodules: recursive
fetch-depth: 0
```
- Clones repository with full history
- Includes Git submodules (Hugo modules)
#### 2. Setup Hugo
```yaml
- 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
```yaml
- 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
```bash
npm ci
go install github.com/wjdp/htmltest@latest
```
- Installs npm packages (markdownlint, htmlvalidate)
- Installs htmltest for link checking
#### 5. Run Tests
```bash
npm run test:build
npm run test:markdown
npm run test:html
```
- Validates Hugo build
- Lints Markdown files
- Validates HTML output
#### 6. Link Checking
```yaml
- name: Run link checker
run: htmltest
continue-on-error: true
```
- Checks all links
- Continues even if links fail (soft requirement)
#### 7. Upload Results
```yaml
- 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:
```bash
task build:oci-image
```
### Build Process
1. **Reads version information** from `.env.versions`:
- `NODE_VERSION`
- `GO_VERSION`
- `HUGO_VERSION`
2. **Builds Docker image** using `Dockerfile`:
- Multi-stage build
- Hugo generates static site
- Nginx serves the content
3. **Tags image** with:
- `latest`
- Git commit SHA (short)
### Dockerfile Structure
```dockerfile
# 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
```bash
task test:oci-image
```
This:
1. Builds the image
2. Starts container on port 8080
3. Tests HTTP endpoint
4. Cleans up container
## Package.json Scripts
The `package.json` defines test scripts:
```json
{
"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:
```bash
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:
1. Click on the failed workflow in GitHub Actions
2. Expand the failed step
3. Read the error message
4. Fix locally: `task test:<specific-test>`
5. Commit and push fix
### Viewing Artifacts
1. Go to GitHub Actions
2. Click on workflow run
3. Scroll to "Artifacts" section
4. Download `htmltest-report`
## Best Practices
1. **Don't push to main directly** - Use feature branches and PRs
2. **Wait for CI before merging** - Green checkmark required
3. **Fix broken builds immediately** - Don't let main stay red
4. **Review CI logs** - Understand why tests fail
5. **Update dependencies** - Keep versions current in `.env.versions`
## Continuous Deployment
After successful CI:
1. Container image is built
2. Image is pushed to registry
3. Deployment process begins (see [Publishing](../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: true` for link checks
- Configure `.htmltest.yml` to skip slow checks
### Cache issues
**Solution:** Clear GitHub Actions cache:
```yaml
- 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](../publishing/).