gatsby-starter-glass - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #rust #deep-learning #linux #docker #macos #nodejs #vue #security #ios #openai #open-source

gatsby-starter-glass

(★ 170)

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

File Explorer

Download Latest Version (.zip)

- - about.md
  - contact.md
  - index.md
- - do-you-know-anything-about-sensory-deprivation-tanks.md
  - friends-dont-lie.md
  - magnificent-desolation.md
  - mornings-are-for-coffee-and-contemplation.md
  - nobody-exists-on-purpose.md
  - nobody-normal-ever-accomplished-anything-meaningful-in-this-world.md
  - one-world.md
  - pale-blue-dot.md
  - she-shut-one-door-with-her-mind.md
  - symbol-of-apollo.md
  - this-is-not-yours-to-fix-alone.md
  - tough-and-competent.md
  - we-choose-to-go-to-the-moon.md
  - weddings-are-basically-funerals-with-cake.md
  - why-are-you-fighting-cant-you-see-youre-all-the-same.md
  - why-do-we-even-need-weapons-anyway.md
  - why-would-a-pop-tart-want-to-live-inside-a-toaster.md
  - you-shouldnt-like-things-because-people-tell-you-youre-supposed-to.md
  - youre-pretty-cute-you-know-that.md
- - container.js
  - footer.js
  - global-styles.js
  - header.js
  - layout.js
  - post-list.js
  - prism-coldark-dark.css
  - seo.js
  - social-links.js
  - styled-link.js
  - tags.js
  - theme-switch.js
- - icon.png
- - index.js
- - 404.js
  - blog.js
  - tags.js
- - about-template.js
  - contact-template.js
  - index-template.js
  - post-template.js
  - tags-template.js
- - config.yml
- - profile-image.jpg
  - rocket.jpg
- favicon.ico
- open-graph-image.png
- robots.txt
.gitignore
.prettierignore
gatsby-browser.js
gatsby-config.js
gatsby-node.js
LICENSE
netlify.toml
package.json
README.md
screenshot.png
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/yinkakun/gatsby-starter-glass

Downloads the entire project code from GitHub to your computer.

cd gatsby-starter-glass

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn install

Downloads and installs the libraries listed in package.json.

yarn start

Starts the development/run server.

yarn build

Builds optimized production files.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Gatsby Starter Glass

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

[View Live Demo](https://gatsbyglass.netlify.app)

![demo site screenshot](https://raw.githubusercontent.com/yinkakun/gatsby-starter-glass/master/screenshot.png)

## 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 <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.

```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 <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