Gatsby

개발관련

개츠비 gatsby.js AWS S3에 업로드해서 정적 사이트 호스팅 하기

여러가지 방법이 있지만 최대한 간단하고 따로 설정할 필요가 없는 방법을 소개 한다. 비슷한 상황에서 시행착오를 겪지 않길 바랍니다. 1. aws cli를 설치해준다. Macos 기준 pip3가 기본 설치되어 있기 때문에 pip대신 pip3로 설치 ( pip는 파이썬 인스톨 패키지 관리 도구 ) pip install awscli 2. gatsby-plugin-s3를 설치해준다. npm install gatsby-plugin-s3 3. gatsby-config.js 파일에 Bucket설정을 추가 한다. plugins: [ { resolve: `gatsby-plugin-s3`, options: { bucketName: "my-website-bucket", }, }, ] 4. .env를 통해서 AWS 환경변수 ..

개발관련

Gatsby 개츠비 에서 이미지 사용 시 최적화 관련 팁 gatsby-plugin-image 사용법

gatsby-plugin-image gatsby-plugin-image를 사용해서 gatsby 이미지를 최적화하는 방법을 알아보자. 설치 하기 npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp 설정 파일 gatsby-config.js 파일에서 plugin에 추가 해준다. module.exports = { plugins: [ `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, // 동적 이미지 생성을 위해서 필요함 ], } 정적인 이미지 Static Image 사용 시 import { Static..

개발자 Dane
'Gatsby' 태그의 글 목록