Jamamuuga's Portfolio Website

Based on Gatsby-Starter-Netlify-CMS.

Gatsby + Netlify CMS Starter

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
• Editable Pages: Landing, About, Portfolio, 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 Material UI for styling.
• 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
$ npm run develop

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

$ npm run build
$ npm run serve

Media Libraries (installed, but optional)

Media Libraries have been included in this starter as a default. If you are not planning to use Uploadcare or Cloudinary in your project, you can remove them from module import and registration in src/cms/cms.js. Here is an example of the lines to comment or remove them your project.

import CMS from "netlify-cms-app"
// import uploadcare from 'netlify-cms-media-library-uploadcare'
// import cloudinary from 'netlify-cms-media-library-cloudinary'

import AboutPagePreview from "./preview-templates/AboutPagePreview"
import BlogPostPreview from "./preview-templates/BlogPostPreview"
import PortfolioPagePreview from "./preview-templates/PortfolioPagePreview"
import IndexPagePreview from "./preview-templates/IndexPagePreview"

// CMS.registerMediaLibrary(uploadcare);
// CMS.registerMediaLibrary(cloudinary);

CMS.registerPreviewTemplate("index", IndexPagePreview)
CMS.registerPreviewTemplate("about", AboutPagePreview)
CMS.registerPreviewTemplate("portfolio", PortfolioPagePreview)
CMS.registerPreviewTemplate("blog", BlogPostPreview)

Getting Started (Without Netlify)

$ gatsby new [SITE_DIRECTORY_NAME] https://github.com/netlify-templates/gatsby-starter-netlify-cms/
$ cd [SITE_DIRECTORY_NAME]
$ npm run build
$ npm run serve

Setting up the CMS

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

Debugging

Windows users might encounter node-gyp errors when trying to npm install. To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.

npm config set python python2.7
npm install --global --production windows-build-tools

Full details here