https://github.com/tymate/gatsby-starter-datocms
Bootstrap your JAMstack with datoCMS, Tymate devs’ favorite libraries, as well as a Netlify automation plugins.
https://github.com/tymate/gatsby-starter-datocms
Last synced: 8 months ago
JSON representation
Bootstrap your JAMstack with datoCMS, Tymate devs’ favorite libraries, as well as a Netlify automation plugins.
- Host: GitHub
- URL: https://github.com/tymate/gatsby-starter-datocms
- Owner: tymate
- License: apache-2.0
- Created: 2020-07-05T12:50:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T22:20:41.000Z (over 3 years ago)
- Last Synced: 2024-04-24T19:47:31.515Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 611 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby starter datoCMS
[](#contributors-)
Bootstrap your JAMstack with datoCMS, Tymate devs’ favorite libraries, as well as a Netlify automation plugins.
## 🌱 Prerequisites
* node >= 10
* yarn
## 🚀 Quick start
1. **Create a Gatsby site.**
Use the Gatsby CLI to create a new site, specifying the hello-world starter.
```shell
# create a new Gatsby site using the gatsby-starter-datocms
gatsby new my-project-name https://github.com/tymate/gatsby-starter-datocms
```
2. **Set up your environment.**
Navigate into your new site’s directory and add a envionment file.
```shell
cd my-project-name/
mkdir .env.development
```
Add this template in your `.env.development` and complete it with you API keys.
```
GATSBY_DATOCMS_API_TOKEN=
GATSBY_GA=
```
3. **Start developing.**
Now you can start it up.
```shell
gatsby develop
```
3. **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-project-name` 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, and list of included libraries.
### Project architecture
.
├── node_modules
├── src
| ├── components
| | ├── Seo
| ├── images
| ├── pages
| ├── templates
| ├── ui
| ├── utils
├── static
| ├── fonts
├── .env.development
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── netlify.toml
├── package.json
├── package-lock.json
└── README.md
### Included libraries
* [lodash](https://lodash.com/)
* [date-fns](http://date-fns.org/)
* [react-modal](https://github.com/reactjs/react-modal)
* [react-use](https://github.com/streamich/react-use)
* [react-icons](https://react-icons.github.io/react-icons/)
* [sanitize.css](https://csstools.github.io/sanitize.css/)
* [styled-components](https://styled-components.com/)
* [medium-zoom](https://medium-zoom.francoischalifour.com/)
* [react-helmet](https://github.com/nfl/react-helmet)
## 📣 What's next
* ⚠️ Edit `README.md`
* Change name and description in `package.json`
* Change title, description and siteUrl in `siteMetadata` and the name, description and short_name in `gatsby-plugin-manifest` options's in gatsby-config.js`
* Replace the `favicon.png` by your favicon
## ©️ License
Apache 2.0
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
