• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Vagr9K/gatsby-material-starter: A high performance blog starter with Material de ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

Vagr9K/gatsby-material-starter

开源软件地址(OpenSource Url):

https://github.com/Vagr9K/gatsby-material-starter

开源编程语言(OpenSource Language):

TypeScript 89.3%

开源软件介绍(OpenSource Introduction):

Logo
Powered by TypeScript Coverage Status Material Demo

Gatsby Material Starter

A Material Design oriented blog starter for GatsbyJS equipped with advanced features such as SEO, image optimization, PWA capabilities and infinite scrolling feeds.

This starter aims to provide a minimal base for building advanced GatsbyJS powered websites by using the latest technologies to simplify your process.

Starter supports both TypeScript and JavaScript, comes with Jest and Cypress configurations and allows you to write Unit/Integration/E2E tests out of the box.

The starter uses gatsby-theme-advanced under the hood and is based on the Gatsby Advanced Starter.

Demo

Material Demo.

Visit gatsby-theme-material for details regarding on how it was built using gatsby-theme-advanced.

Features

  • Gatsby v4 support
  • First class TypeScript support (for query data and components exposed by the theme)
  • Material UI V5 components
  • Emotion used for styling
  • Posts in MDX
    • Code syntax highlighting
    • Embed videos
    • Embed iframes
  • Infinite Scrolling
  • React Query for client side API calls
  • Tags
    • Separate page for posts under each tag
  • Categories
    • Separate page for posts under each category
  • Social features
    • Twitter tweet button
    • Facebook share/share count
    • Reddit share/share count
    • LinkedIn share button
  • Author section
  • Related posts computation and display based on category/tag match ranking
  • Disqus support via gatsby-theme-advanced
  • gatsby-plugin-image for optimized image generation
  • Inline SVG imports
  • High configurability
  • Separate components for everything:
    • Gatsby Link utilities
    • SEO
    • Disqus
  • PWA features
    • Offline support
    • Web App Manifest support
    • Loading progress for slow networks
  • SEO
  • RSS feeds
  • Development tools
    • Yarn 3
    • Jest for unit/integration testing
    • Cypress for E2E testing
    • CI via GitHub Actions
    • CD via GitHub Actions
    • ESLint for linting
    • Prettier for code formatting
    • React Hooks Linting
    • Remark-Lint for linting Markdown
    • write-good for linting English prose
    • gh-pages for deploying to GitHub pages
    • Netlify deploy configuration

Getting Started

Install this starter by running the following commands from your CLI:

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-starter
cd YourProjectName
yarn develop # or gatsby develop

Note that the Gatsby CLI needs to be installed and updated for the gatsby command to work.

Alternatively you can fork the project, make your changes and merge new upstream features when needed:

  • Fork this repository on GitHub

  • Run the following commands:

    git clone https://github.com/${YourUsername}/${YourForkName} YourForkName # Clone your fork
    cd YourForkName
    yarn install # or yarn install
    yarn develop # or yarn develop

Receiving upstream updates

You have multiple options when it comes to receiving upstream updates:

  • Pull and merge upstream changes into your repo
  • Change the version of gatsby-theme-material from local to remote.

First option allows you to make your own changes to the theme without having to fork and publish it. This is the default approach when you clone/fork the starter repository.

Second option simplifies your CI/CD setup and allows you to receive updates by simply bumping the package version.

To switch to the remote version, open package.json and edit the dependency section:

 "gatsby-theme-material": "*",

into

 "gatsby-theme-material": "3.1.0", // Or the version you want

Configuration

To configure the theme edit your gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-material`,
      options: {
        basePath: `/blog`,
      },
    },
  ],
};

For configuring the theme, consult its documentation pages:

NetlifyCMS

First of all, make sure to edit static/admin/config.yml and add your GitHub/GitLab/NetlifyId credentials:

backend:
  name: github # Refer to https://www.netlifycms.org/docs/authentication-backends/ for auth backend list and instructions
  branch: master # Branch to update
  repo: vagr9k/gatsby-material-starter # Repo for pushing new commits. Make sure to replace with your repo!

You can visit /admin/ after and will be greeted by a login dialog (depending on the auth provider you ave chosen above).

If want to customize Netlify CMS, e.g. registering custom widgets or styling the preview pane, you can do so by editing src/netlifycms/index.js:

import CMS from "netlify-cms-app";

CMS.init({
  config: {
    backend: {
      name: "git-gateway",
    },
  },
});

For NetlifyCMS specific issues visit the official documentation.

Author

Ruben Harutyunyan (@Vagr9K)




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap