gatsby WordPress(headlessCMS)+Gatsby의 절충안적인 블로그를 만들려고 하는 이야기 WordPress를 headlessCMS로 사용하고 프런트를 Gatsby로 만드는 구성에 매력을 느꼈기 때문에 만들어 보기로 했습니다. 이 기사에서는 기존의 WordPress 블로그에 있는 기사를 로컬로 Gatsby로 표시하는 곳까지 합니다(더 이상은 공부중이므로 또 추후) 비IT 인재에게 블로그 갱신을 하고 싶은 경우, contentfull, microCMS 등에서는 어려울 것이라고 판단했... SSGJAMstackWordPressgatsby Gatsby 에 Picturefill 어쨌든, IE11은 여전히 지원합니다 그래서 Picturefill이 필요했습니다. Gatsby와 함께 사용하려고 생각하고 구구했지만 스트라이크를 찾을 수 없었습니다 몇가지 발견된 기사를 참고로 여러가지 시험했지만, 뭔가 다르다. useEffect에서 picturefill()하려고하면,import 'picturefill' 작성한 시점에서 window가 없으면 빌드로 넘어갑니다. (개발시는 괜찮... gatsby 【WSL2】Windows10의 Ubuntu GUI를 이용해 Gatsby로 Hello World까지 Gatsby의 hello-world가 Windows 10에서는 할 수 없었기 때문에 Ubuntu를 통해 구축 할 수 있는지 확인해 보겠습니다. 공식 자습서: 이전 기사로 시작하십시오. 이 기사가 끝나면 아직 우분투에는 브라우저가 없으므로 추가로 설치합니다. Firefox 설치 다음 명령을 실행하여 Firefox를 설치합니다. SHELL Node 설치 다음 명령을 실행하여 Node를 설치합니다... WSLgatsby우분투 Gatsby + microCMS + Firestore 오류 및 결함 10을 초과하면 더 이상 얻을 수 없다. 원인 microCMS의 GET API는 디폴트로 10건까지 취득되어 있다. 해결 방법 limit 파라미터를 부여함으로써 취득 건수를 늘릴 수 있다. Gatsby의 경우 gatsby-config.js에서 옵션으로 변경합니다. gatsby develop의 개발 환경에서는 문제 없다. 그러나 gatsby build의 프로덕션 환경에서 페이지를 다시로드하면 ... React오류microCMSFirestoregatsby [Gatsby] SSR 부분에서 window 객체를 참조하면 빌드할 수 없는 문제(귀멸풍) Gatsby는 빌드시 페이지를 생성하지만 페이지에서 window.innerwidth를 참조하면 오류가 발생합니다. node 로 페이지 생성하고 있기 때문에 window 객체가 없는 것은 당연하다. window 의 참조 어째서 빌드 실패하고 있지 않지! ! 아아💢 한 번 상태에 넣을 수 있도록 issue에서 논의되었습니다. state 에 넣을 수고이고, 아마 되는 것이 아니다-라고 느낌입니다.... ssrgatsbyReact microCMS 미리보기 기능을 Gatsby.js에서 사용 Gatsby.js는 말하지 않고 알려진 React제의 정적 사이트 제너레이터입니다만, 빌드시에 페이지를 생성한다고 하는 성질 때문에, microCMS의 프리뷰 기능을 사용하려면 한마디 궁리 필요했기 때문에 공유하고 싶습니다. 이 기능을 아시는 분은 코드 부분에서 봐 주세요. microCMS의 미리보기 기능에 대해 조금 설명하면 기사 작성 화면에서 공개 버튼의 왼쪽에 있는 화면 미리보기를 눌렀... JAMstackReactmicroCMS자바스크립트gatsby React (gatsby.js)에서 highlight.js 사용 구현 highlight.js를 추가합니다. 이번에는 ES6 이상으로 씁니다. 더욱 초보적인 곳을 알고 싶은 분은 이번에는 코드 하이라이트를 사용할 기회가 기사의 페이지에서 밖에 사용하지 않기 때문에, Util적인 것은 구현하지 않고 직접 해당의 React Component에 돌진한다.useEffect 모르는 분은 을 확인하십시오. Article/index.jsx 여기서 hljs.initHig... gatsbyReacthighlight.js Gatsby : 이미지 (이미지)를 표시하는 방법 이것은 도대체…? 기본적으로 톱 페이지에 붙여진 스페이스 맨 이미지 "gatsby-astronaut.png". 이 파일은 images 폴더 안에 있고, 그것을 읽는 톱 페이지 index.js는, 그리고만 있다. 분명히 components 폴더에있는 image.js가 핸들하는 것 같습니다 (기본적으로 존재). 이 코드를 초역하면, gatsby-astronaut.png라는 파일명과 일치하는 것을... ReactHTMLBootstrap이미지gatsby Gatsby : CSS 쓰기 및 파일 분할 사양 직접 만든 CSS를 만드는 방법은 다음과 같습니다. React 특유의 쓰기 방법. 파일 분할하고 싶습니다. JS 파일이 점점 길어지기 때문에 파일 분할하고 싶다. global.css 프로젝트 전체에 적용되는 CSS는 다음과 같은 방식으로 (bootstrap을 사용하는 경우에는 필요하지 않은 작업일지도) 우선 src/styles 폴더를 작성. styles 폴더 아래에 global.css를 만듭... 가져오기Reactglobal.cssCSSgatsby gatsby.js에서 API를 사용하지 않고 인스타그램 사진을 표시하는 방법 gatsby의 블로그 등에서 자신의 인스타의 사진을 표시하고 싶어서, Instagram Graph API는 너무 조금 너무 결국 포기해 버리는 경우가 많다고 생각합니다. 이 기사에서는 gatsby-source-instagram이라는 플러그인을 사용하여 표시하려는 프로필을 사용자 이름으로 지정하고 사진을 표시하는 간단한 방법을 소개합니다. 인스타그램 사진을 도입하는 단계에서 시작하는 gatsb... gatsby GatsbyJS + Netlify에서 환경 변수를 사용하는 데 어려움 내 포트폴리오 사이트를 에서 만들고 에서 호스팅하고 있습니다. 제목대로 환경 변수로 헤매는 이야기와 그 해결책을 씁니다. Gatsby로 만든 사이트를 Netlify 등에서 호스팅한다면 환경 변수의 이름은 모두 GATSBY_부터 시작하는 것이 편하다. 잃어버린 이야기 전에 Gatsby와 Netlify 각각의 환경 변수를 설정하는 방법에 대해 씁니다. Gatsby의 환경 변수 Gatsby는 기본... gatsbyNetlifyenvironment_variablesReact [슈퍼 간단] Gatsby.js에서 멋진 멋진 포트폴리오를 만드는 방법 이번에는 Gatsby.js를 사용하여 멋지고 멋진 포트폴리오를 만드는 방법을 공유하고 싶습니다. 가 완성형의 예입니다. Gatsby는 React를 기반으로 한 무료 오픈 소스 프레임 워크이며 개발자가 매우 빠른 웹 사이트 및 앱을 구축하는 데 도움이됩니다. 먼저 Gatsby에서 개발하는 데 필요한 다음 도구를 정렬합시다. Git Node.js (npm을 사용할 수 있다면 들어있을 것) Gat... gatsbyReactGatsby.js [제0장: 환경 구축편] Gatsby 공식 문서를 번역해 보았다. (이 장에서는 Gatsby.js를 사용하여 개발할 수있는 환경을 구축하고 Hello world!와 화면에 표시하는 것이 목표입니다) Gatsby를 사용하여 사이트를 개발하기 전에 먼저 다음과 같은 웹 개발의 주요 기술에 익숙한지 확인하십시오. CLI(터미널) Node.js는 브라우저 외부에서 JavaScirpt 코드를 실행할 수 있도록 하기 위한 것입니다. Gatsby도 Node.js를 사용... gatsbyReactGatsby.js GatsbyJS에서 Syntax Highlight 및 코드 제목 추가 Gatsby에서 만든 블로그의 Syntax Highlight를 Prism으로 변경한다. 코드 제목을 추가합니다. gatsby-remark-prismjs-title에 대해서는 이미 설치되었습니다. gatsby-transformer-remark gatsby-remark-prismjs prismjs Download CSS를 선택하면 prism.css가 다운로드됩니다. 다운로드 한 prism.css... prismjsgatsby 이제부터 시작하는 Gatsby 설치에서 정적 사이트 빌드까지 Gatsby는 다음 Wordpress라고도 불리는 React 기반 오픈 소스 프레임 워크. 초고속 웹사이트나 블로그, 앱을 쉽게 만들 수 있으며, 지금 가장 주목받고 있는 CMS 툴이기도 합니다. 여기에서는 Gatsby를 앞으로 시작하는 사람을 위해, 설치~정적 사이트의 빌드까지를 바꾸어 해설해 갑니다. 우선 환경의 체크. node는 11.10 이후로 할 필요가 있다. brew 사용하고 있었... 자바스크립트gatsbyReactNode.js Surge에 배포하려고하면 "Aborted - you do not have permission to publish to some-name.surge.sh"로 실패합니다. Gatsby 튜토리얼 " "에서 작업 명령 gatsby build으로 정적 파일 생성 명령 surge public/으로 생성 된 파일을 배포하려고하면 다음 메시지가 출력되고 실패합니다 자습서의 지침에 따라 npm으로 패키지 surge 배포 명령 surge login에서 회원 등록도 완료 회원등록한 메일 주소의 확인이 끝나지 않았어요… 커멘드 surge login 로부터 회원 등록하면, 지정한... 서지gatsby Gatsby와 Netlify로 기술 블로그 만들기 React 기반 정적 사이트 생성기 장점이나 구조 등에 대해서는 React 기반 정적 사이트 생성기 Gatsby의 진정한 힘을 보여줍니다. 에 기재되어 있습니다. 기술 블로그를 시작하려고 생각할 때 React 기반의 주위와 새로운 기술을 사용했기 때문에 사용했습니다. 정적 사이트를 초고속으로 제공할 수 있는 웹 서비스 위의 Gatsby와 결합하여 GitHub에 PUSH한 프런트 엔드 자재를 ... Netlifygatsby Figma와 코드 테마를 통일 디자이너가 상정하는 디자인과 100% 동일 구현하는 것은 의외로 어렵다 Figma에 제공되는 LocalStyles. 여기서 설정해도 다시 코드에 반영시키는 작업이 필요. 라고 할까, 번거롭기 때문에 어느 정도 규모가 작으면 손을 빼기 쉽다,,, 코딩으로 문자 크기와 색상 차이가 발생하는 것을 억제하고 싶습니다. ↓figma로 값을 일괄로 설정할 수 있는 Local Styles 이번에는 fig... figmagatsby Gatsby에서 만든 템플릿에 요소를 더해보세요. 안녕하세요. Gatsby 템플릿에서 이 웹사이트를 시작하고 2주 정도가 지나려고 합니다만, 나는 있는 것을 깨달았습니다. 그것은... 코드 거의 만지지 않는 야케! 맞습니다. 템플릿은 입니다만, 지금까지 변경을 한 것은 샘플 기사 삭제 About Me 업데이트 Twitter 및 Github 계정의 방향 변경 README 업데이트 프로그래머 같은 것 아무것도하지 않는다! 그래서 이번에는 모처럼... gatsbyReact Gatsby.js에서 Sitemap 만들기 Gatsby.js에서 Sitemap을 만들고 Search Console에 등록하는 방법을 요약합니다. Gatsby.js는 플러그인이 풍부하기 때문에 그곳을 사용합니다. gatsby-plugin-sitemap이라는 공식 추천? 플러그인이 있습니다. npm 또는 yarn으로 설치합니다. Gatsby는 기본적으로 플러그인을 추가 할 때 gatsby-config.js에 설명합니다. 빌드시에 자동으로... gatsby GatsbyJS에서 gatsby-remark-audio 플러그인 사용 Gatsby.js에서 markdown 파일에 오디오 파일을 넣을 수있는 플러그인 마크다운 안에 `audio: <URL>` 라고 쓰면 HTML의 <audio> 태그로 변환해준다 공식은 여기 : 이런 느낌이 될거야 npm 또는 yarn으로 설치 gatsby-config.js 따기 오디오 파일을 /static 디렉토리 아래에 넣기 마크다운 안에 audio: /bar.wav npm 또는 yarn을 ... GatsbyJSgatsbyMarkdown gatsby 빌드시 일어나는 material-ui의 스타일 붕괴를 고치십시오. gatsby에서 개발한 웹 앱을 출시하면 material-ui로 구성한 컴포넌트의 스타일이 무너졌습니다. 아무래도 플러그인을 넣지 않으면 material-ui의 스타일이 무너져 버리는 것 같습니다. 수정 방법을 알았으므로 공유하려고합니다. 1, gatsby-plugin-material-ui 설치 npm install gatsby-plugin-material-ui @material-ui/sty... CSSgatsbymaterial-uiGatsby.js gatsby의 gatsby-plugin-manifest 플러그인을 사용하여 webmanifest 자동 생성 기본은 여기에 쓰여져 있지만, 세세한 궁리점을 몇 가지 등을 사용하여 head 방법 그 1 원본이되는 이미지를 정사각형, 투명하지 않고 만듭니다. gatsby-config.js 방법 그 2 gatsby 프로젝트의 루트 폴더에 static 폴더를 만들고 배경색이있는 아이콘 파일을 배치합니다 (파일 이름, 크기는 각자 설정). 그 후 다음과 같이 layout 등으로 <head> 에 들어가도록 설... webmanifestPWAgatsby gatsby v2에서 material-ui v3에서 gatsby build (production)하면 develop에서 깨끗하게 표시 된 CSS가 무너집니다. gatsby develop 에서 문제 없었던 표시가 gatsby build gatsby serve 를 거쳐 실제로 표시하면 css가 총 무너진다. 통상 [24x24] 사이즈로 표시되는 아이콘이, 부모 요소 폭 가득한 사이즈가 된다. CSS가 무너지지 않는 패턴 루트에서 하위 디렉터리를 볼 때 문제 없음 css가 무너지는 패턴(현재 발견하고 있는 패턴) 직접 하위 디렉토리를 표시하면 CSS가 ... gatsbyReactmaterial-uijss JS의 문법조차 수상한 프런트 초보자가 blog용의 gatsby starter(같은 것)를 자작·공개해 보았다 최근 핫하지만 일본에서의 지명도가 약간 낮은 프로젝트에 gatsby가 있습니다. 이번에는 그런 gatsby의 starter(wordpress의 테마같은 것)를 자작해 갑니다. 디자인에 전념할 수 있는 환경을 만들어 갑시다. 나 자신의 디자이너로서의 능력이 낮아 현시점에서 좋은 디자인을 만드는 것은 어렵지만, 누구나 커스터마이즈 할 수 있는 상태로 공개하는 곳까지 꽂습니다. 디자인에 집중할 수... 디자인자바스크립트gatsbyReact Gatsby · VSCode 프로젝트에 eslint하려면이 단지 볼 수 있어야합니다 소개 참조; 에서 내용 확인 이 설정하면 파일을 저장할 때 Lint 설정을 바탕으로 소스를 좋은 느낌으로 해준다. 정신 위생상 좋다. 내 설정 이상... gatsbyVSCodeESLint Redundant alt attribute. Screen-readers already announce `img` tags as an image. Gatsby.js에서 홈페이지를 만들려고했을 때. 뭔가 경고를 냈다. 에는 이 종속 패키지로 포함되어 있습니다. 이것이 경고를 내주고 있다. '스크린 리더는 'img' 태그를 이미지로 인식합니다. 의 alt 속성에 「image」, 「photo」 또는 「picture」라는 단어를 사용할 필요는 없습니다」라고 한다. 이미지 설명. 접근성으로 준비하는 것 외에도 이미지를 얻을 수 없을 때 대신 표... HTMLgatsby SPA(Gatsby)를 사용하여 Google Optimize에서 A/B 테스트를 수행하는 방법 SPA는 네이티브 앱과 손색없는 체험 설계를 할 수 있습니다만, 비동기 통신의 특성상 으로 A/B 테스트를 하기 위해서는, 특별한 방법이 필요합니다. 하는 방법마저 알면 간단합니다만, 일본어로 정리된 문서가 없었기 때문에, 스스로 만들기로 했습니다. GTM (Google 태그 관리자)을 사용하여 Optimize를 배포하는 방법은 직접 코드를 포함합니다. 과 을 gatsby-ssr.js에 설명... optimizegatsbyReact
WordPress(headlessCMS)+Gatsby의 절충안적인 블로그를 만들려고 하는 이야기 WordPress를 headlessCMS로 사용하고 프런트를 Gatsby로 만드는 구성에 매력을 느꼈기 때문에 만들어 보기로 했습니다. 이 기사에서는 기존의 WordPress 블로그에 있는 기사를 로컬로 Gatsby로 표시하는 곳까지 합니다(더 이상은 공부중이므로 또 추후) 비IT 인재에게 블로그 갱신을 하고 싶은 경우, contentfull, microCMS 등에서는 어려울 것이라고 판단했... SSGJAMstackWordPressgatsby Gatsby 에 Picturefill 어쨌든, IE11은 여전히 지원합니다 그래서 Picturefill이 필요했습니다. Gatsby와 함께 사용하려고 생각하고 구구했지만 스트라이크를 찾을 수 없었습니다 몇가지 발견된 기사를 참고로 여러가지 시험했지만, 뭔가 다르다. useEffect에서 picturefill()하려고하면,import 'picturefill' 작성한 시점에서 window가 없으면 빌드로 넘어갑니다. (개발시는 괜찮... gatsby 【WSL2】Windows10의 Ubuntu GUI를 이용해 Gatsby로 Hello World까지 Gatsby의 hello-world가 Windows 10에서는 할 수 없었기 때문에 Ubuntu를 통해 구축 할 수 있는지 확인해 보겠습니다. 공식 자습서: 이전 기사로 시작하십시오. 이 기사가 끝나면 아직 우분투에는 브라우저가 없으므로 추가로 설치합니다. Firefox 설치 다음 명령을 실행하여 Firefox를 설치합니다. SHELL Node 설치 다음 명령을 실행하여 Node를 설치합니다... WSLgatsby우분투 Gatsby + microCMS + Firestore 오류 및 결함 10을 초과하면 더 이상 얻을 수 없다. 원인 microCMS의 GET API는 디폴트로 10건까지 취득되어 있다. 해결 방법 limit 파라미터를 부여함으로써 취득 건수를 늘릴 수 있다. Gatsby의 경우 gatsby-config.js에서 옵션으로 변경합니다. gatsby develop의 개발 환경에서는 문제 없다. 그러나 gatsby build의 프로덕션 환경에서 페이지를 다시로드하면 ... React오류microCMSFirestoregatsby [Gatsby] SSR 부분에서 window 객체를 참조하면 빌드할 수 없는 문제(귀멸풍) Gatsby는 빌드시 페이지를 생성하지만 페이지에서 window.innerwidth를 참조하면 오류가 발생합니다. node 로 페이지 생성하고 있기 때문에 window 객체가 없는 것은 당연하다. window 의 참조 어째서 빌드 실패하고 있지 않지! ! 아아💢 한 번 상태에 넣을 수 있도록 issue에서 논의되었습니다. state 에 넣을 수고이고, 아마 되는 것이 아니다-라고 느낌입니다.... ssrgatsbyReact microCMS 미리보기 기능을 Gatsby.js에서 사용 Gatsby.js는 말하지 않고 알려진 React제의 정적 사이트 제너레이터입니다만, 빌드시에 페이지를 생성한다고 하는 성질 때문에, microCMS의 프리뷰 기능을 사용하려면 한마디 궁리 필요했기 때문에 공유하고 싶습니다. 이 기능을 아시는 분은 코드 부분에서 봐 주세요. microCMS의 미리보기 기능에 대해 조금 설명하면 기사 작성 화면에서 공개 버튼의 왼쪽에 있는 화면 미리보기를 눌렀... JAMstackReactmicroCMS자바스크립트gatsby React (gatsby.js)에서 highlight.js 사용 구현 highlight.js를 추가합니다. 이번에는 ES6 이상으로 씁니다. 더욱 초보적인 곳을 알고 싶은 분은 이번에는 코드 하이라이트를 사용할 기회가 기사의 페이지에서 밖에 사용하지 않기 때문에, Util적인 것은 구현하지 않고 직접 해당의 React Component에 돌진한다.useEffect 모르는 분은 을 확인하십시오. Article/index.jsx 여기서 hljs.initHig... gatsbyReacthighlight.js Gatsby : 이미지 (이미지)를 표시하는 방법 이것은 도대체…? 기본적으로 톱 페이지에 붙여진 스페이스 맨 이미지 "gatsby-astronaut.png". 이 파일은 images 폴더 안에 있고, 그것을 읽는 톱 페이지 index.js는, 그리고만 있다. 분명히 components 폴더에있는 image.js가 핸들하는 것 같습니다 (기본적으로 존재). 이 코드를 초역하면, gatsby-astronaut.png라는 파일명과 일치하는 것을... ReactHTMLBootstrap이미지gatsby Gatsby : CSS 쓰기 및 파일 분할 사양 직접 만든 CSS를 만드는 방법은 다음과 같습니다. React 특유의 쓰기 방법. 파일 분할하고 싶습니다. JS 파일이 점점 길어지기 때문에 파일 분할하고 싶다. global.css 프로젝트 전체에 적용되는 CSS는 다음과 같은 방식으로 (bootstrap을 사용하는 경우에는 필요하지 않은 작업일지도) 우선 src/styles 폴더를 작성. styles 폴더 아래에 global.css를 만듭... 가져오기Reactglobal.cssCSSgatsby gatsby.js에서 API를 사용하지 않고 인스타그램 사진을 표시하는 방법 gatsby의 블로그 등에서 자신의 인스타의 사진을 표시하고 싶어서, Instagram Graph API는 너무 조금 너무 결국 포기해 버리는 경우가 많다고 생각합니다. 이 기사에서는 gatsby-source-instagram이라는 플러그인을 사용하여 표시하려는 프로필을 사용자 이름으로 지정하고 사진을 표시하는 간단한 방법을 소개합니다. 인스타그램 사진을 도입하는 단계에서 시작하는 gatsb... gatsby GatsbyJS + Netlify에서 환경 변수를 사용하는 데 어려움 내 포트폴리오 사이트를 에서 만들고 에서 호스팅하고 있습니다. 제목대로 환경 변수로 헤매는 이야기와 그 해결책을 씁니다. Gatsby로 만든 사이트를 Netlify 등에서 호스팅한다면 환경 변수의 이름은 모두 GATSBY_부터 시작하는 것이 편하다. 잃어버린 이야기 전에 Gatsby와 Netlify 각각의 환경 변수를 설정하는 방법에 대해 씁니다. Gatsby의 환경 변수 Gatsby는 기본... gatsbyNetlifyenvironment_variablesReact [슈퍼 간단] Gatsby.js에서 멋진 멋진 포트폴리오를 만드는 방법 이번에는 Gatsby.js를 사용하여 멋지고 멋진 포트폴리오를 만드는 방법을 공유하고 싶습니다. 가 완성형의 예입니다. Gatsby는 React를 기반으로 한 무료 오픈 소스 프레임 워크이며 개발자가 매우 빠른 웹 사이트 및 앱을 구축하는 데 도움이됩니다. 먼저 Gatsby에서 개발하는 데 필요한 다음 도구를 정렬합시다. Git Node.js (npm을 사용할 수 있다면 들어있을 것) Gat... gatsbyReactGatsby.js [제0장: 환경 구축편] Gatsby 공식 문서를 번역해 보았다. (이 장에서는 Gatsby.js를 사용하여 개발할 수있는 환경을 구축하고 Hello world!와 화면에 표시하는 것이 목표입니다) Gatsby를 사용하여 사이트를 개발하기 전에 먼저 다음과 같은 웹 개발의 주요 기술에 익숙한지 확인하십시오. CLI(터미널) Node.js는 브라우저 외부에서 JavaScirpt 코드를 실행할 수 있도록 하기 위한 것입니다. Gatsby도 Node.js를 사용... gatsbyReactGatsby.js GatsbyJS에서 Syntax Highlight 및 코드 제목 추가 Gatsby에서 만든 블로그의 Syntax Highlight를 Prism으로 변경한다. 코드 제목을 추가합니다. gatsby-remark-prismjs-title에 대해서는 이미 설치되었습니다. gatsby-transformer-remark gatsby-remark-prismjs prismjs Download CSS를 선택하면 prism.css가 다운로드됩니다. 다운로드 한 prism.css... prismjsgatsby 이제부터 시작하는 Gatsby 설치에서 정적 사이트 빌드까지 Gatsby는 다음 Wordpress라고도 불리는 React 기반 오픈 소스 프레임 워크. 초고속 웹사이트나 블로그, 앱을 쉽게 만들 수 있으며, 지금 가장 주목받고 있는 CMS 툴이기도 합니다. 여기에서는 Gatsby를 앞으로 시작하는 사람을 위해, 설치~정적 사이트의 빌드까지를 바꾸어 해설해 갑니다. 우선 환경의 체크. node는 11.10 이후로 할 필요가 있다. brew 사용하고 있었... 자바스크립트gatsbyReactNode.js Surge에 배포하려고하면 "Aborted - you do not have permission to publish to some-name.surge.sh"로 실패합니다. Gatsby 튜토리얼 " "에서 작업 명령 gatsby build으로 정적 파일 생성 명령 surge public/으로 생성 된 파일을 배포하려고하면 다음 메시지가 출력되고 실패합니다 자습서의 지침에 따라 npm으로 패키지 surge 배포 명령 surge login에서 회원 등록도 완료 회원등록한 메일 주소의 확인이 끝나지 않았어요… 커멘드 surge login 로부터 회원 등록하면, 지정한... 서지gatsby Gatsby와 Netlify로 기술 블로그 만들기 React 기반 정적 사이트 생성기 장점이나 구조 등에 대해서는 React 기반 정적 사이트 생성기 Gatsby의 진정한 힘을 보여줍니다. 에 기재되어 있습니다. 기술 블로그를 시작하려고 생각할 때 React 기반의 주위와 새로운 기술을 사용했기 때문에 사용했습니다. 정적 사이트를 초고속으로 제공할 수 있는 웹 서비스 위의 Gatsby와 결합하여 GitHub에 PUSH한 프런트 엔드 자재를 ... Netlifygatsby Figma와 코드 테마를 통일 디자이너가 상정하는 디자인과 100% 동일 구현하는 것은 의외로 어렵다 Figma에 제공되는 LocalStyles. 여기서 설정해도 다시 코드에 반영시키는 작업이 필요. 라고 할까, 번거롭기 때문에 어느 정도 규모가 작으면 손을 빼기 쉽다,,, 코딩으로 문자 크기와 색상 차이가 발생하는 것을 억제하고 싶습니다. ↓figma로 값을 일괄로 설정할 수 있는 Local Styles 이번에는 fig... figmagatsby Gatsby에서 만든 템플릿에 요소를 더해보세요. 안녕하세요. Gatsby 템플릿에서 이 웹사이트를 시작하고 2주 정도가 지나려고 합니다만, 나는 있는 것을 깨달았습니다. 그것은... 코드 거의 만지지 않는 야케! 맞습니다. 템플릿은 입니다만, 지금까지 변경을 한 것은 샘플 기사 삭제 About Me 업데이트 Twitter 및 Github 계정의 방향 변경 README 업데이트 프로그래머 같은 것 아무것도하지 않는다! 그래서 이번에는 모처럼... gatsbyReact Gatsby.js에서 Sitemap 만들기 Gatsby.js에서 Sitemap을 만들고 Search Console에 등록하는 방법을 요약합니다. Gatsby.js는 플러그인이 풍부하기 때문에 그곳을 사용합니다. gatsby-plugin-sitemap이라는 공식 추천? 플러그인이 있습니다. npm 또는 yarn으로 설치합니다. Gatsby는 기본적으로 플러그인을 추가 할 때 gatsby-config.js에 설명합니다. 빌드시에 자동으로... gatsby GatsbyJS에서 gatsby-remark-audio 플러그인 사용 Gatsby.js에서 markdown 파일에 오디오 파일을 넣을 수있는 플러그인 마크다운 안에 `audio: <URL>` 라고 쓰면 HTML의 <audio> 태그로 변환해준다 공식은 여기 : 이런 느낌이 될거야 npm 또는 yarn으로 설치 gatsby-config.js 따기 오디오 파일을 /static 디렉토리 아래에 넣기 마크다운 안에 audio: /bar.wav npm 또는 yarn을 ... GatsbyJSgatsbyMarkdown gatsby 빌드시 일어나는 material-ui의 스타일 붕괴를 고치십시오. gatsby에서 개발한 웹 앱을 출시하면 material-ui로 구성한 컴포넌트의 스타일이 무너졌습니다. 아무래도 플러그인을 넣지 않으면 material-ui의 스타일이 무너져 버리는 것 같습니다. 수정 방법을 알았으므로 공유하려고합니다. 1, gatsby-plugin-material-ui 설치 npm install gatsby-plugin-material-ui @material-ui/sty... CSSgatsbymaterial-uiGatsby.js gatsby의 gatsby-plugin-manifest 플러그인을 사용하여 webmanifest 자동 생성 기본은 여기에 쓰여져 있지만, 세세한 궁리점을 몇 가지 등을 사용하여 head 방법 그 1 원본이되는 이미지를 정사각형, 투명하지 않고 만듭니다. gatsby-config.js 방법 그 2 gatsby 프로젝트의 루트 폴더에 static 폴더를 만들고 배경색이있는 아이콘 파일을 배치합니다 (파일 이름, 크기는 각자 설정). 그 후 다음과 같이 layout 등으로 <head> 에 들어가도록 설... webmanifestPWAgatsby gatsby v2에서 material-ui v3에서 gatsby build (production)하면 develop에서 깨끗하게 표시 된 CSS가 무너집니다. gatsby develop 에서 문제 없었던 표시가 gatsby build gatsby serve 를 거쳐 실제로 표시하면 css가 총 무너진다. 통상 [24x24] 사이즈로 표시되는 아이콘이, 부모 요소 폭 가득한 사이즈가 된다. CSS가 무너지지 않는 패턴 루트에서 하위 디렉터리를 볼 때 문제 없음 css가 무너지는 패턴(현재 발견하고 있는 패턴) 직접 하위 디렉토리를 표시하면 CSS가 ... gatsbyReactmaterial-uijss JS의 문법조차 수상한 프런트 초보자가 blog용의 gatsby starter(같은 것)를 자작·공개해 보았다 최근 핫하지만 일본에서의 지명도가 약간 낮은 프로젝트에 gatsby가 있습니다. 이번에는 그런 gatsby의 starter(wordpress의 테마같은 것)를 자작해 갑니다. 디자인에 전념할 수 있는 환경을 만들어 갑시다. 나 자신의 디자이너로서의 능력이 낮아 현시점에서 좋은 디자인을 만드는 것은 어렵지만, 누구나 커스터마이즈 할 수 있는 상태로 공개하는 곳까지 꽂습니다. 디자인에 집중할 수... 디자인자바스크립트gatsbyReact Gatsby · VSCode 프로젝트에 eslint하려면이 단지 볼 수 있어야합니다 소개 참조; 에서 내용 확인 이 설정하면 파일을 저장할 때 Lint 설정을 바탕으로 소스를 좋은 느낌으로 해준다. 정신 위생상 좋다. 내 설정 이상... gatsbyVSCodeESLint Redundant alt attribute. Screen-readers already announce `img` tags as an image. Gatsby.js에서 홈페이지를 만들려고했을 때. 뭔가 경고를 냈다. 에는 이 종속 패키지로 포함되어 있습니다. 이것이 경고를 내주고 있다. '스크린 리더는 'img' 태그를 이미지로 인식합니다. 의 alt 속성에 「image」, 「photo」 또는 「picture」라는 단어를 사용할 필요는 없습니다」라고 한다. 이미지 설명. 접근성으로 준비하는 것 외에도 이미지를 얻을 수 없을 때 대신 표... HTMLgatsby SPA(Gatsby)를 사용하여 Google Optimize에서 A/B 테스트를 수행하는 방법 SPA는 네이티브 앱과 손색없는 체험 설계를 할 수 있습니다만, 비동기 통신의 특성상 으로 A/B 테스트를 하기 위해서는, 특별한 방법이 필요합니다. 하는 방법마저 알면 간단합니다만, 일본어로 정리된 문서가 없었기 때문에, 스스로 만들기로 했습니다. GTM (Google 태그 관리자)을 사용하여 Optimize를 배포하는 방법은 직접 코드를 포함합니다. 과 을 gatsby-ssr.js에 설명... optimizegatsbyReact