Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

Gatsby Theme - Simple Bio

This theme is developed using gatsby. One can use this theme for having a website with brief introduction and social profiles.

See the live demo.

Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    npm install --save gatsby-theme-simple-bio
  2. Add the theme to your gatsby-config.js:

    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-theme-simple-bio',
          options: {
            // See Options section for more details
          }
        }
      ]
    }
  3. Start your site

    gatsby develop

Usage

Site setup

  • Required directories

    • author
├── author
│   └── john-doe.yml
├── content
│   ├── assets
│   │   ├── profile.png
│   │   └── profile.svg
│   └── home
│       └── index.mdx
├── gatsby-config.js
├── package-lock.json
├── package.json
└── src
    ├── gatsby-theme-simple-bio
    │   ├── components
    │   │   └── bio
    │   │       └── figure.js
    │   └── gatsby-plugin-theme-ui
    │       ├── colors.js
    │       └── index.js
    └── pages
        └── 404.js
  • You need to have an author directory which contains a yml file containing author information
  • The structure of yml file in author is expected to be
# Author info
name: John Doe
description: A passionate web designer
cover: ../content/assets/profile.png
username:
  linkedin: john-doe
  github: john-doe
  facebook: john.doe
  twitter: john_doe
  email: john_doe@mail.com
positions:
  - title: Position 1
    company: XYZ Company
    duration: July YYYY - Present
  :
  :
  • The image provided in cover entry of yml is expected to be an image file (other than SVGs) which is locally present (Currently online image links are not supported)

NOTE: This image should be present in the directory specified by assetsPath in theme options.

  • If you don’t wish to provide any usernames, make the entry an empty string as below
username:
  github: ""
  • Description of the person should be provided in the folder specified in homePath option of the theme. The MDX file present in this folder should have type "home-page" in the front matter.

Theme Options

Below are the options available for the theme

// Base url for rendering site
baseUrl: "/", // Default: "/"
// Directory path for images
assetsPath: "content/assets", // Default: "content/assets"
// Directory path for MDX home page content
homePath: "content/home", // Default: "content/home"
// Should the theme have rounded components
rounded: false, // Default: false
Key Default Description
baseUrl / Base url for rendering site
assetsPath content/assets Directory path for images
homePath content/home Directory path for MDX home page content
rounded false Should the theme have rounded components

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site’s gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Name of the gatsby site
    appName: "Demo of gatsby-theme-simple-bio",
    // Used for the site title and SEO
    title: "Demo of gatsby-theme-simple-bio",
    // Used to provide alt text for your avatar
    author: "John Doe",
    // URL for the website
    siteUrl: "https://www.gatsbyjs.org",
    // Used for SEO
    description:
      "This site is a demonstration for using theme " +
      "gatsby-theme-simple-bio",
    // Used for social links in the root footer
    social: {
      // Facebook
      facebook: "john-doe",
      // Twitter
      twitter: "john-doe",
      // Email
      email: "john-doe",
      // LinkedIn
      linkedin: "john-doe",
      // Github
      github: "john-doe",
    },
  },
}

Features

  • Support for theme-ui
  • Responsive mobile friendly UI
  • Dark/Light modes