HiStaff Static Website

HiStaff Static is a Gatsby-based starter for building static websites, bundling SCSS compilation, a web font loader, and sample pages for a quick start.

What is HiStaff Static Website?

HiStaff Static is a starter repository built on the Gatsby framework. It takes source files such as React components and SCSS stylesheets as input, and generates a static website as output via Gatsby's build pipeline. The project lives on GitHub at the histaff/website-static repository and provides a minimal but functional base for creating new Gatsby sites.

Key Features

• Gatsby framework — Runs on Gatsby, giving you access to its plugin ecosystem and static generation capabilities.
• SCSS support — Includes SCSS compilation out of the box, so you can write nested styles and variables without a separate build tool.
• Web font loader — Ships with a font loading utility that supports both Google Fonts and self-hosted custom font files.
• Sample pages — Provides example pages under src/pages/ that you can edit or replace, starting with index.js as the home page.
• Clean code structure — Organized source directory intended to be easy to navigate and customize for any project.
• Live development server — Running gatsby develop starts a local server at http://localhost:8000 with hot reloading for real-time updates.
• Gatsby CLI integration — Create a new project with a single command: gatsby new histaff https://github.com/histaff/website-static/.

Who is it for?

• Frontend developers who want a Gatsby starter with SCSS already configured so they can focus on building components.
• Gatsby beginners who want a working example site they can run locally and study to learn how Gatsby pages and styles fit together.
• Small teams looking for a clean, minimal foundation for a company or product website without a lot of boilerplate.

What can you do with it?

• Scaffold a new static site — Use the gatsby new command to generate a fresh project that already has SCSS and font loading set up.
• Build a custom home page — Edit src/pages/index.js to change the content and styling of the main page, with the browser updating as you save.
• Experiment with Gatsby — Run the develop server locally and modify sample pages to see how Gatsby's file-based routing and hot reload work in practice.

How does it work?

1. Install the Gatsby CLI globally with npm install -g gatsby-cli.
2. Create a new site by running gatsby new histaff https://github.com/histaff/website-static/.
3. Navigate into the directory with cd histaff and start the development server with gatsby develop.
4. Open http://localhost:8000 in your browser and edit src/pages/index.js to see changes in real time.

FAQ

How do I create a new site from this starter?

Run the command gatsby new histaff https://github.com/histaff/website-static/ in your terminal. This clones the starter into a folder named histaff and installs all dependencies. After that, move into the folder and run gatsby develop to start working.

What styling system does it use?

The starter includes support for SCSS, so you can write styles using Sass syntax such as variables, nesting, and mixins. No separate CSS preprocessor setup is required beyond what Gatsby already provides.

Can I load custom fonts?

Yes. The bundled web font loader supports both Google Fonts and custom font files. You can configure the fonts you want and the loader will handle fetching or referencing them.

Where is the home page located?

The home page is at src/pages/index.js. This is the first file you should edit when customizing the site, and changes will appear instantly at http://localhost:8000 while the development server is running.

Is this starter free to use?

The repository is a public GitHub starter, and like most Gatsby starters it is released as open-source code. However, the README does not include a specific license statement, so check the repository files for license details before deployment.