gillkyle/gatsby-starter-landing-page

🖱 A simple, minimal Gatsby starter for quick and easy landing pages

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.

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

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.

gatsby-starter-landing-page's Issues

X-overflow on Ubuntu/FF 66.0

Hey @gillkyle, 👏 for the starter!

I just noticed x-overflow on the demo:

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0

Docs for replacing mockup content

add docs that tell how to query a new image in place of the current mockup content in the hero section so it can be swapped out

Brand new install doesn't build

Seems to be an issue with the image processing. Maybe an updated library has broken compatibility?

Feature: Switch to theme-ui

Thanks for this great looking landing page!

I'm currently writing a tutorial where I discuss installing this theme alongside another Gatsby theme. Unfortunately the global css of the landing-page overwrites the global css of the other theme, so it is not really possible to just plug-in the landing page.

As a landing-page will most likely always be used together with other themes and as installing it should not have side effects, I was wondering if you are interested in converting the global styles into locally scoped styles with theme-ui?

Make a theme an publish on npm?

Thanks a lot for this well crafted landing page!

I would like to incorporate it into my project, but the starter is not well suited for being included into an existing project.

Have you considered making a Gatsby theme and publish it on npm, so I could simply install it as a plugin?

error: Plugin gatsby-transformer-sharp returned an error

I tried to run this strater and got this error

error Plugin gatsby-transformer-sharp returned an error


  Error: Could not locate the bindings file. Tried:
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/build/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/build/Debug/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/build/Release/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/out/Debug/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/Debug/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/out/Release/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/Release/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/build/default/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/compiled/10.15.3/darwin/x64/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/addon-build/release/install-root/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/addon-build/debug/install-root/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/addon-build/default/install-root/sharp.node
   → /Users/varya/WebDev/Personal/team-resources-workshop/node_modules/gatsby-plugin-sharp/node_modules/sharp/lib/binding/node-v64-darwin-x64/sharp.node

gastby new/git clone is slow

Probably uncompressed images in the src/images folder make the clone process pretty slow since it's gathering 4.78 MiB of data according to the gatsby new command

This could probably be resolved by just making the images a little smaller

gatsby new throws error

I'm trying to clone this repo using
gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git

But it throws the following error :-

  Error: Command failed with exit code 1: npm install

  - error.js:56 makeError
    [lib]/[gatsby-cli]/[execa]/lib/error.js:56:11

  - index.js:114 handlePromise
    [lib]/[gatsby-cli]/[execa]/index.js:114:26

  - task_queues.js:95 processTicksAndRejections
    internal/process/task_queues.js:95:5

  - init-starter.js:135 install
    [lib]/[gatsby-cli]/lib/init-starter.js:135:7

  - init-starter.js:202 clone
    [lib]/[gatsby-cli]/lib/init-starter.js:202:3

  - init-starter.js:343 initStarter
    [lib]/[gatsby-cli]/lib/init-starter.js:343:5

  - create-cli.js:494
    [lib]/[gatsby-cli]/lib/create-cli.js:494:9

Here's my Gatsby info

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    npm: 7.16.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.77
    Safari: 14.0.3
  npmGlobalPackages:
    gatsby-cli: 3.6.0

Is it not compatible with M1 yet?