A Gatsby theme presenting a person
If you do not have Gatsby Cli installed yet, do it first.
npm install --global gatsby-cli
More information on GatsbyJS.org
-
Start developing.
Navigate into your new siteβs directory and start it up.
cd my-default-starter/ npm start
-
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.Open the
my-default-starter
directory in your code editor of choice and editsrc/pages/index.js
. Save your changes and the browser will update in real time!
Find folders images
and screens
inside the content/elevator-pitch
folder.
root
βββ content
β βββ elevator-pitch
β βββ images
β β βββ ...
β βββ screens
β βββ ...
Put a jpg
file named avatar.jpg
into the images
folder. Then add two or more markdown
files to the screens
folder.
root
βββ content
β βββ elevator-pitch
β βββ images
β β βββ avatar.jpg
β βββ screens
β βββ 1___first-screen.md
β βββ 2___second-screen.md
You can not use a different name for avatar than avatar.jpg
.
The names of markdown
files have to obey a pattern X___slug.md
. Where X
is a number indicating position of the screen. The number must be follewed by the ___
separator ( 3 x undescore ). The last part of the name, a slug
is optional. Knowing that, you can name a file like this 1___.md
or 1__first-scrren.md
. Take a look at the demo content files of the theme in the repository.
This is example of a markdown
file with content for one screen. Two sections: title (#
) and a paragraph text below.
# This is the screen's title
And the screen's body copy.
You can add as many screen
files as you want. But remember it should be an elevator pitch so less is better. ;)
Update your gatsby-config.js
module.exports = {
siteMetadata: {
title: `Gatsby.js 'Elevator Pitch' theme`,
url: `https://khriztianmoreno.dev`,
image: 'preview.png',
language: 'en',
description: 'FullStack Javascript Developer and Community builder | Producer @commitfm | Co-Organize of @MedellinJS @avanet.',
socialLinks: {
github: 'https://github.com/khriztianmoreno',
twitter: 'https://twitter.com/khriztianmoreno',
mailto: 'mailto:[email protected]',
},
},
module.exports = {
__experimentalThemes: ['gatsby-theme-elevator-pitch']
};