https://github.com/slicknode/starter-gatsby-blog
Starter repo for Slicknode + Gatsby websites.
https://github.com/slicknode/starter-gatsby-blog
cms gatsby graphql headless react slicknode starter
Last synced: about 2 months ago
JSON representation
Starter repo for Slicknode + Gatsby websites.
- Host: GitHub
- URL: https://github.com/slicknode/starter-gatsby-blog
- Owner: slicknode
- License: 0bsd
- Created: 2020-11-20T17:36:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-29T16:43:50.000Z (over 5 years ago)
- Last Synced: 2025-03-23T06:26:01.503Z (about 1 year ago)
- Topics: cms, gatsby, graphql, headless, react, slicknode, starter
- Language: JavaScript
- Homepage: https://slicknode.com
- Size: 842 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Slicknode's Gatsby Blog Starter
Kick off your Slicknode project with this blog boilerplate. This starter ships with all the necessary
configuration to create a Blog application. It is kept minimal to serve as the ideal
quick starting place for a Gatsby application.
## 🚀 Quick start
1. **Install Slicknode & Gatsby CLIs:** (if you don't have them already)
```shell
npm install -g gatsby-cli slicknode
```
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 slicknode-gatsby-blog starter
gatsby new my-slicknode-blog https://github.com/slicknode/starter-gatsby-blog
```
1. **Create the Slicknode API:**
```shell
cd my-slicknode-blog/
npm run setup
```
This will create a new Slicknode project and add the endpoint to the `.env` file.
1. **Add some content:**
Open the Slicknode console and add a few blog posts:
```shell
slicknode console
```
1. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
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.com/tutorial/part-five/#introducing-graphiql)._
Open the `my-slicknode-blog` 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.
.
├── modules
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
├── slicknode.yml
└── README.md
1. **`/modules`**: This directory contains all of the Slicknode modules where you can change the data model.
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
1. **`/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”.
1. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
1. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
1. **`.slicknoderc`**: This is a configuration file for all the Slicknode environments that are configured.
1. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
1. **`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.com/docs/gatsby-config/) for more detail).
1. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
1. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
1. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
1. **`package-lock.json`** (See `package.json` below, 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).**
1. **`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.
1. **`README.md`**: A text file containing useful reference information about your project.
1. **`slicknode.yml`**: The Slicknode configuration for the CMS where all the dependencies and modules are configured.
1. **`slicknode-fragments`**: The fragments of all the types that are imported from the Slicknode API into your Gatsby GraphQL schema.
## 🎓 Learning Gatsby + Slicknode
Looking for more guidance? Full documentation for Slicknode lives [on the Slicknode website](https://slicknode.com).
Full documentation for Gatsby lives [on the Gatsby website](https://www.gatsbyjs.com/). Here are some places to start:
- **Modeling data with Slicknode:** Check out [the Slicknode documentation](https://slicknode.com/docs/) to learn how to model your content and other functionality.
- **For most developers, we recommend starting with the [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/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 the Gatsby documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
## 💫 Deploy
[](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world)
[](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world)