- A project page template built with ⚛️ React + 🎨 UIKit
- Demo: ⛅light-theme / src 🕶️ dark-theme / src
Tip
You can switch themes by setting theme field in template.yaml
theme: default # default || darkWe use Pixi to manage the toolchain (e.g. node.js):
curl -fsSL https://pixi.sh/install.sh | bashRestart your shell so pixi is on your PATH.
pixi installpixi run devpixi run previewpixi run preview builds the site with vite-react-ssg
to pre-render the page to static HTML at build time (no headless browser /
Puppeteer required). This bakes the OGP/Twitter meta tags into <head> so
crawlers can read them without running JavaScript, and links the CSS in
<head> so there is no flash of unstyled content (FOUC). A successful build
ends with:
[vite-react-ssg] Rendering Pages... (1)
build/index.html
[vite-react-ssg] Build finished.Complete template.yaml by filling in the required values. Use null for any unavailable content (e.g., blog: null).
organization: OMRON SINIC X
twitter: "@omron_sinicx"
title: Path Planning using Neural A* Search
conference: ICML2021
resources:
paper: https://arxiv.org/abs/1909.13111
code: https://github.com/omron-sinicx/multipolar
video: https://www.youtube.com/embed/adUnIj83RtU
blog: https://medium.com/sinicx/multipolar-multi-source-policy-aggregation-for-transfer-reinforcement-learning-between-diverse-bc42a152b0f5
...- Customize appearance by modifying UIKit variables in
src/scss/theme.scss(zero hand-written CSS) - Extend
*.jsxfiles with components from:
template.yaml # Configuration
src/
├── components/ # React components
├── html/ # HTML templates
├── media/ # Media assets (relocated to assets/ automatically)
├── videos/ # Video content
├── js/ # JavaScript files
├── pages/ # Page templates
└── scss/ # Styling
- example project: https://github.com/omron-sinicx/mabr/tree/project-page
Deploy from GitHub Actions- Navigate to
https://github.com/{your-github-repo-path}/settings/pages - Select GitHub Actions at Build and Deployment > Source
- See also: GitHub Documentation and actions/deploy-pages
Note
When using GitHub Actions to deploy a site on GitHub Pages, the source code is built internally during the workflow run. Only the build artifacts (e.g., HTML, CSS, JS) are deployed to the GitHub Pages environment, while the repository itself retains only the source code.
$ git remote add github {your-github-repo-path}$ git push github {local-project-page-branch}:project-page- See also: https://github.com/omron-sinicx/projectpage-template/blob/main/.github/workflows/deploy.yaml
Branch "project-page" is not allowed to deploy to github-pages due to environment protection rules
Navigate to Settings > Environments > github-pages > 🗑️- OGP meta tags are automatically generated from
template.yamland baked into the static HTML at build time byvite-react-ssg, so they render correctly both for local builds (pixi run preview) and when deployed via GitHub Actions (see above). - Example: Twitter Card Preview
Git hooks are managed by prek (a fast pre-commit reimplementation, installed by pixi) and configured in .pre-commit-config.yaml. They run prettier and typos on staged files only. Install the hook once per clone:
pixi run hookspixi run hooks:all # run every hook against all files
pixi run typos # typo check only
pixi run typos:fix # typo check and apply fixesTo skip all hooks for a single commit:
git commit --no-verifyTo skip only some of them, list the hook ids from .pre-commit-config.yaml:
SKIP=typos,prettier git commit -m "wip"Note that .claude/ is excluded from every hook (see exclude: in .pre-commit-config.yaml).
Issues and PRs welcome! Feel free to open an issue