/netlify-blog

Personal blog made with gatsby-netlify

Primary LanguageJavaScriptMIT LicenseMIT

Miguel's personal blog

Netlify Status

Note: This starter uses Gatsby v2.

This repo contains an example business website that is built with Gatsby, and Netlify CMS: Demo Link.

It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.

Features

  • A simple landing page with blog functionality built with Netlify CMS
  • Editabe Pages: Landing, About, Product, Blog-Collection and Contact page with Netlify Form support
  • Create Blog posts from Netlify CMS
  • Tags: Separate page for posts under each tag
  • Basic directory organization
  • Uses Bulma for styling, but size is reduced by purge-css-plugin
  • Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
  • Uses gatbsy-image with Netlify-CMS preview support
  • Separate components for everything
  • Netlify deploy configuration
  • Netlify function support, see src/lambda folder
  • Perfect score on Lighthouse for SEO, Accessibility and Performance (wip:PWA)
  • ..and more

Prerequisites

  • Node (I recommend using v8.2.0 or higher)
  • Gatsby CLI

Access Locally

$ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
$ cd [REPO_NAME]
$ yarn
$ yarn start

This will render the project in localhost:9000

To test the CMS locally, you'll need run a production build of the site:

$ yarn build
$ yarn serve

Setting up the CMS

Follow the Netlify CMS Quick Start Guide to set up authentication, and hosting.

Purgecss

This plugin uses gatsby-plugin-purgecss and bulma. The bulma builds are usually ~170K but reduced 90% by purgecss.

CONTRIBUTING

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.