Gatsby Starter Glass

A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism UI.

View Live Demo

Features

• Fully responsive
• SEO metadata and Open Graph tags
• Maximized lighthouse score
• Contact form with Netlify Form
• Edit Content with Netlify CMS
• Easy to deploy
• Syntax highlighting via PrismJS

Local Install

# 1. Clone the repository
git clone https://github.com/yinkakun/gatsby-starter-glass

# 2. Navigate into repository
cd gatsby-starter-glass

# 3. Install the dependencies
yarn install

# 4. Start the development server
yarn start

# 5. Start the build mode
yarn  build

Configuration

Within gatsby-config.js, you can specify information about your site (metadata) like the site title and description to properly generate meta tags.

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Glass`,
    author: {
      name: `Yinka Adedire`,
      summary: `self-taught front-end dev. jamstack enthusaist.`,
    },
    description: `A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism Ui.`,
    siteUrl: `https://gatsbyglass.netlify.app`,
    social: {
      twitter: `yinkakun`,
    },
  },

  // ...
};

Deployment

Netlify is a great way to easily deploy sites plus this starter uses Netlify Form for the Contact form.

• Generate a new repo from this repo which will copy all files from this repo to your newly created repo.

• Go to https://app.netlify.com. Once you’ve logged in, click the 'New site from Git' button on your dashboard and choose your newly created repo.

• Follow the prompts, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.

Manually Editing contents

Blog Posts

Blog contents can be updated in markdown format at content/blog. Delete placeholder posts and start blogging.

---
title: Hello World
date: '2021-05-01'
description: 'Hello World'
---

This top portion is the beginning of the post and will show up as the excerpt on the homepage.

Pages

Homepage intro, Contact, and About page content can be updated in Markdown format at content/pages.

Editing Contents with Netlify CMS

This project is preconfigured to work with Netlify CMS. When Netlify CMS makes commits to your repo, Netlify will auto-trigger a rebuild / deploy when new commits are made. You’ll need to set up Netlify’s Identity service to authorize users to log in to the CMS.

• Go to https://app.netlify.com > select your website from the list.
• Go to Identity and click Enable Identity.
• Click on Invite Users and invite yourself. You will receive an email and you need to accept the invitation to set the password.
• Now headover to Settings > Identity > Services and Enable Git Gateway.
• You can also manage who can register and log in to your CMS. Go to Settings > Identity > Registration Registration Preferences. I would prefer to keep it to Invite Only if I am the only one using it.
• Now, go to to site-name.netlify.app/admin/, and login with your credentials.

Once you are in your Netlify CMS, you can navigate to Posts and Pages. Here you will find a list of existing pages and posts.

Built with

• Gatsby for Static Site Generation
• Netlify CMS for content management
• Styled Component for styling