Gatsby Landing Page

Gatsby page template for creating static & simple landing page.

 

Features

• statically rendered page
• lightweight
• SEO-ready (Twitter and OpenGraph tags included)

How to change data

Text data displayed on page and in meta tags in can be found and changed in config/site-metadata.js.

Property	Description
pageTitle	Page title displayed in browser tab.
name	Name used in About Me description and footer with copyrights
pageSubtitle	Text displayed under Name in About Me section
seoTitle	Page title used in social media where page is shared (e.g. on Twitter or Facebook)
seoDescription	Page description used in social media where page is shared (e.g. on Twitter or Facebook)
siteUrl	Page URL used in social media where page is shared (e.g. on Twitter or Facebook)
backgroundColor	Background color of page
twitterHandle	Your Twitter account; used in Twitter where page is shared
personDescription	Description displayed in About Me section. One line per each object with text property.
socialMedia	Array of objects with your social media accounts. url: URL of your social media account displayName: display name of given account iconName: name of icon for given account (find name icon here: Fork Awesome)
projects	Array of objects with your projects. url: URL of your project displayName: display name of given project languageIconName: name of icon for project's main language (find name icon here: Fork Awesome) sourceIconName: name of icon for given project's repository page, e.g. GitHub, GitLab, BitBucket (find name icon here: Fork Awesome)

• Image used in About Me section can be replaced in src/images/avatar.png. Suggested image size is 240x240 px. If you want to rename file, please update filename in src/pages/index.js in query function:

imageSharp(fixed: {originalName: {eq: "<new filename>.[ext]"}}) {

• Image used for displaying in social media can be replaced in src/images/social-media-cover.png. Suggested image size is 1200x630 px. If you want to rename file, please update filename in src/components/seo.js in useStaticQuery function:

imageSharp(fixed: {originalName: {eq: "<new filename>.[ext]"}}) {

• Favicon can be replaced in src/images/favicon.png. If you want to rename file, please update filename in src/components/seo.js in useStaticQuery function:

favicon: imageSharp(fixed: {originalName: {eq: "<new filename>.[ext]"}}) {

How to use in your own project

1. Install Gatsby CLI: npm i -g gatsby-cli
2. Initialize project: gatsby new project-name https://github.com/wiewiordev/gatsby-landing-page
3. Run dev environment: cd project-name && npm start
4. Change data in config/site-metadata.js
5. Deploy it!

Copyrights

Photo used for OpenGraph tag by Christopher Gower on Unsplash

License

MIT License