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 developfor hot-reloaded editing athttp://localhost:8000, and use the built-in GraphiQL explorer athttp://localhost:8000/___graphqlto 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, andgatsby-config.jsfiles. - 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/contentdescribing the position; the Gatsby build transforms it into a page on the careers site. - Customize the design — Edit
src/pages/index.jsand the styled-components theme to change the page layout and visual identity. - Learn Gatsby's data layer — Use the GraphiQL interface at
localhost:8000/___graphqlto 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.
