UP CSI Website

The University of the Philippines Center for Student Innovations (UP CSI) website is a statically generated website built with the SvelteKit framework, which uses Vite as its build system under the hood. Components are then styled using TailwindCSS.

Development

We use pnpm as the package manager for Node.js. See the installation guide here.

# Install the project dependencies.
pnpm install

# One-time setup of the auto-generated `.svelte-kit` folder.
pnpm sync

# Same as the file watcher, but also starts a developer server at
# `localhost:5173` by default. Live-reloading and hot module replacement
# has been disabled by default.
pnpm dev

# Build and optimize the project. Static assets are saved to `build/`.
pnpm build

# Locally preview the production website after building.
pnpm preview

To maintain a high standard in the codebase, we use GitHub Actions to automatically run formatters (i.e., Prettier), linters (i.e., LintHTML, Stylelint, ESLint, and Svelte Check), and builders (i.e., Vite) for each push to the repository (including pull requests). We strive to keep main at a green state (i.e., all tests pass) at all times. No exceptions.

Before pushing to the repository, one may be inclined to locally run the formatters, linters, and builders themselves.

# Check the code formatting with Prettier.
pnpm fmt

# Apply Prettier's suggestions.
pnpm fmt:fix

# Run all linters: HTMLHint, Stylelint, ESLint, and Svelte Check.
pnpm lint

Frequently Asked Questions

How does one write new content?

Simply edit the HTML and Svelte components. Add Tailwind styles as deemed necessary. Pull requests are highly encouraged.

Why not use a content management system like WordPress?

Statically generating the website allows the build system to aggressively prune unused code, optimize resources, and minify assets. Given that the end result is a single immutable build/ folder that contains everything (e.g., HTML, CSS, JS, images, fonts, etc.), the website is thus incredibly trivial to deploy and cache. Such a setup is practically the pinnacle of web performance. Many services will even host the static content for free! No need for a fancy server-side-rendered Django application nor a bloated WordPress instance powered by an Apache server running PHP code with MySQL as the backing content store.

Why do we use pnpm and not the default npm?

Unlike npm, pnpm is fast and space-efficient. Instead of downloading an entire tree of node_modules for each project, pnpm globally stores all packages so that future installations simply symlink to the common folder. This alone empowers pnpm to outperform all other package managers in the market. See more details in the documentation.

Credits

• This repository was originally bootstrapped by Basti Ortiz during the Academic Year 2023-2024 when he served as the UP CSI Director for Engineering.
  • Repository Setup
  • Automation with GitHub Actions
  • Original Build System with Parcel
  • New Build System with Vite