• Stars
    star
    130
  • Rank 277,575 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ–ฑ A simple, minimal Gatsby starter for quick and easy landing pages

preview of page

Gatsby Landing Page Starter

A simple, minimal, easy-to-use landing page starter without all sorts of bells and whistles bolted on that you'll just have to strip out later. Create a super fast, beautiful landing page from a barebones template with a single page that already looks good.

Prerequisites

If you do not have the Gatsby CLI installed yet, do it first.

npm install --global gatsby-cli

The Gatsby CLI uses Node and npm which you will also need installed. More information can be found on GatsbyJS.org.

๐Ÿš€ Getting Started

Install the starter using the Gatsby new command.

gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git

Navigate into the project directory and launch the site.

cd landing-page && gatsby develop

The site will be opened up in your default browser on http://localhost:8000

Edit code in the /src, save your changes, and they'll reload instantly in the browser.

๐Ÿง What's inside?

The minimal landing page starter comes with a few plugins installed already, but it's main focus is on staying simple and looking clean. These things are included by default:

  • ๐Ÿ–ผ Gatsby Image: images added to the src/images folder are automatically optimized by the gatsby-image plugin and can be pulled into components with lazy loading and blur up effects
  • ๐Ÿ“Š Analytics: add your Google Analytics tracking id to gatsby-config.js to automatically begin tracking visitors to the site
  • ๐Ÿ—บ Sitemap: any new pages added to the site are automically assembled together into a sitemap through gatsby-plugin-sitemap
  • ๐ŸŽจ Color Theme: the src/styles/constants.js file contains a set of colors and default styles that are applied inline to components on the site that can be overriden with your own styles

๐Ÿงช Experiment

If you want to try playing with the source code in an online playground you can open the repo in Codesandox with this button.

Edit gatsby-starter-portfolio-cara

๐Ÿ’ซ Deploy

If you just want to see a site online real fast you can deploy a copy of the site to Netlify with this button.

Deploy to Netlify

To create an optimized build of the site run this command

gatsby build

A /public folder will be assembled that can be deployed to a service like Netlify, Surge, GitHub Pages, AWS S3, Firebase hosting, or your own file server.

More Repositories

1

sol-journal

โœŽ Simple, personal journaling progressive web app
JavaScript
576
star
2

card-surge

UI Playground for well-designed Cards
JavaScript
52
star
3

theme-ui-gallery

Copy and paste-able component structures pre-styled to match your theme
JavaScript
41
star
4

me

the v1 of my personal website and portfolio
JavaScript
36
star
5

synthetic

Spotify integration and song analytics visualization
JavaScript
15
star
6

gatsby-stripe

simple demonstration of stripe checkout integration with gatsby
JavaScript
12
star
7

featherweight

Quick start REST API powered by FastAPI
Python
6
star
8

gatsby-deck

an mdx-deck styled with Gatsby's design tokens and guidelines
JavaScript
5
star
9

gatsby-stripe-serverless-backend

serverless function on aws lambda for gatsby-stripe demo
JavaScript
5
star
10

egghead-framer-motion

Examples accompany egghead videos teaching how to use Framer Motion
JavaScript
4
star
11

tanstack-react-vite-template

TypeScript
3
star
12

gatsby-image-recipes

examples for Gatsby docs of various image techniques
JavaScript
3
star
13

using-gatsby-recipes

Exploration of canary release of Gatsby recipes
JavaScript
2
star
14

gatsby-docz

simple getting started to using Gatsby with docz
CSS
2
star
15

study

Scripture study content authoring
JavaScript
2
star
16

supermario

Testing various patterns for delivering content
JavaScript
2
star
17

gatsby-mdx-examples

simple use cases for MDX in Gatsby
CSS
2
star
18

playlist-hunt

Example full-stack Gatsby app built with Hasura, Auth0, and Chakra-UI
JavaScript
2
star
19

super-mario-api

Inmemory GraphQL server with levels from Super Mario Bros
JavaScript
2
star
20

contemporarium

statically generated demo restaurant site with Sheets backend
JavaScript
2
star
21

graphql-reference

examples for using graphql with Gatsby, this repo mirrors the example linked here:
JavaScript
2
star
22

gatsby-starter-plugin

A boilerplate for creating Gatsby plugins
JavaScript
2
star
23

audible-unlock

Remove DRM from Audible .aax files for usage in free players and tools.
C
2
star
24

egghead-elixir

Getting started lessons with elixir
Elixir
1
star
25

python-hashtable

creating a simple theoretical hash table implementation
Python
1
star
26

egghead-custom-code-snippet

creating a custom code snippets file in visual studio code
1
star
27

notes

MDX
1
star
28

react-divider

JavaScript
1
star
29

playlist-hunt-workshop

Workshop resources for building a full-stack Gatsby app with Auth0 and Hasura
JavaScript
1
star
30

goals-remix

Goals app written with remix
CSS
1
star
31

birthday

a site for celebrating your birthday
JavaScript
1
star
32

react-app-simple-serverless-auth

simple app using AWS amplify and create-react-app to add authentication
JavaScript
1
star
33

shopify-csv-generator

Ruby
1
star
34

gatsby-themes-demo-docz

simple demo of using MDX via the gatsby-theme-docz in the gatsby default starter
JavaScript
1
star
35

egghead-using-mdx

Short examples for using MDX
CSS
1
star