A template to easily create landing pages or a blog using the GatsbyJS framework to generate a static React powered PWA. It's lightning fast, SEO friendly, and deploys directly to a CDN like Github Pages or Netlify.
You create content your using MDX, a mix of Markdown and JSX, allowing you to import and use React components inside of your Markdown (and much more). And you can create those React components inside Storybook, an isolated development environment for coding more accessible components.
🔎 Check out the how-to-use MDX file to see MDX in action!
- 🎛 MDX
- 📖 Storybook
- 🔏 Typescript
- 💄 Styled Components
- 📦 Styled System
- ⚙️ Rebass
- ☎️ SEO component
- 🐦 Twitter embeds
- 📱 PWA
✈️ Offline-ready- 📇 RSS
- 📝 Setup for blogs
- 📡 Webpack aliasing
- 👕 Prettier + ESLint + Markdown Lint
- 🔌 Nodemon
---
title: Deploy a Static React Blog using GatsbyJS and Github
date: '2018-03-21'
section: blog
cover_image: './bulma-css-framework@1x.jpg'
tags:
[
'design',
'development',
'react',
'github',
'gatsbyjs',
'ssg',
'static site generator',
]
---
Your post here- Section can be
blogorpage. - Tags must be array
- Body content can include Markdown, HTML, or JSX.
Seamlessly embed Tweets into posts by copying the blockquote portion of the embed code to your Markdown file. Don't copy the linked JS file, the plugin handles that automatically.
Configure in gatsby-config.js.
Configure in gatsby-config.js.
Running on GatsbyJS, an SSG that creates static React apps.
npm installnpm run develop
We locally build the files, then deploy using an NPM script that updates a specific Git repo branch called gh-pages.
To enable this, just initialize a git repo in the project, commit your changes, and add your Github repo as a remote repo. Make sure to label the remote as origin, otherwise the Gatsby deploy won't know which repo to push to.
Deploy site to origin remote repo:
npm run deploy
git pullfrom remote origin to ensure you have the latest posts and to merge any conflicts.- Add a new folder to
content/pagesorcontent/blognamed after your post. This will be converted to the slug of the article -- you don't need to 'kebab-case' your title, but keep the format in mind. - Create a MDX file in the folder. Make sure to use previous files as a template to include all the appropriate frontmatter fields (listed above).
- Fill out the post, optionally add a cover image (see next step for handling images)
- For any images, include them in the same folder as the post's Markdown and link locally using
<img src="./my-image.jpg" />. Or add them to the/static/assets/folder and it'll be accessible athttp://yourwebsite-or-localhost.com/assets/your-img.jpg. - Run
npm run deployin the project root to deploy to Github Pages. Or commit code to Github's master branch to trigger a Netlify deploy.
This site is also capable of deploying on Netlify. Simply login to Netlify, create a new app, and point to this repository. Follow the steps, make sure Netlify is running gatsby build and pointing to the /public directory. This also allows you to use the Netlify CMS, since it requires a server for OAuth2 support and hosting on Netlify allows you re-build on each edit (rather than building from you personal machine and deploying from there).
- [] Add property to frontmatter for layout, then render each component based on that (or default) in
gatsby-node.js. Would allow users to break convention and have different header/footers depending on the page (as well as any styles/code they want to include in the new layout). - [] Integrate with flat-file CMS that supports MDX for easier authoring.
Netlify CMS doesn't support Typescript