gatsby universal

React Context, 스타일 구성 요소, 페이지 전환, IntersectionObserver 사용한 스크롤 이벤트, 접근성 및 SEO에 중점을 둔 독창적인 Gatsby v2 스타터입니다. 최첨단 마케팅 사이트를 위해 제작되었습니다.

gatsby-universal.netlify.com에서 온라인으로 이 스타터의 데모에 액세스할 수 있습니다.

---

특징

• ? 페이지 전환, 구성요소 기반(js 지원 없음)
• ?‍♂️ IntersectionObserver , 컴포넌트 기반(폴리필 포함)
• ? SSR을 사용하여 전역 UI 상태에 대한 React 컨텍스트
• ? styled-components v4
• ? Google Lighthouse에 최적화됨(테스트 포함)
• CSS와 JS의 코드 분할(컴포넌트 기반)
• ? 인라인 SVG 지원
• 사이트 전체 설정을 위한 하나의 구성 파일
• ? 하나의 구성 요소에 가장 많은 소셜 + 메타 태그가 포함되어 있습니다.
• ? 모든 파비콘이 생성되었습니다. 단 하나의 아이콘 파일만 필요합니다.
• 오프라인 지원
• ? 매니페스트 지원
• ? 사이트맵 지원
• 쉽게 사용할 수 있도록 생성된 미디어 쿼리
• ? 코드 스타일에 더 예쁘다
• CircleCI 지원
• ? 스키마 JSONLD
• ? 번들 크기를 감시하는 size-plugin
• ?‍? ESLint( eslint-plugin-react 기반)

제안이나 피드백이 있으신가요? 이슈를 열어보세요!

Lighthouse 점수(Netlify에서)

용법

 # Installation with `gatsby-cli`
gatsby new my-site https://github.com/fabe/gatsby-universal

# Installation with `git clone`
git clone [email protected]:fabe/gatsby-universal.git my-site
cd my-site
yarn install

# To develop
yarn develop

# To build
yarn build

# To test SSR (for Lighthouse etc.)
yarn ssr

# To format JS (precommit)
yarn format

# To generate favicons (included in `build`)
yarn build:favicons

구성

site-config.js 에서 사이트 전체 구성을 찾으세요.

 module . exports = {
  siteTitle : `Gatsby Universal` ,
  siteTitleShort : `GatsbyU` ,
  siteDescription : `An opinionated starter for Gatsby.` ,
  siteUrl : `https://gu.fabianschultz.com` ,
  themeColor : `#000` ,
  backgroundColor : `#fff` ,
  pathPrefix : null ,
  logo : path . resolve ( __dirname , 'src/images/icon.png' ) ,
  social : {
    twitter : `gatsbyjs` ,
    fbAppId : `966242223397117` ,
  } ,
} ;

static/ 내부에서 robots.txt 업데이트하는 것을 잊지 마세요!

폴더 구조

├── gatsby-browser.js # Specify how Gatsby renders pages in the browser
├── gatsby-config.js # Gatsby config, mostly taken from `site-config.js`
├── gatsby-node.js # Modify webpack config
├── gatsby-ssr.js # Specify how Gatsby builds pages
├── site-config.js # Global settings for the whole site, used by multiple scripts
├── content # Content & data, in both json and markdown
├── src
│   ├── components
│   │   ├── head # All meta tags etc.
│   │   ├── io # Intersection Observer component, uses render props
│   │   ├── layout # Layout component
│   │   │   ├── layout.css.js # .css.js for component's `styled-components`
│   │   │   └── layout.js
│   │   └── transition # Page Transition component, used by Gatsby APIs
│   ├── constants # Site-wide constants (breakpoints, colors, etc.)
│   ├── containers # Container components if store is needed
│   ├── helpers
│   │   ├── schemaGenerator.js # Generates JSON-LD schema.org snippets
│   │   └── mediaTemplates.js # Creates media queries for styled-components
│   ├── images # Images needed by the site/theme (not content)
│   ├── pages
│   ├── store # Store and provider of a React.createContext instance
│   └── global.css.js # Global CSS
└── scripts
    ├── lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)
    └── favicons.js # Generates favicons and manifest using one png only. 

작가

• 파비안 슐츠(@fschultz_) - Stink Studios