2.0.6 • Public • Published

    Gatsby Theme Serenity 平静

    CircleCI Current npm package version.


    You can see my personal blog using this theme and the Github repository with the configuration and content

    Quick Start

    mkdir my-site
    cd my-site
    yarn init
    # install gatsby-theme-serenity and it's dependencies
    yarn add gatsby react react-dom gatsby-theme-serenity

    You can add now the yarn scripts to your package.json file

      "scripts": {
        "build": "gatsby build",
        "clean": "gatsby clean",
        "develop": "gatsby develop"

    Then create the gatsby-config.js file:

    touch gatsby-config.js

    And add the theme configuration to it:

    module.exports = {
      plugins: [
          resolve: "gatsby-theme-serenity",
          options: {
               title: "Serenity 平静",
               subtitle: "a short subtitle for the meta title on the home page",
               description: "A minimal theme for your personal blog or webpage",
               siteUrl: "",
               defaultPreviewImage: "/og-default.png",
               author: {
                   name: "Asier Marqués",
                   bio: "Software Engineer",
                   url: "",
                   links: {
                       twitter: "",
                       linkedin: "",
                       github: "",
                       instagram: "",
                       mail: ""
               links: [
                       title: "Articles",
                       href: "/"
                       title: "About me",
                       href: "/about-me"
               articles_per_page: 4,
               language: "en"

    That's it, you can now run your gatsby site using

    yarn develop

    This will run a local web server and create the content and static folders with all the required files to run your website.

    Adding content

    The content need to be stored in the content directory as markdown files.

    Every markdown file need to have a frontmatter section in it. Here is an example:

    date: 2020-11-20 00:30:03+00:00
    slug: /2020/hello-world/
    title: Hello World
    template: post
    coverImage: /the-image.jpg
      - Writing
    draft: false
    description: "This is your first article, you can find it in the /content directory"
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lorem eget metus venenatis dignissim.

    As you see the frontmatter section has some variables, some are required but others not

    variable required description
    date true the ISO 8601 date of the article or page YYYY-MM-DD HH:mm:ss±hh:mm
    slug true the path for the article or page, for example /2020/hello-world
    title true the title of the article or page
    description false the description for the article or page
    draft true is the article is published or not
    template true the template: the possible values are: post or page
    coverImage false the cover image for the article
    tags false an array of YAML tags


    npm i gatsby-theme-serenity

    DownloadsWeekly Downloads






    Unpacked Size

    144 kB

    Total Files


    Last publish


    • asiermarques