Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tsparticles/gatsby-landing-page-starter

tsParticles Simple Landing Page Starter for Gatsby Websites
https://github.com/tsparticles/gatsby-landing-page-starter

gatsby gatsby-starter hacktoberfest hacktoberfest2021 javascript react

Last synced: 25 days ago
JSON representation

tsParticles Simple Landing Page Starter for Gatsby Websites

Host: GitHub
URL: https://github.com/tsparticles/gatsby-landing-page-starter
Owner: tsparticles
License: mit
Created: 2020-08-11T14:56:51.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2024-07-16T18:28:06.000Z (4 months ago)
Last Synced: 2024-09-27T01:06:14.705Z (about 1 month ago)
Topics: gatsby, gatsby-starter, hacktoberfest, hacktoberfest2021, javascript, react
Language: JavaScript
Homepage:
Size: 11 MB
Stars: 13
Watchers: 4
Forks: 1
Open Issues: 13
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

templates - Gatsby tsParticles Landing Page Starter

README

tsParticles Gatsby Landing Page Starter

Kick off your project with this landing page boilerplate. This starter ships with the main Gatsby configuration files, and [React tsParticles](https://github.com/matteobruni/tsparticles) with a simple configuration, you might need to get up and running blazing fast with the blazing fast app generator for React.

## Landing Page Preview

[![login](https://raw.githubusercontent.com/tsparticles/gatsby-landing-page-starter/master/__screenshots/landing.png)](https://tsparticles.github.io/gatsby-landing-page-starter/index.html)

You can see a working preview [here](https://tsparticles.github.io/gatsby-landing-page-starter/index.html)

## 🚀 Quick start

1. **Create a Gatsby site.**

Use the Gatsby CLI to create a new site, specifying the blog starter.

```shell
# create a new Gatsby site using the particles landing page starter
gatsby new my-particles-starter https://github.com/tsparticles/gatsby-landing-page-starter
```

1. **Start developing.**

Navigate into your new site’s directory and start it up.

```shell
cd my-particles-starter/
gatsby develop
```

1. **Open the source code and start editing!**

Your site is now running at `http://localhost:8000`!

_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._

Open the `my-particles-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!

## 🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── __screenshots
├── node_modules
├── src
├── static
├── .gitignore
├── .prettierignore
├── .prettierrc
├── gatsby-config.js
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

1. **`/__screenshots**: This directory contains screenshots used in this README, can be removed.

2. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

3. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.

4. **`/static`**: This directory will contain all the images needed to the starter.

5. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.

6. **`.prettierignore`**: This is an ignore file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.

7. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.

9. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).

10. **`LICENSE`**: This Gatsby starter is licensed under the MIT license.

11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

12. **`README.md`**: A text file containing useful reference information about your project.

13. **`yarn.lock`** (See `package.json` above, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**

## 🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:

- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.

- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.

## 💫 Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/tsparticles/gatsby-landing-page-starter)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/tsparticles/gatsby-landing-page-starter)

## What is tsParticles

[tsParticles](https://github.com/matteobruni/tsparticles) is a lightweight library for easily creating particles animations in your websites or web applications.

The [tsParticles](https://github.com/matteobruni/tsparticles) library is ready to be used in standard JavaScript, React, Vue.js, Angular, Svelte, jQuery, Preact, Inferno.

### React tsParticles

The ReactJS official [tsParticles](https://github.com/matteobruni/tsparticles) library is `react-tsparticles`.

You read more about `react-tsparticles` [here](https://github.com/matteobruni/tsparticles/blob/master/components/react/README.md)

## Background Source