Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yinkakun/gatsby-starter-glass
A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism UI
https://github.com/yinkakun/gatsby-starter-glass
gatsby glassmorphism hacktoberfest jamstack netlify-cms starter
Last synced: 15 days ago
JSON representation
A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism UI
- Host: GitHub
- URL: https://github.com/yinkakun/gatsby-starter-glass
- Owner: yinkakun
- License: mit
- Created: 2021-03-23T11:47:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-20T16:42:49.000Z (about 2 years ago)
- Last Synced: 2024-10-14T07:11:35.617Z (29 days ago)
- Topics: gatsby, glassmorphism, hacktoberfest, jamstack, netlify-cms, starter
- Language: JavaScript
- Homepage: https://gatsbyglass.netlify.app
- Size: 4.8 MB
- Stars: 166
- Watchers: 4
- Forks: 84
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby Starter Glass
A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism UI.
[View Live Demo](https://gatsbyglass.netlify.app)
## 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
```bash
# 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.
```js
// 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 . 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.
```md
---
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 > 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