Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.
-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying this starter.
# create a new Gatsby site using the default starter gatsby new my-org-website https://github.com/orgapp/gatsby-starter-orga
-
Start developing.
Navigate into your new site’s directory and start it up.
cd my-org-website/ gatsby develop
-
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.
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-config.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
The items you want to pay attention are:
-
/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”. -
gatsby-config.js
: This is the main configuration file for a Gatsby site. You can configure the theme with a set of flexible options.
key | default value | explanation |
---|---|---|
basePath |
/ |
the base path of your org-mode content, e.g. /blog |
contentPath |
content |
source folder of your org files, relative to the root of the project. e.g. ../notes |
filter |
{} |
filter of your posts, key sohuld match metadata property names, e.g. { category: 'posts'} |
pagination |
10 | maximum number of posts per index page. |
slug |
['$category', '$export_file_name'] |
array of elements for generating slug for each posts, the ones with $ prefix means to take the value from metadata with matching field name, e.g. ['blog', '$export_file_name'] will give you slugs like blog/my-post |
buildIndexPage |
true |
whether or not to build an index page, it's path would be your basePath , but can be overwritten by custom pages in your src/pages folder. |
buildCategoryIndexPage |
true |
whether or not to build category index pages. |
metadata |
['title', 'category'] |
define the metadata you need in your custom post and posts components. e.g. [ 'title', 'category', 'date', 'author' ] |
sortBy |
['date'] |
metadata fields for sorting your posts |
order |
DESC |
options: ASC , DESC |
- To change how
post
pages look, modify file: src/gatsby-theme-orga/components/post.js. - To change how
posts index
pages look, modify file: src/gatsby-theme-orga/components/posts.js.
See the CV page for an example of how to generate extra pages with your org-mode content.