Schoolfront is an open source Gatsby starter that provides a complete frontend foundation for school websites, including pages for news, curriculum, teachers, and contact information.
What is Schoolfront?
Schoolfront is an open source frontend starter built with the Gatsby static site generator, designed specifically for school and educational institution webpages. It takes Gatsby configuration files and WordPress content as input and produces a fast, static school website as output. The project is available on GitHub and is maintained by its author orzechdev. The starter is built with React, TypeScript, GraphQL, and Styled Components, making it a modern choice for developers who already work in the React ecosystem.
What makes Schoolfront stand out?
- News from WordPress — Integrates a WordPress news feed directly into the site, allowing school administrators to publish announcements through a familiar CMS.
- Pre-built school pages — Ships with a main page, about page, contact page, open hours information, offered curriculum page, and teachers list, so the core structure of a school site is already in place.
- WCAG AA accessibility support — The starter targets WCAG AA compliance, helping schools meet accessibility requirements that are often mandatory for public institutions.
- Gatsby configuration-based setup — Site settings live in Gatsby configuration files, so non-technical team members can edit basic site data without touching React code.
- React and TypeScript — Built on React with TypeScript for type safety, making the codebase easier to maintain and extend.
- GraphQL data layer — Uses Gatsby's GraphQL layer to query content, which means developers can pull from multiple data sources (such as WordPress) with a unified query language.
- Styled Components styling — Styling is managed through CSS-in-JS with Styled Components, keeping styles colocated with the components they affect.
- Open source license — The starter is freely available on GitHub, so schools and developers can customize it without licensing fees.
Who is it for?
- School IT staff and webmasters — Can spin up a modern school website quickly and manage content through WordPress, without building everything from scratch.
- Web developers and agencies — Can use Schoolfront as a starting point for client projects, extending the React and Gatsby codebase with custom features.
- Educational institutions — Small schools, academies, or departments that need an accessible, fast website with standard sections like curriculum and teacher listings.
Use cases
- Schools publishing news: Connect a WordPress installation to keep the homepage updated with the latest announcements, without writing any code.
- Developers building a school site: Clone the starter with the Gatsby CLI, customize the pages and styles, then deploy the static output to a hosting service like Netlify (the demo lives at schoolfront.netlify.app).
- Accessibility-focused organizations: Use the WCAG AA-ready templates as a baseline to ensure the school's public site meets accessibility standards.
How does Schoolfront work?
To get started, a developer uses the Gatsby CLI to create a new site from the schoolfront GitHub repository, then runs gatsby develop for local development. The site runs on localhost:8000, and a companion GraphiQL tool at localhost:8000/___graphql lets developers experiment with data queries. Editing files like src/pages/index.tsx triggers a live reload in the browser.
FAQ
Is Schoolfront free?
Yes, Schoolfront is open source, and the source code is available on GitHub for anyone to use and modify. There are no licensing fees, though normal hosting costs for the static site still apply.
What does Schoolfront include?
The starter includes a main page, news feed from WordPress, contact page, about page, open hours information, offered curriculum page, and teachers list. All of these are listed in the first milestone, and a second milestone is still to be announced.
What technologies does Schoolfront use?
Schoolfront is built with Gatsby, React, TypeScript, GraphQL, and Styled Components. It relies on Gatsby's static generation and GraphQL data layer, and uses CSS-in-JS via Styled Components for styling.
Does Schoolfront work with WordPress?
Yes, the starter includes a news feature that pulls content from WordPress, as shown in the feature list. This means you can manage news through the WordPress admin and display it on the Gatsby-built site.
How do I start a project with Schoolfront?
You can create a new Gatsby site by running gatsby new your-site-name https://github.com/orzechdev/schoolfront with the Gatsby CLI, then gatsby develop to run it locally. The source code is easy to edit once the project is set up.
