gatsby-theme-serena image cover

Serena Theme

A minimalist Gatsby theme designed for photography and portfolios — with a masonry grid and lightbox

Check out the live demo

Deploy to Netlify

✨Features

  • Minimalist and fast
  • Define your galleries with YAML
  • Local or remote images
  • Masonry grid (vertical or horizontal) and lightbox
  • Contact form (Netlify)
  • Generate About page and more with MDX
  • Social links
  • Styling with Theme UI
  • Responsive
  • Offline support
  • Perfect Lighthouse score (web.dev)

Perfect Lighthouse score

🌐Showcase

Your project using this theme goes here

🚀Installation

New site

Generate a new site pre-configured with Gatsby Theme Serena.

gatsby new my-themed-site https://github.com/daniel-seoane/gatsby-starter-serena

Here are the top-level files and directories you’ll see in a site created using the starter:

gatsby-starter-serena
├── content
│   ├── assets
|   ├── ├── icon.png
│   │   └── avatar.webp
│   ├── galleries
│   │   └── index.yml
│   └── pages
│       └── about.mdx
├── static
│   └── og-image.webp
├── src
├── .gitignore
├── gatsby-config.js
├── LICENSE
├── package.json
└── README.md

Add to existing site

  1. Install the theme
npm install --save gatsby-theme-serena

or

yarn add gatsby-theme-serena
  1. Add the theme to your gatsby-config.js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-serena',
      options: {
        // See config section for more information
      },
    },
  ],
}

📝Config

Key Default value Description
galleriesPath content/galleries Location of galleries, can be one or multiple YML files
pagesPath content/pages Location of pages
assetPath content/assets Location of assets
disableContact false Delete the default Contact page
margin 6 Margin between photos in the masonry grid
direction column Direction in the masonry grid, “column” (vertical) or “row” (horizontal)
mdx true Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

📝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: {
    // Used for the site title and SEO
    title: `Serena`,
    // Used for the site description and SEO
    description: `Photography Theme`,
     // Used for SEO
    author: "Gatsby",
    // Used for SEO. Must be the full URL for the default image
    image: 'https://www.example.com/og-image.jpg',
    // Typographic logo
    name: `Serena`,
    // Short tagline
    tagline: `Photography Theme`,
    // Navigation links (this is the default)
    menuLinks: [
      {
        name: "About",
        url: "/about/",
        type: "internal" // internal or anchor
      },
      {
        name: "Contact",
        url: "/contact/",
        type: "internal" // internal or anchor
      }
    ],
    // Social links
    social: [
      {
        name: `Facebook`,
        url: `https://facebook.com`
      },
      {
        name: `Twitter`,
        url: `https://twitter.com`
      },
      {
        name: `Instagram`,
        url: `https://instagram.com`
      }
    ]
  }
}

You can use remote or local images, but if you use remote images you cannot use local images and vice versa

Remote (remote images are downloaded and create a File node)

- name: Remote
  slug: /remote
  photos:
    - title: San Francisco
      alt: San Francisco
      url: https://images.unsplash.com/photo-1583743220494-3da91330c2fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1001&q=80
    - title: Italy
      alt: Italy
      url: https://images.unsplash.com/photo-1583855282680-6dbdc69b0932?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80

Local

- name: Local
  slug: /local
  photos:
    - title: San Francisco
      alt: San Francisco
      url: ../assets/san-francisco.png
    - title: Italy
      alt: Italy
      url: ../assets/italy.png

👥Shadowing

Remember that you can use shadowing

Shadowing in Gatsby Themes

✋Support

If you want to thank me or support this project you can buy me a coffee

Buy Me A Coffee

Issues and pull requests are welcome

License

MIT