gatsby 심플 Gatsby 사이트에 건간 기능 추가 (전편) 에서 만든 사이트를 업그레이드합니다. 결론부터 말하면 플러그인을 넣거나 graphql을 궁리하거나 하면 비교적 빨리 기능 추가는 가능했습니다. 전회 작성해 업한 사이트는 이런 느낌의 심플한 블로그였습니다. 이번에 작성한 것이 이것입니다. 비교적 노력했다! 이번에 이하 기능을 추가했습니다. 반응형 대응 마크 다운 기사를 블로그 워크로 구분하여 각각을 다른 카테고리로 표시 (BLOG와 WORKS... React자바스크립트개발JSXgatsby gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링 이번에 실시하는 gatsby의 튜토리얼은 이쪽 GraphQL과 소스 플러그인을 사용하여 Gatsby 사이트로 데이터를 캡처하는 방법을 이해할 수 있습니다. 그러고 보니 GraphQL에 대해 그다지 잘 이해할 수 없었구나. 글쎄요. 아무것도 돌진한 뒤에 이해하고 있다. 그것이 내 방식. 솔레가 올레노야 리카타. 소레카오레노리타카타. 빨리 가자. 소스는 만든 사람을 사용합니다. GraphiQL은... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역 이번에 실시하는 gatsby의 튜토리얼은 이쪽 튜토리얼의 시작 부분에 이렇게 썼습니다. 이 중요 이전 튜토리얼에서는 소스 플러그인이 데이터를 개츠비 데이터 시스템에 어떻게 캡처하는지 보여주었습니다. 이 튜토리얼에서는 변환 플러그인이 소스 플러그인이 가져온 원시 콘텐츠를 변환하는 방법을 배웁니다. 소스 플러그인과 트랜스포머 플러그인의 조합은 Gatsby 사이트를 구축할 때 필요할 수 있는 모든... 자바스크립트gatsbyReactJSX gatsby 입문 자습서 2. 개츠비 스타일링 개요 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 스타일링의 개요를 알 수 있는 것 같습니다. Create a new Gatsby site 새로운 gatsby 사이트를 만듭니다. 다음을 실행gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-worldcd tutorial-part-two Add styl... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2) 튜토리얼의 1.Get to Know Gatsby Building Blocks의 계속 에서 튜토리얼을 해 나갑니다. 구성 요소를 사용한 구축 components는 사용하는 느낌의 UI 부속이라고 하는 감각? Using page components src/pages/about.js를 만들어 다음을 설명 src/pages/about.js 만든 후 액세스http://localhost:8000/abo... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1) 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 빌딩 블록이라는 것을 알 수 있는 것 같습니다. , hello-world 사이트를 명령으로 만든 것처럼 다음 명령으로 gatsby 사이트를 만들 수 있습니다.gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]리포지토리 URL을 생략하면 다음이 기본입니다. VS Code로 만든 hell... 자바스크립트gatsbyReactJSX gatsby 입문 자습서를 다루는 0. 개발 환경 설정 무언가와 셋업 슈퍼 귀찮아. 대체품이 없을까라고 생각해 검색을 쵸코쵸코 HTML 생성 도구라는 것이 왠지 알았다. 우선 로컬로 환경을 만들어 보자. (서버리스로 작성하는 것이 주류와 같기 때문에 GCP에 세운 VM을 어떻게 할지는 별도 검토) gatsby라는 것이 유행 같다. 유행에 따라, gatsby를 로컬에 도입해 본다. 튜토리얼에 따라 소개합시다. 설치 노드 (Windows) 12.18... 자바스크립트gatsbyReactJSX Gatsby에서 Font Awesome을 사용하고 싶습니다. Gatsby 정말 편리합니다. 이번에는 Gatsby에서 FontAwesome을 사용하는 방법에 대해 설치에서 글꼴 아이콘을 표시하는 곳까지 설명 Gatsby.js v2.18.4 react-fontawesome v0.1.7 (Font Awesome 5) 그건 그렇고, Gatsby는 다음 스타터를 사용하여 빌드했습니다 ↓ 또한이 기사에서는 위의 스타터로 빌드 한 Gatsby 프로젝트의 bio.j... gatsbyReactFontAwesome Gatsby에 TableOfContents(목차)를 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. 전회는 태그 일람과 기사 일람의 컴퍼넌트를 동시에 내는 GrapuQL 쿼리의 응용까지 실시했습니다. 이번은 블로그에서 빠뜨릴 수 없는 TableOfContents(목차)의 구현 방법의 소개입니... CMS자바스크립트gatsbyTOC Gatsby에 공유 기능, OGP 태그 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번은 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 가려고 생각합니다. 이번에는 WordPress의 공유 버튼 뭔가 자주 SNS에 공유 버튼과 OGP 설정 태그를 추가하는 방법을 설명합니다. 설정할 수 있으면 OK입니다. Slack의 채팅 등에 게시해도 확인할 수... 트위터자바스크립트OGPCMSgatsby Gatby.js＋Netlify로 LightHouse 만점의 사이트를 하루에 만든 이야기 Qiita 이외에 잡기 블로그적인 것을 해본 기분이 된다 친구 엔지니어에게 추천된 Gatsby.js에서 블로그를 개설해 보았습니다. 이번에는 Gatby.js+Netlify로 가기로 했습니다. 일부 Gatsby의 스타터를 복제하고 시도했지만 이 스타터가 제일 그대로 블로그로서 사용할 수 있을 것 같았습니다. Gatsby는 정적 사이트 생성기이므로 빠릅니다 React는별로 만지지 않았기 때문에이... ReactNetlify자바스크립트CMSgatsby Gatsby에서 SCSS를 Mixin하는 방법 Gatsby.js를 사용하여 SCSS를 Mixin 할 때 설정 한 메모 Scoped Style에 mixin으로 정의한 CSS를 include로 읽고 싶었습니다. src/assets/scss/foundation/_mixin.scss gatsby-config.js 다음은 gatsby-starter-default를 사용하여 프로젝트를 만든 것에 대해 index.js에서 Scoped Style을 사... Sassscssgatsbymixin Gatsby 노트 5 (Contentful-1) Contentful을 사용하여 블로그 목록의 정보를 업데이트합니다. Try for free를 누르십시오 Sign up 왼쪽 I create content 선택 Get started 를 누릅니다 The example project가 생성된다 (여기서는 사용하지 않는다) 왼쪽 상단 메뉴에서 "+Create space"를 누릅니다 커뮤니티 선택 1.Content modal => Add conten... GraphQLgatsby Gatsby 노트 4 (상세 페이지) slag에 묶는 data를 얻는다 블로그 세부 정보 페이지의 콘텐츠보기 (html보기) QUERY VARIABLES에서 변수를 입력하고 시도하십시오 src/templates/blogDetail.js... GraphQLgatsby Gatsby 노트 2(Markdown/GraphQL Playground) 1. Markdown을 이용할 준비 2.GraphQL Playground 도입 3.Markdown을 데이터로 사용 플러그인 설치(3개) ⑴ gatsby-transformer-remark ⑵ gatsby-remark-images ⑶ gatsby-remark-relative-images gatsby.config.js에 추가 (플러그인 3 분) gatsby-source-filesystem의 opt... GraphQLgatsby IntelliJ에서 Gatsby의 GraphQL 스키마를 인식하여 쿼리 완성을 활성화합니다. 이 게시물에서는 IntelliJ IDE 에서 Gatsby의 GraphQL 스키마를 인식하고 JS 코드에서 GraphQL 쿼리를 완성하는 방법을 보여줍니다. IDE에 JS GraphQL 설치 먼저 IDE에 플러그인을 설치합니다. Preferences → Plugins → Marketplace를 열고 GraphQL에서 검색하여 JS GraphQL을 설치합니다. IDE를 다시 시작합니다. Gats... IntelliJGraphQLgatsby Gatsby에 DarkMode를 켜기 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. (본 기사) DarkMode 멋지네요. 대부분의 앱 테마를 DarkMode로 사용하고 있습니다. 여러분은 어떻습니까? 이런 내용이 되고 있습니다. Gatsby Plugin에서 적용 기본 CSS... DarkModescss자바스크립트CSSgatsby Gatsby에 Twitter 멘션 버튼 포함 Twitter 공유 버튼에 대해서는 잘 나오지만, 멘션 버튼의 경우의 방법이 좀처럼 발견되지 않는다. 팔로워 수를 표시하고 싶었을 뿐이므로 우선 팔로우 버튼으로 어떻게 든 비망록. 멘션 버튼↓ 먼저 플러그인 설치 gatsby-config.js gatsby-config.js에 다음과 같이 설명. Twitter 사이트에서 내장 코드 생성 에 간다. Enter your Twitter URL에 트위... 트위터TwitterAPISNSgatsby Gatsbyjs를 GitLab의 CI/CD로 자동으로 렌탈 서버에 배포해 본 설정 저는 초보자입니다. 움직이면서 움직이는 설정이므로주의하십시오. 참고 : 에서 사이트가 시작되었으므로 이것을 GitLab의 CI/CD로 대여 서버로 ftp 전송해 보겠습니다. GitLab의 왼쪽 메뉴에서 Settings > CI/CD > Variables를 선택하고 Key HOST "hogefugaxxx.sakura.ne.jp" USERNAME "yourName" PASSWORD "yourPa... GitLab-CI시렌탈 서버GitLabgatsby GatsbyJS + Netlify에서 예약 게시물 같은 것을하십시오 Netlify 빌드 후크 (Webhook) 발행 IFTTT로 매시간 Build hooks를 두드려 빌드를 달리기 라는 고마운 플러그인으로 frontmatter 의 시각과 현재 시각을 비교해 빌드를 제어할 수 있습니다. npm 또는 yarn으로 패키지를 설치하고 gatsby-config.js 및 gatsby-node.js 에 설정을 추가합니다. gatsby-config.js gatsby-nod... JAMstackNetlifyiftttgatsby Invalid hook call warning에 대처 (중복을 줄이기/gatsby와의 궁합) 몇 번, 뒤틀릴 것 같았는가 ... React Hooks를 사용하기 시작했을 무렵, CRA 등으로 만든 사이트는 어쨌든 Gatsby를 사용했을 때 등 상당한 빈도로 Invalid hook call warning에 휩쓸려 최악의 생각을 한 사람도 적지 않을 것입니다. 이 기사에서는 Invalid hook call warning과 잘 어울리는 "일부 규칙"을 가르칩니다. ※ 원인은, 이쪽을 읽어... ReactYARN버그errorgatsby AWS Amplify에 storybook 자동 배포 Amplify를 사용하여 Gatsyby.js의 호스팅과 백엔드를 구축하고 있습니다. sotrybook을 사용하고 있었기 때문에 쉽게 호스팅할 수 있는 방법을 찾았는데, 여러가지 다른 서비스 있습니다만, BASIC 인증이 유료이기도 하기 때문에 AWS Amplify로 해 보았다. 메인 앱과는 별도로 storybook용 앱을 만듭니다. ※ 저자는 이미 만든 뒤이므로 이렇게 두 개의 앱으로 나누도... amplify빌드gatsbystorybook VSCode에서 gatsby 디버깅 gatsby로 만든 사이트의 디버깅을 VSCode에서 실행할 수 있도록 VSCode를 설정합니다. gatsby 사이트를 만드는 디렉토리에서 VSCOde를 엽니 다. VSCode 확장 기능 아이콘을 클릭합니다. Debugger for Chrome을 입력하여 대상 기능을 설치합니다. ※설치 완료 후에 VSCode의 재기동이 필요할지도 모릅니다. 실행 아이콘 클릭 → 『launch.json 파일을... ChromegatsbyReactVSCode gatsby의 블로그 템플릿에 Material-UI 넣어 멋지게 보이는 -색의 통일- github에있는 gatsby의 블로그 템플릿에 Material-UI를 넣어 멋지게 보이고 싶습니다. 우선은 기본의 색을 결정해 봅시다. node나 gatsby등은 인스톨 해 두어 주세요. Windows10 환경 준비는 아래에서 볼 수 있습니다. 원하는 디렉토리에서 다음 명령을 실행합니다. 다운로드 후 한 번 블로그를 시작합시다. 다음 명령을 실행합니다. 슈퍼 심블! 이를 사용자 정의합니다.... 자바스크립트gatsbyReactmaterial-ui 【Gatsby】 node 최신 버전으로 yarn하면 에러가 나오므로 node의 버전을 바꾸어 yarn 해 보았다 gatsby.js의 테마를 clone하여 사용하려고했을 때 yarn 의 시점에서 에러가 나왔으므로 node의 버젼을 바꾸어 거동을 확인했습니다. v14.9.0 (최판) v12.18.3 (LTS : 장기 지원 버전) v10.22.8 (LTS : 장기 지원 버전) v8.17.0 (LTS : 장기 지원 버전) yarn, gatsby, Mac 버전 gatsby-theme-julia라는 테마를 git... 초보자용초보자Node.jsgatsbynvm 「Vercel + freenom + Getform.io」구성으로 「폭속 + 관리비 완전 무료」의 포트폴리오를 GatsbyJS로 만들면 행복도가 높아진 이야기 드디어 지난달 에서 GatsbyJS의 매력을 전했지만, 오늘은 그 GatsbyJS에서 개발한 포트폴리오 사이트의 구성을 소개합니다 🤗 ↓ 개발한 입니다 기술 구성은 다음과 같습니다 🤝 SPA 사이트의 정적 호스팅 고유 도메인 문의 관리 ※ 2020년 8월 30일 현재 ※ 자세한 것은 이후에 설명 정적 호스팅 서비스 Vercel은 무엇을 무료? 에서 자동 빌드 GitHub(개인 리포지토리 가능... ReactFreenom게 t 포 rm. 이오Vercelgatsby gatsby.js의 블로그에 Google AdSense 광고를 붙이는 방법 head에 코드 삽입 애드센스에 신청하면 head 태그 내에 코드를 붙이도록 지시된다. 그 밖에도 방법은 있는 것 같지만, 잘 되지 않아 최종적으로 플러그인을 선택하고 있는 사람이 많았으므로, 이번은 gatsby-plugin-google-adsense 라는 플러그인을 인스톨 해 head 태그내에 코드를 붙여 받으세요. gatsby-config.js에 다음 코드 추가 gatsby-config.... 자바스크립트gatsbyReactGoogleAdsense Nx를 사용하여 gatsby 프로젝트를 시작하는 이점 Nx를 사용하여 gatsby 프로젝트를 만드는 이점 같은 차이점은 패키지를 관리하는 대신 여러 프로젝트를 관리하고 공통 라이브러리를 만드는 것에 특화되어 있다고 생각합니다. 자신이 느낀 메리트를 기재하는 것보다 프로젝트를 작성하는 것이 메리트를 느낄 수 있다고 생각하기 때문에, 먼저 nx를 이용해 Gatsby의 프로젝트를 작성합니다. nx 때문에 작업 공간 만들기 명령은 nx serve <>... nrwlReactgatsbyTypeScript [Gatsby + firebase] firebase adminApi를 사용하여 firestore의 값을 얻고 GraphiQL에서 확인 gatsby-node에서 firebase adminApi를 사용하여 firestore의 값을 가져옵니다. 아는 사람은 코드만 봐~! 어쩌면 이것이 된 사람은 아래 링크를 보아라 ~ 아래 링크에서 Firebase Admin SDK의 비밀 키 (json)를 가져와주세요! 적당한 이름으로 배치 반드시 할 것! .gitignore에 다음을 추가하십시오. 파일 이름이므로 위에서 설정한 사람에게 맞추십... Firebasegatsby 이전 기사 보기
심플 Gatsby 사이트에 건간 기능 추가 (전편) 에서 만든 사이트를 업그레이드합니다. 결론부터 말하면 플러그인을 넣거나 graphql을 궁리하거나 하면 비교적 빨리 기능 추가는 가능했습니다. 전회 작성해 업한 사이트는 이런 느낌의 심플한 블로그였습니다. 이번에 작성한 것이 이것입니다. 비교적 노력했다! 이번에 이하 기능을 추가했습니다. 반응형 대응 마크 다운 기사를 블로그 워크로 구분하여 각각을 다른 카테고리로 표시 (BLOG와 WORKS... React자바스크립트개발JSXgatsby gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링 이번에 실시하는 gatsby의 튜토리얼은 이쪽 GraphQL과 소스 플러그인을 사용하여 Gatsby 사이트로 데이터를 캡처하는 방법을 이해할 수 있습니다. 그러고 보니 GraphQL에 대해 그다지 잘 이해할 수 없었구나. 글쎄요. 아무것도 돌진한 뒤에 이해하고 있다. 그것이 내 방식. 솔레가 올레노야 리카타. 소레카오레노리타카타. 빨리 가자. 소스는 만든 사람을 사용합니다. GraphiQL은... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역 이번에 실시하는 gatsby의 튜토리얼은 이쪽 튜토리얼의 시작 부분에 이렇게 썼습니다. 이 중요 이전 튜토리얼에서는 소스 플러그인이 데이터를 개츠비 데이터 시스템에 어떻게 캡처하는지 보여주었습니다. 이 튜토리얼에서는 변환 플러그인이 소스 플러그인이 가져온 원시 콘텐츠를 변환하는 방법을 배웁니다. 소스 플러그인과 트랜스포머 플러그인의 조합은 Gatsby 사이트를 구축할 때 필요할 수 있는 모든... 자바스크립트gatsbyReactJSX gatsby 입문 자습서 2. 개츠비 스타일링 개요 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 스타일링의 개요를 알 수 있는 것 같습니다. Create a new Gatsby site 새로운 gatsby 사이트를 만듭니다. 다음을 실행gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-worldcd tutorial-part-two Add styl... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2) 튜토리얼의 1.Get to Know Gatsby Building Blocks의 계속 에서 튜토리얼을 해 나갑니다. 구성 요소를 사용한 구축 components는 사용하는 느낌의 UI 부속이라고 하는 감각? Using page components src/pages/about.js를 만들어 다음을 설명 src/pages/about.js 만든 후 액세스http://localhost:8000/abo... 자바스크립트gatsbyReactJSX gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1) 이번에 실시하는 gatsby의 튜토리얼은 이쪽 개츠비 빌딩 블록이라는 것을 알 수 있는 것 같습니다. , hello-world 사이트를 명령으로 만든 것처럼 다음 명령으로 gatsby 사이트를 만들 수 있습니다.gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]리포지토리 URL을 생략하면 다음이 기본입니다. VS Code로 만든 hell... 자바스크립트gatsbyReactJSX gatsby 입문 자습서를 다루는 0. 개발 환경 설정 무언가와 셋업 슈퍼 귀찮아. 대체품이 없을까라고 생각해 검색을 쵸코쵸코 HTML 생성 도구라는 것이 왠지 알았다. 우선 로컬로 환경을 만들어 보자. (서버리스로 작성하는 것이 주류와 같기 때문에 GCP에 세운 VM을 어떻게 할지는 별도 검토) gatsby라는 것이 유행 같다. 유행에 따라, gatsby를 로컬에 도입해 본다. 튜토리얼에 따라 소개합시다. 설치 노드 (Windows) 12.18... 자바스크립트gatsbyReactJSX Gatsby에서 Font Awesome을 사용하고 싶습니다. Gatsby 정말 편리합니다. 이번에는 Gatsby에서 FontAwesome을 사용하는 방법에 대해 설치에서 글꼴 아이콘을 표시하는 곳까지 설명 Gatsby.js v2.18.4 react-fontawesome v0.1.7 (Font Awesome 5) 그건 그렇고, Gatsby는 다음 스타터를 사용하여 빌드했습니다 ↓ 또한이 기사에서는 위의 스타터로 빌드 한 Gatsby 프로젝트의 bio.j... gatsbyReactFontAwesome Gatsby에 TableOfContents(목차)를 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. 전회는 태그 일람과 기사 일람의 컴퍼넌트를 동시에 내는 GrapuQL 쿼리의 응용까지 실시했습니다. 이번은 블로그에서 빠뜨릴 수 없는 TableOfContents(목차)의 구현 방법의 소개입니... CMS자바스크립트gatsbyTOC Gatsby에 공유 기능, OGP 태그 추가 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번은 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 가려고 생각합니다. 이번에는 WordPress의 공유 버튼 뭔가 자주 SNS에 공유 버튼과 OGP 설정 태그를 추가하는 방법을 설명합니다. 설정할 수 있으면 OK입니다. Slack의 채팅 등에 게시해도 확인할 수... 트위터자바스크립트OGPCMSgatsby Gatby.js＋Netlify로 LightHouse 만점의 사이트를 하루에 만든 이야기 Qiita 이외에 잡기 블로그적인 것을 해본 기분이 된다 친구 엔지니어에게 추천된 Gatsby.js에서 블로그를 개설해 보았습니다. 이번에는 Gatby.js+Netlify로 가기로 했습니다. 일부 Gatsby의 스타터를 복제하고 시도했지만 이 스타터가 제일 그대로 블로그로서 사용할 수 있을 것 같았습니다. Gatsby는 정적 사이트 생성기이므로 빠릅니다 React는별로 만지지 않았기 때문에이... ReactNetlify자바스크립트CMSgatsby Gatsby에서 SCSS를 Mixin하는 방법 Gatsby.js를 사용하여 SCSS를 Mixin 할 때 설정 한 메모 Scoped Style에 mixin으로 정의한 CSS를 include로 읽고 싶었습니다. src/assets/scss/foundation/_mixin.scss gatsby-config.js 다음은 gatsby-starter-default를 사용하여 프로젝트를 만든 것에 대해 index.js에서 Scoped Style을 사... Sassscssgatsbymixin Gatsby 노트 5 (Contentful-1) Contentful을 사용하여 블로그 목록의 정보를 업데이트합니다. Try for free를 누르십시오 Sign up 왼쪽 I create content 선택 Get started 를 누릅니다 The example project가 생성된다 (여기서는 사용하지 않는다) 왼쪽 상단 메뉴에서 "+Create space"를 누릅니다 커뮤니티 선택 1.Content modal => Add conten... GraphQLgatsby Gatsby 노트 4 (상세 페이지) slag에 묶는 data를 얻는다 블로그 세부 정보 페이지의 콘텐츠보기 (html보기) QUERY VARIABLES에서 변수를 입력하고 시도하십시오 src/templates/blogDetail.js... GraphQLgatsby Gatsby 노트 2(Markdown/GraphQL Playground) 1. Markdown을 이용할 준비 2.GraphQL Playground 도입 3.Markdown을 데이터로 사용 플러그인 설치(3개) ⑴ gatsby-transformer-remark ⑵ gatsby-remark-images ⑶ gatsby-remark-relative-images gatsby.config.js에 추가 (플러그인 3 분) gatsby-source-filesystem의 opt... GraphQLgatsby IntelliJ에서 Gatsby의 GraphQL 스키마를 인식하여 쿼리 완성을 활성화합니다. 이 게시물에서는 IntelliJ IDE 에서 Gatsby의 GraphQL 스키마를 인식하고 JS 코드에서 GraphQL 쿼리를 완성하는 방법을 보여줍니다. IDE에 JS GraphQL 설치 먼저 IDE에 플러그인을 설치합니다. Preferences → Plugins → Marketplace를 열고 GraphQL에서 검색하여 JS GraphQL을 설치합니다. IDE를 다시 시작합니다. Gats... IntelliJGraphQLgatsby Gatsby에 DarkMode를 켜기 이 기사는 의 교차 게시물 기사입니다. 이 기사는 이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다. (본 기사) DarkMode 멋지네요. 대부분의 앱 테마를 DarkMode로 사용하고 있습니다. 여러분은 어떻습니까? 이런 내용이 되고 있습니다. Gatsby Plugin에서 적용 기본 CSS... DarkModescss자바스크립트CSSgatsby Gatsby에 Twitter 멘션 버튼 포함 Twitter 공유 버튼에 대해서는 잘 나오지만, 멘션 버튼의 경우의 방법이 좀처럼 발견되지 않는다. 팔로워 수를 표시하고 싶었을 뿐이므로 우선 팔로우 버튼으로 어떻게 든 비망록. 멘션 버튼↓ 먼저 플러그인 설치 gatsby-config.js gatsby-config.js에 다음과 같이 설명. Twitter 사이트에서 내장 코드 생성 에 간다. Enter your Twitter URL에 트위... 트위터TwitterAPISNSgatsby Gatsbyjs를 GitLab의 CI/CD로 자동으로 렌탈 서버에 배포해 본 설정 저는 초보자입니다. 움직이면서 움직이는 설정이므로주의하십시오. 참고 : 에서 사이트가 시작되었으므로 이것을 GitLab의 CI/CD로 대여 서버로 ftp 전송해 보겠습니다. GitLab의 왼쪽 메뉴에서 Settings > CI/CD > Variables를 선택하고 Key HOST "hogefugaxxx.sakura.ne.jp" USERNAME "yourName" PASSWORD "yourPa... GitLab-CI시렌탈 서버GitLabgatsby GatsbyJS + Netlify에서 예약 게시물 같은 것을하십시오 Netlify 빌드 후크 (Webhook) 발행 IFTTT로 매시간 Build hooks를 두드려 빌드를 달리기 라는 고마운 플러그인으로 frontmatter 의 시각과 현재 시각을 비교해 빌드를 제어할 수 있습니다. npm 또는 yarn으로 패키지를 설치하고 gatsby-config.js 및 gatsby-node.js 에 설정을 추가합니다. gatsby-config.js gatsby-nod... JAMstackNetlifyiftttgatsby Invalid hook call warning에 대처 (중복을 줄이기/gatsby와의 궁합) 몇 번, 뒤틀릴 것 같았는가 ... React Hooks를 사용하기 시작했을 무렵, CRA 등으로 만든 사이트는 어쨌든 Gatsby를 사용했을 때 등 상당한 빈도로 Invalid hook call warning에 휩쓸려 최악의 생각을 한 사람도 적지 않을 것입니다. 이 기사에서는 Invalid hook call warning과 잘 어울리는 "일부 규칙"을 가르칩니다. ※ 원인은, 이쪽을 읽어... ReactYARN버그errorgatsby AWS Amplify에 storybook 자동 배포 Amplify를 사용하여 Gatsyby.js의 호스팅과 백엔드를 구축하고 있습니다. sotrybook을 사용하고 있었기 때문에 쉽게 호스팅할 수 있는 방법을 찾았는데, 여러가지 다른 서비스 있습니다만, BASIC 인증이 유료이기도 하기 때문에 AWS Amplify로 해 보았다. 메인 앱과는 별도로 storybook용 앱을 만듭니다. ※ 저자는 이미 만든 뒤이므로 이렇게 두 개의 앱으로 나누도... amplify빌드gatsbystorybook VSCode에서 gatsby 디버깅 gatsby로 만든 사이트의 디버깅을 VSCode에서 실행할 수 있도록 VSCode를 설정합니다. gatsby 사이트를 만드는 디렉토리에서 VSCOde를 엽니 다. VSCode 확장 기능 아이콘을 클릭합니다. Debugger for Chrome을 입력하여 대상 기능을 설치합니다. ※설치 완료 후에 VSCode의 재기동이 필요할지도 모릅니다. 실행 아이콘 클릭 → 『launch.json 파일을... ChromegatsbyReactVSCode gatsby의 블로그 템플릿에 Material-UI 넣어 멋지게 보이는 -색의 통일- github에있는 gatsby의 블로그 템플릿에 Material-UI를 넣어 멋지게 보이고 싶습니다. 우선은 기본의 색을 결정해 봅시다. node나 gatsby등은 인스톨 해 두어 주세요. Windows10 환경 준비는 아래에서 볼 수 있습니다. 원하는 디렉토리에서 다음 명령을 실행합니다. 다운로드 후 한 번 블로그를 시작합시다. 다음 명령을 실행합니다. 슈퍼 심블! 이를 사용자 정의합니다.... 자바스크립트gatsbyReactmaterial-ui 【Gatsby】 node 최신 버전으로 yarn하면 에러가 나오므로 node의 버전을 바꾸어 yarn 해 보았다 gatsby.js의 테마를 clone하여 사용하려고했을 때 yarn 의 시점에서 에러가 나왔으므로 node의 버젼을 바꾸어 거동을 확인했습니다. v14.9.0 (최판) v12.18.3 (LTS : 장기 지원 버전) v10.22.8 (LTS : 장기 지원 버전) v8.17.0 (LTS : 장기 지원 버전) yarn, gatsby, Mac 버전 gatsby-theme-julia라는 테마를 git... 초보자용초보자Node.jsgatsbynvm 「Vercel + freenom + Getform.io」구성으로 「폭속 + 관리비 완전 무료」의 포트폴리오를 GatsbyJS로 만들면 행복도가 높아진 이야기 드디어 지난달 에서 GatsbyJS의 매력을 전했지만, 오늘은 그 GatsbyJS에서 개발한 포트폴리오 사이트의 구성을 소개합니다 🤗 ↓ 개발한 입니다 기술 구성은 다음과 같습니다 🤝 SPA 사이트의 정적 호스팅 고유 도메인 문의 관리 ※ 2020년 8월 30일 현재 ※ 자세한 것은 이후에 설명 정적 호스팅 서비스 Vercel은 무엇을 무료? 에서 자동 빌드 GitHub(개인 리포지토리 가능... ReactFreenom게 t 포 rm. 이오Vercelgatsby gatsby.js의 블로그에 Google AdSense 광고를 붙이는 방법 head에 코드 삽입 애드센스에 신청하면 head 태그 내에 코드를 붙이도록 지시된다. 그 밖에도 방법은 있는 것 같지만, 잘 되지 않아 최종적으로 플러그인을 선택하고 있는 사람이 많았으므로, 이번은 gatsby-plugin-google-adsense 라는 플러그인을 인스톨 해 head 태그내에 코드를 붙여 받으세요. gatsby-config.js에 다음 코드 추가 gatsby-config.... 자바스크립트gatsbyReactGoogleAdsense Nx를 사용하여 gatsby 프로젝트를 시작하는 이점 Nx를 사용하여 gatsby 프로젝트를 만드는 이점 같은 차이점은 패키지를 관리하는 대신 여러 프로젝트를 관리하고 공통 라이브러리를 만드는 것에 특화되어 있다고 생각합니다. 자신이 느낀 메리트를 기재하는 것보다 프로젝트를 작성하는 것이 메리트를 느낄 수 있다고 생각하기 때문에, 먼저 nx를 이용해 Gatsby의 프로젝트를 작성합니다. nx 때문에 작업 공간 만들기 명령은 nx serve <>... nrwlReactgatsbyTypeScript [Gatsby + firebase] firebase adminApi를 사용하여 firestore의 값을 얻고 GraphiQL에서 확인 gatsby-node에서 firebase adminApi를 사용하여 firestore의 값을 가져옵니다. 아는 사람은 코드만 봐~! 어쩌면 이것이 된 사람은 아래 링크를 보아라 ~ 아래 링크에서 Firebase Admin SDK의 비밀 키 (json)를 가져와주세요! 적당한 이름으로 배치 반드시 할 것! .gitignore에 다음을 추가하십시오. 파일 이름이므로 위에서 설정한 사람에게 맞추십... Firebasegatsby 이전 기사 보기