• Stars
    star
    204
  • Rank 192,063 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸš€ A Gatsby theme/starter to build lightning-fast blog/websites

gatsby-starter-morning-dew

πŸš€ A gatsby-starter-morning-dew is a Gatsby starter to build lightning-fast websites!

Demo

Build Status Netlify Status Maintainability semantic-release Total downloads on npm

screenshot

Features

  • πŸ’œ Gatsby 3 / React 16
  • πŸ” SEO optimized
  • πŸ’Œ Write posts/pages in Markdown or MDX
    • 🎨 Code syntax highlight
    • πŸ“š Multilang support/i18n (blog post)
  • πŸ“± Mobile Friendly (Responsive design)
  • 🌜 Dark mode
  • ✨ PWA ready
    • ✈️ Offline support
    • πŸ“ƒ Manifest support
  • πŸ”§ Fully configurable (see data/siteConfig.js)
  • πŸ’¬ Disqus support
  • πŸ’… css-in-js (with styled-components v5)
  • πŸ”– Groups post with tags
  • 🐦 post preview image generation (Twitter, Facebook...)
  • πŸ’Ž Developer tools:
    • eslint
    • prettier
  • πŸ‘· Travis CI support

Lighthouse scores

Installation (starter)

  • with Gatsby-cli:
npm install --global gatsby-cli
gatsby new gatsby-blog https://github.com/maxpou/gatsby-starter-morning-dew
  • without Gatsby-cli
git clone my-site [email protected]:maxpou/gatsby-starter-morning-dew.git
cd my-site
npm install

Then run npm run develop to try it locally.

Installation (theme)

You can also use gatsby-starter-morning-dew as a Gatsby theme!

  1. Add the theme
npm install gatsby-starter-morning-dew
  1. In your gatsby-config.js, add:
const config = require('./data/siteConfig')
// ...
plugins: [
    {
      resolve: "gatsby-starter-morning-dew",
      options: {},
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: config.siteTitle,
        short_name: config.siteTitle,
        start_url: config.pathPrefix,
        background_color: config.background_color,
        theme_color: config.theme_color,
        display: config.display,
        icon: 'content/images/company-icon.png', // path to your image
      },
    },
],
  1. Add an image called baymax.png in content/images/baymax.png.
    🐞This is due to a theme limitations.
    😬 Don't worry, this picture will not appear on your website!

Need more details? Checkout:

Commands

# working locally
npm run dev

# generate build
npm run build

# format code
npm run format

# lint code
npm run lint

# Generate generate post preview images (npm run dev need to run before)
npm run generatePostPreviewImages

⚠️ Add --prefix-paths if you are using path prefix!

Configure

module.exports = {
  siteTitle: 'gatsby-starter-morning-dew',
  siteDescription: 'A Gatsby theme/starter to build lightning-fast websites',
  authorName: 'Maxence Poutord',
  twitterUsername: '_maxpou',
  authorAvatar: 'avatar.jpeg', // file in content/images
  defaultLang: 'en', // show flag if lang is not default. Leave empty to enable flags in post lists
  authorDescription: `
  For the last decade, Maxence Poutord has worked with a variety of web technologies. He is currently focused on front-end development.
  On his day to day job, he is working as a senior front-end engineer at VSware. He is also a frequent tech speaker and a mentor.
  As a new digital nomad, he is living where the WIFI and sun is 😎 <br>
  Do you want to know more? <a href="https://www.maxpou.fr/about" target="_blank">Visit my website!</a>
  `,
  siteUrl: 'https://maxpou.github.io/',
  disqusSiteUrl: 'https://www.maxpou.fr/',
  // Prefixes all links. For cases when deployed to maxpou.fr/gatsby-starter-morning-dew/
  pathPrefix: '/gatsby-starter-morning-dew', // Note: it must *not* have a trailing slash.
  siteCover: 'cover-baymax.jpeg', // file in content/images
  background_color: '#ffffff',
  theme_color: '#222222',
  display: 'standalone',
  icon: 'content/images/baymax.png',
  postsPerPage: 6,
  disqusShortname: 'maxpou',
  headerTitle: 'gatsby-starter-morning-dew',
  headerLinksIcon: 'baymax.png', // file in content/images (leave empty to disable: '')
  headerLinks: [
    {
      label: 'Blog',
      url: '/',
    },
    {
      label: 'About',
      url: '/about-gatsby-starter-morning-dew',
    },
    {
      label: 'Installation',
      url: '/how-to-install',
    },
  ],
  // Footer information (ex: Github, Netlify...)
  websiteHost: {
    name: 'GitHub',
    url: 'https://github.com',
  },
  footerLinks: [
    {
      sectionName: 'Explore',
      links: [
        {
          label: 'Blog',
          url: '/',
        },
        {
          label: 'About',
          url: '/about-gatsby-starter-morning-dew',
        },
        {
          label: 'Installation',
          url: '/how-to-install',
        },
      ],
    },
    {
      sectionName: 'Follow the author',
      links: [
        {
          label: 'Github',
          url: 'https://github.com/maxpou/gatsby-starter-morning-dew',
        },
        {
          label: 'Website',
          url: 'https://www.maxpou.fr',
        },
        {
          label: 'Twitter',
          url: 'https://twitter.com/_maxpou',
        },
      ],
    },
  ],
}

Deploy

Deploy to Netlify

More Repositories

1

docker-symfony

🐳 A docker multicontainer with NGINX, PHP7-FPM, MySQL and ELK (Elasticsearch Logstash and Kibana)
Dockerfile
1,307
star
2

dotfiles

πŸ’» my dotfiles (MacOS)
Shell
33
star
3

vue-testing-library-sample

πŸš€ A Vue.js project to test Jest and Testing-library. Data come from Star Wars API.
Vue
20
star
4

design-pattern-php

Some Design Pattern implemented in PHP
PHP
10
star
5

maxpou.fr

🌐 Maxpou's personal website
MDX
9
star
6

gitvub

:octocat: Github + Vue = GitVub
JavaScript
5
star
7

graphql-nodejs-mongodb

POC with GraphQL, NodeJS and MongoDB
JavaScript
5
star
8

symfony-rest-beer-edition

🍻 A Symfony application with a REST API
PHP
4
star
9

pikaday-vue

A Vue.js wrapper for Pikaday
JavaScript
3
star
10

nest-react-graphql

A React&NestJS application that integrates with GraphQL.
TypeScript
3
star
11

gatsby-groot

sample using gatsby-starter-morning-dew theme
JavaScript
3
star
12

happy-halloween

πŸŽƒ Set a halloween theme to your website
HTML
3
star
13

silex-boilerplate

A lightweight Silex application which provide an API with HAL/HATEOAS
PHP
2
star
14

dictionary-game

πŸ“” A dictionary mini game
Vue
2
star
15

hubot-docker

🐳 A docker file for my Hubot
1
star
16

analyticsCNIL

JavaScript
1
star
17

sebastiandedeyne.com

My personal website, built with Hugo
HTML
1
star
18

maxpou

My GitHub profile
1
star
19

vscode-extension-maxpou

1
star
20

swapi-shop-vue-vuex

πŸš€ A Vue.js + Vuex project using the StarWars API
JavaScript
1
star
21

pomodoro-ninja.gadget

⌚ a MS Windows Gadget for Pomodoro Technique
JavaScript
1
star
22

hermes

✈️ playing with @Mapbox
JavaScript
1
star
23

github-actions-test

playing with GiHub Actions
JavaScript
1
star
24

gatsby-theme-resume

JavaScript
1
star
25

gatsby-themes-tutorial

JavaScript
1
star