Gatsby Careers Page

Gatsby Careers Page is a Gatsby starter that builds a company careers and job-listing site from markdown files, using styled-components for styling and GraphQL for data queries.

What is the Gatsby Careers Page?

The Gatsby Careers Page is a starter template (not a plugin or theme) for creating a static job-listing website with Gatsby, a React-based static site generator. It takes content from markdown files stored in the src/content directory and renders it as a careers page, with the build process handled by Gatsby's standard Node.js toolchain. The project is hosted at https://github.com/BoyWithSilverWings/gatsby-careers-page and includes the standard Gatsby configuration files gatsby-config.js, gatsby-node.js, gatsby-browser.js, and gatsby-ssr.js.

Key Features

• Markdown-driven listings — Job postings live as markdown files in src/content; editing a file and rebuilding regenerates the site with no database or CMS.
• Styled-components styling — All UI is styled with the CSS-in-JS library styled-components, colocating styles with the React components.
• gatsby-remark-transformer — Listed as one of the three core technologies, used to process markdown content within the Gatsby build pipeline.
• Gatsby developer experience — Run gatsby develop for hot-reloaded editing at http://localhost:8000, and use the built-in GraphiQL explorer at http://localhost:8000/___graphql to query your site's data.
• One-command creation — Bootstrap a new site with npx gatsby new careers https://github.com/BoyWithSilverWings/gatsby-careers-page.
• Netlify deployment — A one-click "Deploy to Netlify" button is included, targeting the repository URL for CI/CD publishing.
• Humaans SVG illustrations — The design credits the Humaans illustration library by Pablo Stanley for its SVG artwork.

Who is it for?

• Growing companies — Publish an official careers page where candidates can see open roles, with updates made by editing markdown rather than a CMS.
• Frontend developers — Learn how a Gatsby site with styled-components and markdown content is structured by reading the starter's src, gatsby-node.js, and gatsby-config.js files.
• Startup founders — Stand up a credible jobs page quickly and connect it to Netlify's free hosting tier using the one-click deploy button.

What can you do with this template?

• Add a job opening — Create a new markdown file in src/content describing the position; the Gatsby build transforms it into a page on the careers site.
• Customize the design — Edit src/pages/index.js and the styled-components theme to change the page layout and visual identity.
• Learn Gatsby's data layer — Use the GraphiQL interface at localhost:8000/___graphql to experiment with queries against the markdown-driven content model.

How does it work?

The README documents a three-step workflow: create a new Gatsby site with the npx gatsby new command pointing at the template repository, start the development server with gatsby develop, and edit src/pages/index.js to see browser updates in real time. Production builds can then be pushed to Netlify via the included deploy button.

FAQ

How do I create a site from this template?

Run npx gatsby new careers https://github.com/BoyWithSilverWings/gatsby-careers-page in your terminal, then cd careers and gatsby develop. The site will be available at http://localhost:8000.

Where do I add job listings?

Add markdown files in the src/content directory. The template's build process (using gatsby-remark-transformer and Gatsby's Node APIs) picks up those files and turns them into pages on the careers site.

Does this template require a CMS?

No. All content is stored as markdown files in the repository. This makes it a lightweight, version-control-friendly option, but you won't get a visual editing interface unless you add one.

Can I deploy this to Netlify?

Yes. The README includes a Deploy to Netlify button that connects to the GitHub repository and sets up continuous deployment automatically.