Portland State Power Lab Website

This repository contains the public website for the Portland State Power Lab at Portland State University.

The live site is available at:

https://portlandstatepowerlab.github.io

Technology

The website is built with:

• Astro
• TypeScript
• HTML and CSS
• GitHub Pages
• GitHub Actions

The website is statically generated. It does not require a database or server-side application.

Requirements

Local development requires:

• Node.js 24 or newer
• npm 11 or newer

Check the installed versions:

node --version
npm --version

Install dependencies

From the repository root, run:

npm install

Run the development server

Start the local Astro development server:

npm run dev

Then open:

http://localhost:4321

Stop the development server with Ctrl+C.

Build the website

Create a production build:

npm run build

Astro writes the generated website to the dist/ directory.

The dist/ directory is generated automatically and should not be committed.

Preview the production build

After running npm run build, preview the generated website locally:

npm run preview

Repository structure

.
├── .github/
│   └── workflows/
│       └── deploy.yml
├── public/
├── src/
│   ├── components/
│   ├── data/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── astro.config.mjs
├── package.json
└── tsconfig.json

Components

Reusable website components are stored in:

src/components/

Current shared components include:

• Header.astro
• Footer.astro
• PageHeader.astro

Data

Structured website content is stored in:

src/data/

Current data files include:

• people.ts
• projects.ts
• publications.ts

Update these files when adding people, projects, or publications.

Pages

Website pages are stored in:

src/pages/

Astro creates routes based on filenames. For example:

src/pages/research.astro → /research
src/pages/projects.astro → /projects
src/pages/people.astro → /people

Deployment

The website is deployed automatically through GitHub Actions.

Every push to the main branch triggers:

.github/workflows/deploy.yml

The workflow:

1. Checks out the repository.
2. Builds the Astro website.
3. Uploads the generated static files.
4. Deploys the site to GitHub Pages.

Deployment status can be reviewed in the repository’s Actions tab.

Contribution workflow

Create a branch before making changes:

git switch -c descriptive-branch-name

After making changes, verify the website:

npm run build

Commit the changes:

git add .
git commit -m "Describe the website change"

Push the branch:

git push -u origin descriptive-branch-name

Then open a pull request into main.

Content guidelines

• Use verified information for people, projects, and publications.
• Do not publish private contact details without permission.
• Do not commit credentials, access tokens, or API keys.
• Add descriptive alternative text to meaningful images.
• Keep project and publication descriptions clear for non-specialist visitors.
• Mark inactive projects appropriately rather than silently deleting them.

Color palette

The website uses the Power Lab’s Portland State color palette.

Primary colors include:

PSU green       #6A7F10
PSU light green #A8B400
PSU blue        #00759A
PSU light blue  #A1D8E0
PSU gray        #474334

Additional supporting colors are defined in:

src/styles/global.css