Netlify Netlify Functions를 사용하여 Qiita 트렌드 API를 비공식으로 만들었습니다. 2022.02.12추가: 여러 가지 사정 있음 Netlify Functions에서 Vercel Serverless Functions로 마이그레이션되었습니다. 앞으로는 h ttps://qiita-api.netlify.app가 아닌 을 방문하십시오 (만약을 위해 이전 링크에서 리디렉션을 날리려고하지만 ...). Zenn 버전은 Qiita 의 API 에는 트렌드 기사 일람을 취득하는 API 가 없... QiitaAPINetlifyNetlifyFunctions Nuxt.js에서 API CORS 대책을하면 Netlify에서 404 오류가 발생합니다. Nuxt.js에서 CORS 오류가 발생하여 axios의 proxiy 설정을 수행했습니다. Netlify에 배포하는 동안 404 오류가 발생했습니다. Netlify 리디렉션 옵션을 설정하여 해결 .envnuxt.config.js 로컬 환경에서의 동작 검증 성공적으로 API 통신이 가능한 패턴 움직이지 않는다 API 응답은 200이 반환되었지만 404 페이지의 DOM이 반환되는 패턴 static... CORSNetlifyVue.jsnuxt.jsaxios 【Hugo】Netlify CMS를 사용해 블로그를 만들어 보았다【초보자용】 Qiita 첫 투고의 하루 토끼라고 합니다. 조상이 있으면 지적해 주시면 다행입니다. 이번은, 라고 하는 것으로, 일단 간단하게 사이트만으로도 만들려고 생각했습니다. 하지만, 조사해 보면 에 관한 일본어 기사가 적거나, 혹은 낡았다고 느꼈습니다. 라고 의지한 대로입니다. 그래서 한 개씩 봐 갑니다! Netlify는 최근에 잘 듣는군요. 뭐 간단하게 말하면, 서버를 빌릴 수 있습니다. 편리! ... CMSNetlify블로그Hugo Gatby.js＋Netlify로 LightHouse 만점의 사이트를 하루에 만든 이야기 Qiita 이외에 잡기 블로그적인 것을 해본 기분이 된다 친구 엔지니어에게 추천된 Gatsby.js에서 블로그를 개설해 보았습니다. 이번에는 Gatby.js+Netlify로 가기로 했습니다. 일부 Gatsby의 스타터를 복제하고 시도했지만 이 스타터가 제일 그대로 블로그로서 사용할 수 있을 것 같았습니다. Gatsby는 정적 사이트 생성기이므로 빠릅니다 React는별로 만지지 않았기 때문에이... ReactNetlify자바스크립트CMSgatsby Nuxt.js에서 Github 키워드 순위 검색 서비스 개발한 이야기 ※전 재료 굉장히 편리했기 때문에, 시각적으로 볼 수 있는 WEB 서비스를 작성했습니다! 소스 코드는 이쪽 hogehoge.io 검색하려는 키워드를 여러 개 입력하고 검색하면 결과 테이블과 원형 차트, 그리고 각 키워드의 검색에 걸린 파일의 리스트가 나오게 되어 있습니다. chartjs로 표시하는 원형 차트의 애니메이션이 굉장히 멋지고 좋아합니다. 개발 환경의 구축에 이용하고 있습니다. 항상... chart.jsVue.jsNetlifynuxt.js도커 이름닷컴으로 취득한 도메인을 Netlify로 사용 이름 닷컴으로 취득한 도메인을 Netlify로 공개했을 때의 메모입니다. 도메인은 .jp이며 이미 취득한 것으로 설명합니다. 먼저 Overview에서 Domain settings로 이동합니다. Add custom domain을 클릭 이름 닷컴에서 취득한 도메인을 입력 Verify. 그러면 "입력한 도메인은 Netlify에서는 등록할 수 없지만 그 도메인을 소유하고 있다면 추가할 수 있다"라는... 이름.comNetlifydns GatsbyJS + Netlify에서 예약 게시물 같은 것을하십시오 Netlify 빌드 후크 (Webhook) 발행 IFTTT로 매시간 Build hooks를 두드려 빌드를 달리기 라는 고마운 플러그인으로 frontmatter 의 시각과 현재 시각을 비교해 빌드를 제어할 수 있습니다. npm 또는 yarn으로 패키지를 설치하고 gatsby-config.js 및 gatsby-node.js 에 설정을 추가합니다. gatsby-config.js gatsby-nod... JAMstackNetlifyiftttgatsby Nuxt.js+Vuetify+Contentful으로 블로그를 만들어 보았다. 블로그 사이트를 만들어 보았습니다. Nuxt.js에서 프로젝트를 만듭니다. UI 구성 요소는 Vuetify와 아주 조금 Vuesax를 사용했습니다. (병용할 수 있는지의 실험을 겸해. 결과 할 수 있었습니다.) 기사는 Contentful에 마크 다운 설명으로 작성. API로 가져와 HTML 변환하여 표시하고 있습니다. 배포 대상은 Netlify입니다. 완제품 PC 톱 화면 PC 기사 화면 스... VuetifyNetlifyVue.jsnuxt.jscontentful Ionic4(stencil)로 폭속으로 Lighthouse 100점의 사이트를 시작한다 아무래도 입니다. Ionic을 자주 사용합니다. 이번, 폭속으로 Lighthouse의 퍼포먼스 100점의 사이트를 시작하는 방법을 알았으므로 써 둡니다. 다음 명령을 두드리자. 몇 초 안에 프로젝트가 생성됩니다. 스타터는 "ionic-pwa"를 선택합시다. 프로젝트 이름은 임의. Confirm은 "y"를 선택합시다. 만든 프로젝트를 GitHub로 푸시하세요. 프로젝트를 Netlify에 배포합... StencilNetlifyWebComponentsionic [Netlify Forms와 연계] AWS Lambda에 Gmail 자동 회신 스크립트(Node.js)를 배포하여 API화. Gatsby.js를 사용하여 Netlify에 배포하는 프로젝트를 진행하고 있었는데, 문의 양식의 작성에 번거로웠기 때문에 비망록. 대상 독자는 · node.js의 사용 경험은 적당히 있다. 이것은 필수입니다. · lambda의 존재와 버릇의 힘을 어느 정도 파악하고 있다. 혹은, 어떤 버릇이라도 걸려 오라는 정신이 있는 사람. ・api gateway와 lambda의 제휴를 실시한 적이 있다.... 람다NetlifyAPIGatewayNode.jsgmail Netlify에서 처음으로 OGP on SPA Cocoda!의 일부가 로그인하지 않고 볼 수 있는 사양이 되어, OGP를 표시시키고 싶어졌습니다. 처음 OGP 대응 이었기 때문에 기억으로 남겨 둡니다. Twitter에서 공유할 때 OGP가 페이지별로 동적으로 바뀌어 표시되도록 하고 싶다! OGP를 설정하지 않으면 공유하면 아래와 같은 간단한 인상이됩니다. 그냥 공유했을 때 잘 말하지 않았던 것 같아서 사용하겠습니다. 공유하거나 공유하고 ... ReactSPAOGPNetlify자바스크립트 【Nuxt.js편】Nuxt.js+Contentful+Netlify로 SPA 블로그를 자작한다 Nuxt.js와 Contentful과 Netlify로 현대적인 (?) SPA 블로그를 만들었습니다. 여러 번에 걸쳐 구축의 기록을 남기고 있는 시리즈의 제2회입니다. 이번에는 SPA 사이트를 쉽게 만들 수 있는 프레임워크인 Nuxt.js에 대해 써 갑니다. 【시리즈의 예정】 - Nuxt.js편 ← 이 기사 의 기본을 알고 있다고 가정합니다. 아직 한 적이 없는 분은 을 해 봅시다. 먼저 에 ... SPANetlifyVue.jsnuxt.jscontentful GatsbyJS + Netlify에서 환경 변수를 사용하는 데 어려움 내 포트폴리오 사이트를 에서 만들고 에서 호스팅하고 있습니다. 제목대로 환경 변수로 헤매는 이야기와 그 해결책을 씁니다. Gatsby로 만든 사이트를 Netlify 등에서 호스팅한다면 환경 변수의 이름은 모두 GATSBY_부터 시작하는 것이 편하다. 잃어버린 이야기 전에 Gatsby와 Netlify 각각의 환경 변수를 설정하는 방법에 대해 씁니다. Gatsby의 환경 변수 Gatsby는 기본... gatsbyNetlifyenvironment_variablesReact Gatsby와 Netlify로 기술 블로그 만들기 React 기반 정적 사이트 생성기 장점이나 구조 등에 대해서는 React 기반 정적 사이트 생성기 Gatsby의 진정한 힘을 보여줍니다. 에 기재되어 있습니다. 기술 블로그를 시작하려고 생각할 때 React 기반의 주위와 새로운 기술을 사용했기 때문에 사용했습니다. 정적 사이트를 초고속으로 제공할 수 있는 웹 서비스 위의 Gatsby와 결합하여 GitHub에 PUSH한 프런트 엔드 자재를 ... Netlifygatsby [Nuxt/WebSpeechAPI] 시끄러운 선술집에서도 원탭으로 점원을 부르는 서비스 「엄지손가락으로 죄송합니다」 시끄러운 선술집에서도 원탭으로 「죄송합니다」라고 점원을 불러 주는 서비스입니다. 샤이걸이므로 목소리는 작습니다. PWA이므로 Safari에서 스마트 폰 홈 화면에 추가하여 사용하십시오. 이자카야에서 "미안합니다"라고 점원을 부르는 데 지쳤기 때문에 대신 스마트 폰에 부르는 서비스를 Nuxt로 만들었습니다. 가끔 직업 사보는 "맥주주세요"라고 말합니다. PWA이므로 Safari에서 홈 화면에 ... PWANetlify자바스크립트nuxt.jsWebSpeechAPI Next.js with Netlify와 함께 Service Worker 사용 일반적으로 Next.js에서 Service Worker를 사용하는 경우 server.js 등을 직접 작성합니다. 그러나 Netlify는 정적 콘텐츠 배포를 수행하는 서버에 대해 위의 방법을 선택할 수 없습니다. 반대로 정적 콘텐츠로 디렉토리에 존재하면 실행할 수 있습니다. 사용 플러그인이 변경되었습니다 sw-precache-webpack-plugin -> workbox-webpack-plug... ServiceWorkerPWAReactnext.jsNetlify Nuxt.js+Tailwind CSS에서 포트폴리오 사이트를 만들고 Netlify에서 공개 마지막 달부터 프리랜서 엔지니어로서 일하고 있습니다만, 일단 포트폴리오 사이트적인 것을 만들어 두는 편이 좋을까~라고 생각해 만들었습니다. 타이틀에도 있듯이, 과 를 사용해 개발해, 로 공개하고 있습니다. 이번은 간단하게, 사이트를 만드는데 있어서 이용한 기술에 대해 소개할까라고 생각합니다. Nuxt는 create-nuxt-app로 시작할 수 있으므로 편리합니다. 자신은 색 구성표에 을 사용... 포트폴리오Netlifynuxt.jstailwindcss 【Netlify】Netlify/GithubPages/Heroku의 속도 비교 웹사이트 호스팅 서비스 Netlify/GithubPages/Heroku 속도 비교 ← 이번 게시 정적 사이트를 작성할 기회가 있어 Netlify/GithubPages/Heroku 의 속도 비교를 실시했으므로, 참고 정보로서 투고하겠습니다. Heroku는 정적 사이트의 호스팅 서비스는 아니지만 개인적으로 자주 사용하는 서비스이므로 비교 대상에 포함했습니다. 이미지(60~100KB)가 10개 표... 경 6Netlifygithub-pages Vuetify와 Netlify Forms를 사용할 때 망설이는 곳 Nuxt, Vuetify로 간단한 페이지를 만들고 Netlify로 페이지를 공개하려고 할 때, 망설이는 때의 메모입니다. 쿼리 양식을 작성했기 때문에 Netlify Forms를 사용했습니다. Code an HTML form into any page on your site, add a netlify attribute or data-netlify="true" to the <form> tag Ne... NetlifyVue.jsnuxt.jsVuetify 고기능 호스팅 서버 Netlify가 하테나 북마크 대응을 해준 이야기 Google의 robots는, SPA/PWS에서도 JavaScript 렌더링 후를 체크해 주므로, SPA/PWA가 검색 결과에 없다는 것은 없어졌습니다. 참고 : Google robots가 표시하는 내용을 확인할 수 있습니다 또한 prerendering을 사용하면 Facebook의 OGP/Twitter 카드도 제대로 인식 해 주므로 SSR하지 않고도 웹 사이트를 SPA/PWA로 만드는 물리적... SPANetlifyPWA하테나 북마크 Gatsby.js + Netlify + Github을 사용하여 JAM Stack 블로그 만들기 및 게시 Gatsby.js라는 정적 사이트 생성기로 기술 블로그를 만들고 Netlify라는 호스팅 서비스에서 호스팅하는 흐름을 설명합니다. Gatsby.js란? 정적 사이트를 고속으로 구축할 수 있는 React제의 정적 사이트 제너레이터. 세세한 내용에 관해서는 공식 문서나, 이하의 기사가 참고가 됩니다. Github와 협력하여 협력 소스를 호스팅하는 정적 웹 호스팅 서비스 1.Netlify에 Gat... JAMstackReactGitHubNetlifygatsby Gatsby와 Netlify로 쉽게 블로그 만들기 과 을 사용하여 누구나 5분 안에 폭속 블로그를 만드는 방법을 소개합니다. 기사내에서는 의 블로그를 배포까지 실시합니다. Gatsby에 관해서는 이쪽의 기사로 매우 잘 설명되고 있습니다. Gatsby가 설치되지 않은 경우 다음 명령으로 설치합시다. 다음 명령으로 블로그를 만듭니다. my-blog 부분에서 블로그의 이름을 지정합니다. https://github.com/gatsbyjs/gatsb... GraphQLReactNetlify자바스크립트gatsby Gatsby Starter Library에서 Netlify CMS를 시작할 때 {사이트 URL}/admin을 열어도 아무 것도 나오지 않을 때 확인하십시오. 수수하게 30분 정도 방황했기 때문에 메모. /static 디렉토리에 admin 디렉토리 만들기 index.html 및 config.yml 만들기 참고: config.yml 문서: Gatsby와 Netlify CMS의 편리한 점은 역시 편하게 시작할 수 있는 곳입니다. Gatsby의 Starter 페이지에서 Try this starter를 누르면 마음대로 리포지토리를 만들어 배포까지 해주고 ... NetlifyCMSNetlifygatsby Netlify CMS에 초안 → 검토 중 → 게시 상태 워크 플로우 도입 의 기사에서 소개한 방법으로 블로그의 운용은 할 수 있습니다만, 초안을 보존해 두고 싶을 때에 불편을 느끼는 것이라고 생각하므로, Netlify CMS의 워크플로우 기능에 대해 해설하고 싶습니다. 에 설명되어 있지만 Netlify CMS 구성 파일을 편집하여 아래 그림과 같이 Workflow 탭을 선택할 수 있습니다. /admin/config.yml에 publish_mode: editoria... Netlify자바스크립트블로그NetlifyCMSgatsby Gatsby와 Netlify를 이용한 폭속으로 블로그 공개 이번에는 React 기반의 정적 사이트 생성기인 Gatsby와 사이트를 게시하는 Netlify를 활용하여 폭 속도로 웹 애플리케이션을 배포하는 방법에 대해 씁니다. ※블로그는 템플릿 그대로 배포하고 있습니다. Gatsby는 템플릿을 선택하여 프로젝트를 만들 수 있습니다. 이번에는 이 있기 때문에 그쪽을 이용해 갑니다. 다른 템플릿은 에서 찾을 수 있습니다. 아래 URL을 방문하여 Netlif... Netlifygatsby Netlify + Netlify CMS + Gatsby로 CMS를 구축해 본 메모 Wordpress에서 수행하는 대부분의 요구 사항은 정적 사이트에서 대체 할 수있는 것이 많습니다 이제 탈 Wordpress를 위해 Netlify CMS를 시도했습니다. 기타 기능 (인증, 사용자, 팀 사용, 양식)에는 프리미엄 요금 설정이 있습니다 2 개의 Static Site Generator가 있지만 이번에는 GatsbyJS를 선택했습니다. "Deploy to Nelify"> Githu... NetlifyCMSNetlifygatsby 【유지비 0】 Qiita의 파생 툴을 정리한 alt-qiits.tk를 만들었습니다 【개인 개발】 이 문서는 의 세 번째 날입니다. 어제는 씨의 「 」 였습니다. 최근 Qiita 관련 툴만 만들고 있기 때문에 정리하고 싶어졌다. 유명한 곳이라면 등, 그 밖에도 파생물을 만드는 사람이 많다 어제와는 다른 구성으로 만들고 싶었다 재료가 다 평일이고 시간 없기 때문에 간단한 것을 입니다! (이미지의 아스비가 위험하기 때문에 그 중 수정합니다) 이런 건 마음대로 게재해도 될까? 어떤 사람에게는 ... NetlifyQiitaGoogleSpreadSheet
Netlify Functions를 사용하여 Qiita 트렌드 API를 비공식으로 만들었습니다. 2022.02.12추가: 여러 가지 사정 있음 Netlify Functions에서 Vercel Serverless Functions로 마이그레이션되었습니다. 앞으로는 h ttps://qiita-api.netlify.app가 아닌 을 방문하십시오 (만약을 위해 이전 링크에서 리디렉션을 날리려고하지만 ...). Zenn 버전은 Qiita 의 API 에는 트렌드 기사 일람을 취득하는 API 가 없... QiitaAPINetlifyNetlifyFunctions Nuxt.js에서 API CORS 대책을하면 Netlify에서 404 오류가 발생합니다. Nuxt.js에서 CORS 오류가 발생하여 axios의 proxiy 설정을 수행했습니다. Netlify에 배포하는 동안 404 오류가 발생했습니다. Netlify 리디렉션 옵션을 설정하여 해결 .envnuxt.config.js 로컬 환경에서의 동작 검증 성공적으로 API 통신이 가능한 패턴 움직이지 않는다 API 응답은 200이 반환되었지만 404 페이지의 DOM이 반환되는 패턴 static... CORSNetlifyVue.jsnuxt.jsaxios 【Hugo】Netlify CMS를 사용해 블로그를 만들어 보았다【초보자용】 Qiita 첫 투고의 하루 토끼라고 합니다. 조상이 있으면 지적해 주시면 다행입니다. 이번은, 라고 하는 것으로, 일단 간단하게 사이트만으로도 만들려고 생각했습니다. 하지만, 조사해 보면 에 관한 일본어 기사가 적거나, 혹은 낡았다고 느꼈습니다. 라고 의지한 대로입니다. 그래서 한 개씩 봐 갑니다! Netlify는 최근에 잘 듣는군요. 뭐 간단하게 말하면, 서버를 빌릴 수 있습니다. 편리! ... CMSNetlify블로그Hugo Gatby.js＋Netlify로 LightHouse 만점의 사이트를 하루에 만든 이야기 Qiita 이외에 잡기 블로그적인 것을 해본 기분이 된다 친구 엔지니어에게 추천된 Gatsby.js에서 블로그를 개설해 보았습니다. 이번에는 Gatby.js+Netlify로 가기로 했습니다. 일부 Gatsby의 스타터를 복제하고 시도했지만 이 스타터가 제일 그대로 블로그로서 사용할 수 있을 것 같았습니다. Gatsby는 정적 사이트 생성기이므로 빠릅니다 React는별로 만지지 않았기 때문에이... ReactNetlify자바스크립트CMSgatsby Nuxt.js에서 Github 키워드 순위 검색 서비스 개발한 이야기 ※전 재료 굉장히 편리했기 때문에, 시각적으로 볼 수 있는 WEB 서비스를 작성했습니다! 소스 코드는 이쪽 hogehoge.io 검색하려는 키워드를 여러 개 입력하고 검색하면 결과 테이블과 원형 차트, 그리고 각 키워드의 검색에 걸린 파일의 리스트가 나오게 되어 있습니다. chartjs로 표시하는 원형 차트의 애니메이션이 굉장히 멋지고 좋아합니다. 개발 환경의 구축에 이용하고 있습니다. 항상... chart.jsVue.jsNetlifynuxt.js도커 이름닷컴으로 취득한 도메인을 Netlify로 사용 이름 닷컴으로 취득한 도메인을 Netlify로 공개했을 때의 메모입니다. 도메인은 .jp이며 이미 취득한 것으로 설명합니다. 먼저 Overview에서 Domain settings로 이동합니다. Add custom domain을 클릭 이름 닷컴에서 취득한 도메인을 입력 Verify. 그러면 "입력한 도메인은 Netlify에서는 등록할 수 없지만 그 도메인을 소유하고 있다면 추가할 수 있다"라는... 이름.comNetlifydns GatsbyJS + Netlify에서 예약 게시물 같은 것을하십시오 Netlify 빌드 후크 (Webhook) 발행 IFTTT로 매시간 Build hooks를 두드려 빌드를 달리기 라는 고마운 플러그인으로 frontmatter 의 시각과 현재 시각을 비교해 빌드를 제어할 수 있습니다. npm 또는 yarn으로 패키지를 설치하고 gatsby-config.js 및 gatsby-node.js 에 설정을 추가합니다. gatsby-config.js gatsby-nod... JAMstackNetlifyiftttgatsby Nuxt.js+Vuetify+Contentful으로 블로그를 만들어 보았다. 블로그 사이트를 만들어 보았습니다. Nuxt.js에서 프로젝트를 만듭니다. UI 구성 요소는 Vuetify와 아주 조금 Vuesax를 사용했습니다. (병용할 수 있는지의 실험을 겸해. 결과 할 수 있었습니다.) 기사는 Contentful에 마크 다운 설명으로 작성. API로 가져와 HTML 변환하여 표시하고 있습니다. 배포 대상은 Netlify입니다. 완제품 PC 톱 화면 PC 기사 화면 스... VuetifyNetlifyVue.jsnuxt.jscontentful Ionic4(stencil)로 폭속으로 Lighthouse 100점의 사이트를 시작한다 아무래도 입니다. Ionic을 자주 사용합니다. 이번, 폭속으로 Lighthouse의 퍼포먼스 100점의 사이트를 시작하는 방법을 알았으므로 써 둡니다. 다음 명령을 두드리자. 몇 초 안에 프로젝트가 생성됩니다. 스타터는 "ionic-pwa"를 선택합시다. 프로젝트 이름은 임의. Confirm은 "y"를 선택합시다. 만든 프로젝트를 GitHub로 푸시하세요. 프로젝트를 Netlify에 배포합... StencilNetlifyWebComponentsionic [Netlify Forms와 연계] AWS Lambda에 Gmail 자동 회신 스크립트(Node.js)를 배포하여 API화. Gatsby.js를 사용하여 Netlify에 배포하는 프로젝트를 진행하고 있었는데, 문의 양식의 작성에 번거로웠기 때문에 비망록. 대상 독자는 · node.js의 사용 경험은 적당히 있다. 이것은 필수입니다. · lambda의 존재와 버릇의 힘을 어느 정도 파악하고 있다. 혹은, 어떤 버릇이라도 걸려 오라는 정신이 있는 사람. ・api gateway와 lambda의 제휴를 실시한 적이 있다.... 람다NetlifyAPIGatewayNode.jsgmail Netlify에서 처음으로 OGP on SPA Cocoda!의 일부가 로그인하지 않고 볼 수 있는 사양이 되어, OGP를 표시시키고 싶어졌습니다. 처음 OGP 대응 이었기 때문에 기억으로 남겨 둡니다. Twitter에서 공유할 때 OGP가 페이지별로 동적으로 바뀌어 표시되도록 하고 싶다! OGP를 설정하지 않으면 공유하면 아래와 같은 간단한 인상이됩니다. 그냥 공유했을 때 잘 말하지 않았던 것 같아서 사용하겠습니다. 공유하거나 공유하고 ... ReactSPAOGPNetlify자바스크립트 【Nuxt.js편】Nuxt.js+Contentful+Netlify로 SPA 블로그를 자작한다 Nuxt.js와 Contentful과 Netlify로 현대적인 (?) SPA 블로그를 만들었습니다. 여러 번에 걸쳐 구축의 기록을 남기고 있는 시리즈의 제2회입니다. 이번에는 SPA 사이트를 쉽게 만들 수 있는 프레임워크인 Nuxt.js에 대해 써 갑니다. 【시리즈의 예정】 - Nuxt.js편 ← 이 기사 의 기본을 알고 있다고 가정합니다. 아직 한 적이 없는 분은 을 해 봅시다. 먼저 에 ... SPANetlifyVue.jsnuxt.jscontentful GatsbyJS + Netlify에서 환경 변수를 사용하는 데 어려움 내 포트폴리오 사이트를 에서 만들고 에서 호스팅하고 있습니다. 제목대로 환경 변수로 헤매는 이야기와 그 해결책을 씁니다. Gatsby로 만든 사이트를 Netlify 등에서 호스팅한다면 환경 변수의 이름은 모두 GATSBY_부터 시작하는 것이 편하다. 잃어버린 이야기 전에 Gatsby와 Netlify 각각의 환경 변수를 설정하는 방법에 대해 씁니다. Gatsby의 환경 변수 Gatsby는 기본... gatsbyNetlifyenvironment_variablesReact Gatsby와 Netlify로 기술 블로그 만들기 React 기반 정적 사이트 생성기 장점이나 구조 등에 대해서는 React 기반 정적 사이트 생성기 Gatsby의 진정한 힘을 보여줍니다. 에 기재되어 있습니다. 기술 블로그를 시작하려고 생각할 때 React 기반의 주위와 새로운 기술을 사용했기 때문에 사용했습니다. 정적 사이트를 초고속으로 제공할 수 있는 웹 서비스 위의 Gatsby와 결합하여 GitHub에 PUSH한 프런트 엔드 자재를 ... Netlifygatsby [Nuxt/WebSpeechAPI] 시끄러운 선술집에서도 원탭으로 점원을 부르는 서비스 「엄지손가락으로 죄송합니다」 시끄러운 선술집에서도 원탭으로 「죄송합니다」라고 점원을 불러 주는 서비스입니다. 샤이걸이므로 목소리는 작습니다. PWA이므로 Safari에서 스마트 폰 홈 화면에 추가하여 사용하십시오. 이자카야에서 "미안합니다"라고 점원을 부르는 데 지쳤기 때문에 대신 스마트 폰에 부르는 서비스를 Nuxt로 만들었습니다. 가끔 직업 사보는 "맥주주세요"라고 말합니다. PWA이므로 Safari에서 홈 화면에 ... PWANetlify자바스크립트nuxt.jsWebSpeechAPI Next.js with Netlify와 함께 Service Worker 사용 일반적으로 Next.js에서 Service Worker를 사용하는 경우 server.js 등을 직접 작성합니다. 그러나 Netlify는 정적 콘텐츠 배포를 수행하는 서버에 대해 위의 방법을 선택할 수 없습니다. 반대로 정적 콘텐츠로 디렉토리에 존재하면 실행할 수 있습니다. 사용 플러그인이 변경되었습니다 sw-precache-webpack-plugin -> workbox-webpack-plug... ServiceWorkerPWAReactnext.jsNetlify Nuxt.js+Tailwind CSS에서 포트폴리오 사이트를 만들고 Netlify에서 공개 마지막 달부터 프리랜서 엔지니어로서 일하고 있습니다만, 일단 포트폴리오 사이트적인 것을 만들어 두는 편이 좋을까~라고 생각해 만들었습니다. 타이틀에도 있듯이, 과 를 사용해 개발해, 로 공개하고 있습니다. 이번은 간단하게, 사이트를 만드는데 있어서 이용한 기술에 대해 소개할까라고 생각합니다. Nuxt는 create-nuxt-app로 시작할 수 있으므로 편리합니다. 자신은 색 구성표에 을 사용... 포트폴리오Netlifynuxt.jstailwindcss 【Netlify】Netlify/GithubPages/Heroku의 속도 비교 웹사이트 호스팅 서비스 Netlify/GithubPages/Heroku 속도 비교 ← 이번 게시 정적 사이트를 작성할 기회가 있어 Netlify/GithubPages/Heroku 의 속도 비교를 실시했으므로, 참고 정보로서 투고하겠습니다. Heroku는 정적 사이트의 호스팅 서비스는 아니지만 개인적으로 자주 사용하는 서비스이므로 비교 대상에 포함했습니다. 이미지(60~100KB)가 10개 표... 경 6Netlifygithub-pages Vuetify와 Netlify Forms를 사용할 때 망설이는 곳 Nuxt, Vuetify로 간단한 페이지를 만들고 Netlify로 페이지를 공개하려고 할 때, 망설이는 때의 메모입니다. 쿼리 양식을 작성했기 때문에 Netlify Forms를 사용했습니다. Code an HTML form into any page on your site, add a netlify attribute or data-netlify="true" to the <form> tag Ne... NetlifyVue.jsnuxt.jsVuetify 고기능 호스팅 서버 Netlify가 하테나 북마크 대응을 해준 이야기 Google의 robots는, SPA/PWS에서도 JavaScript 렌더링 후를 체크해 주므로, SPA/PWA가 검색 결과에 없다는 것은 없어졌습니다. 참고 : Google robots가 표시하는 내용을 확인할 수 있습니다 또한 prerendering을 사용하면 Facebook의 OGP/Twitter 카드도 제대로 인식 해 주므로 SSR하지 않고도 웹 사이트를 SPA/PWA로 만드는 물리적... SPANetlifyPWA하테나 북마크 Gatsby.js + Netlify + Github을 사용하여 JAM Stack 블로그 만들기 및 게시 Gatsby.js라는 정적 사이트 생성기로 기술 블로그를 만들고 Netlify라는 호스팅 서비스에서 호스팅하는 흐름을 설명합니다. Gatsby.js란? 정적 사이트를 고속으로 구축할 수 있는 React제의 정적 사이트 제너레이터. 세세한 내용에 관해서는 공식 문서나, 이하의 기사가 참고가 됩니다. Github와 협력하여 협력 소스를 호스팅하는 정적 웹 호스팅 서비스 1.Netlify에 Gat... JAMstackReactGitHubNetlifygatsby Gatsby와 Netlify로 쉽게 블로그 만들기 과 을 사용하여 누구나 5분 안에 폭속 블로그를 만드는 방법을 소개합니다. 기사내에서는 의 블로그를 배포까지 실시합니다. Gatsby에 관해서는 이쪽의 기사로 매우 잘 설명되고 있습니다. Gatsby가 설치되지 않은 경우 다음 명령으로 설치합시다. 다음 명령으로 블로그를 만듭니다. my-blog 부분에서 블로그의 이름을 지정합니다. https://github.com/gatsbyjs/gatsb... GraphQLReactNetlify자바스크립트gatsby Gatsby Starter Library에서 Netlify CMS를 시작할 때 {사이트 URL}/admin을 열어도 아무 것도 나오지 않을 때 확인하십시오. 수수하게 30분 정도 방황했기 때문에 메모. /static 디렉토리에 admin 디렉토리 만들기 index.html 및 config.yml 만들기 참고: config.yml 문서: Gatsby와 Netlify CMS의 편리한 점은 역시 편하게 시작할 수 있는 곳입니다. Gatsby의 Starter 페이지에서 Try this starter를 누르면 마음대로 리포지토리를 만들어 배포까지 해주고 ... NetlifyCMSNetlifygatsby Netlify CMS에 초안 → 검토 중 → 게시 상태 워크 플로우 도입 의 기사에서 소개한 방법으로 블로그의 운용은 할 수 있습니다만, 초안을 보존해 두고 싶을 때에 불편을 느끼는 것이라고 생각하므로, Netlify CMS의 워크플로우 기능에 대해 해설하고 싶습니다. 에 설명되어 있지만 Netlify CMS 구성 파일을 편집하여 아래 그림과 같이 Workflow 탭을 선택할 수 있습니다. /admin/config.yml에 publish_mode: editoria... Netlify자바스크립트블로그NetlifyCMSgatsby Gatsby와 Netlify를 이용한 폭속으로 블로그 공개 이번에는 React 기반의 정적 사이트 생성기인 Gatsby와 사이트를 게시하는 Netlify를 활용하여 폭 속도로 웹 애플리케이션을 배포하는 방법에 대해 씁니다. ※블로그는 템플릿 그대로 배포하고 있습니다. Gatsby는 템플릿을 선택하여 프로젝트를 만들 수 있습니다. 이번에는 이 있기 때문에 그쪽을 이용해 갑니다. 다른 템플릿은 에서 찾을 수 있습니다. 아래 URL을 방문하여 Netlif... Netlifygatsby Netlify + Netlify CMS + Gatsby로 CMS를 구축해 본 메모 Wordpress에서 수행하는 대부분의 요구 사항은 정적 사이트에서 대체 할 수있는 것이 많습니다 이제 탈 Wordpress를 위해 Netlify CMS를 시도했습니다. 기타 기능 (인증, 사용자, 팀 사용, 양식)에는 프리미엄 요금 설정이 있습니다 2 개의 Static Site Generator가 있지만 이번에는 GatsbyJS를 선택했습니다. "Deploy to Nelify"> Githu... NetlifyCMSNetlifygatsby 【유지비 0】 Qiita의 파생 툴을 정리한 alt-qiits.tk를 만들었습니다 【개인 개발】 이 문서는 의 세 번째 날입니다. 어제는 씨의 「 」 였습니다. 최근 Qiita 관련 툴만 만들고 있기 때문에 정리하고 싶어졌다. 유명한 곳이라면 등, 그 밖에도 파생물을 만드는 사람이 많다 어제와는 다른 구성으로 만들고 싶었다 재료가 다 평일이고 시간 없기 때문에 간단한 것을 입니다! (이미지의 아스비가 위험하기 때문에 그 중 수정합니다) 이런 건 마음대로 게재해도 될까? 어떤 사람에게는 ... NetlifyQiitaGoogleSpreadSheet