https://github.com/janit/gatsby-barebones-markdown-typescript
Simple barebones Gatsby.js static site generator with local Markdown and TypeScript enabled
https://github.com/janit/gatsby-barebones-markdown-typescript
gatsbyjs graphql typescript
Last synced: 4 months ago
JSON representation
Simple barebones Gatsby.js static site generator with local Markdown and TypeScript enabled
- Host: GitHub
- URL: https://github.com/janit/gatsby-barebones-markdown-typescript
- Owner: janit
- License: mit
- Created: 2017-10-01T20:17:37.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-01T20:34:01.000Z (almost 9 years ago)
- Last Synced: 2025-10-10T18:39:22.764Z (9 months ago)
- Topics: gatsbyjs, graphql, typescript
- Language: TypeScript
- Size: 85.9 KB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby.js barebones Markdown + TypeScript example
Gatsby.js is a static site generator that uses React as a templating / view engine and GraphQL as a data layer for doing queries to content repositories (local or remote).
This is very simple example of using Gatsby.js and it's GraphQL data layer to fetch and render local Markdown files. In addition the TypeScript support is enabled.
This project is based on the official tutorial and is mostly just a simple boilerplate if I choose to use this somewhere, some day.
## Installation
Install yarn and the Gatsby client as global. Then install packages and run develop
```
$ yarn
$ gatsby develop
```
The site will be available at http://localhost:8000 and the GraphQL explorer at http://localhost:8000/___graphql
## GraphQL queries to load content from local Markdown files
As said, Gatsby uses GraphQL internally as an API, in this case there's two queries. The first one is to get all the Markdown files on `src/pages/index.tsx`:
```graphql
query IndexQuery {
allMarkdownRemark {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
}
fields {
slug
}
excerpt
}
}
}
}
```
to display individual posts, the template `src/templates/post.tsx` uses the following query:
```graphql
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
date
}
}
}
```
Note that both of these are easy to construct and develop using the included GraphiQL shell running locally at: http://localhost:8000/___graphql
## File structure
Here is a brief overview of the file structure:
- gatsby-config.js (main config)
- gatsby-node.js (custom functionality for loading MD files dynamically )
- src
- pages
- index.tsx (root page with listing)
- about.tsx (simple satic page)
- posts
- *.md (blog post content in Markdown)
- templates
- post.tsx (template for blog posts)