{"data":{"markdownRemark":{"html":"

Start dev-server

\n
npm run start
\n

This command run local development server with hot-reloading on files changes.

\n

You can access this server at http://localhost:4000

\n
\n

If you want to change port, you can do this by editing package.json scripts section.

\n
\n

GraphiQL

\n

Besides dev-server on root URL, you can access GraphiQL (GraphQL integrated development environment) on special URL: http://localhost:4000/___graphql.

\n

This tool is provided by GatsbyJS, and could be very usefull in output customization cases.

\n

Structure

\n

Project have some rules of pages organization.

\n

First of all, look at the src directory and what it contains:

\n
src\n├── components\n├── config.js\n├── media\n├── pages\n├── posts\n└── templates
\n\n

Sections

\n
src/posts\n├── common\n├── getting-started\n├── mobile\n├── ramail7\n└── sections.js
\n

Every directory is a section. Name of every section append to URL of posts contained inside.

\n

You need to set order and display name to folders in sections.js for sidebar menu autogeneration.

\n
export const sections = [\n  { folder: 'getting-started', name: 'Getting Started' },\n  { folder: 'examples', name: 'Some Section' }\n];
\n

Posts

\n

Every section have to contain ordered list of markdown files.

\n
src/posts/getting-started\n├── 01__install.md\n├── 02__usage.md\n└── ...
\n

Post title and date are set in header of post.

\n
---\ntitle: 'Usage Guide'\ndate: '2018-11-02'\n---
\n

All posts composed into sections on autogeneration stage.

","timeToRead":2,"excerpt":"Start dev-server This command run local development server with hot-reloading on files changes. You can access this server at http…","frontmatter":{"title":"Usage Guide","date":"2018-11-02"},"fields":{"slug":"getting-started/usage"}}},"pageContext":{"slug":"getting-started/usage"}}