6년 넘게 웹 개발자로 일했지만 2018년에야 웹사이트용 도메인 이름을 구입했습니다. 그리고 이제야 웹사이트를 완성했습니다. 게으른 것 같아요.

하지만 저는 이 웹사이트가 제가 지금까지 만든 웹사이트 중 가장 빠르고 성능이 최적화된 웹사이트라고 확신합니다.

chandujs.dev



아주 간단하죠?

내 웹 사이트를 구축하는 데 사용한 것들을 분석해 보겠습니다.

개츠비

이 정적 사이트 생성기는 웹 개발로 돌아가는 것을 다시 생각하게 만들었습니다.
Gatsby는 빠르고 성능이 뛰어난 최신 React용 정적 사이트 생성기입니다. 웹 사이트의 첫 번째 버전은 Angular에서 수행되었습니다. Gatsby를 배운 후 Gatsby로 이식했습니다.

시작 프로젝트를 복제하고 here에서 작업을 시작할 수 있습니다.

플러그인

Gatsby의 플러그인 아카이브는 충분히 풍부합니다. 귀하의 웹사이트를 위한 거의 모든 것에 대한 플러그인을 얻을 수 있습니다.

블로깅

내 웹 사이트에 블로그 섹션이 있습니다. 그래서 gatsby-source-dev 플러그인을 사용하여 내 사용자 ID의 dev.to 게시물을 가져오고 내 웹사이트에 렌더링했습니다. 손쉬운 블로깅 ​​😎

포트폴리오 쇼케이스

웹사이트에 내 포트폴리오를 표시하기 위해 다음 플러그인을 사용했습니다.

gatsby-source-filesystem 프로젝트의 모든 파일을 나열하려면

gatsby-plugin-sharp 여러 이미지 처리 기능

gatsby-transformer-sharp 선명한 이미지 처리 라이브러리에서 지원하는 이미지 유형에서 ImageSharp 노드를 생성합니다

.

gatsby-transformer-remark Remark를 사용하여 Markdown 파일을 구문 분석합니다.

gatsby-remark-images 프로덕션 빌드에서 이미지를 사용할 수 있도록 마크다운에서 이미지를 처리합니다.

gatsby-remark-relative-images 마크다운의 이미지 src를 해당 노드의 상위 디렉토리에 상대적으로 변환합니다.

gatsby-plugin-extract-image-colors 이미지에서 색상을 추출하여 이미지 데이터에 추가합니다

.

최적화

Performance optimization은 Gatsby에서 즉시 사용할 수 있습니다.

웹 사이트에서 사용하지 않는 부트스트랩의 95%를 제거하는 방법에 대한 별도의 기사를 작성했습니다. 읽기here

🗜 Gatsby 웹사이트에서 사용하지 않는 CSS의 95%를 삭제한 방법

Chandu J S ・ 2020년 2월 21일 ・ 1분 읽기

#gatsby #css #bootstrap #webdev

넷리파이 CMS

저는 Netlify의 헤드리스 CMS를 사용하고 있습니다. 이 CMS는 정적 사이트에서 사용할 수 있는 간단하고 통합하기 쉬운 CMS입니다. Gatsby 웹사이트와 통합하는 것은 매우 쉽습니다.
Netlify CMS에 대해 자세히 알아보기here

프로그레시브 웹 앱

이 웹사이트는 PWA이므로 웹사이트를 열면 나중에 웹사이트에 액세스할 수 있습니다. 매우 쉬운 단계를 통해 Gatsby 웹사이트를 PWA로 만들 수 있습니다.

gatsby-plugin-offline 노드 패키지를 설치하고 plugins 파일의 gatsby-config.js 어레이 끝에 아래를 추가합니다.

[
//...
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'Chandu J S',
        short_name: 'Chandu',
        start_url: '/',
        background_color: Variables.colors.brand,
        theme_color: Variables.colors.brand,
        display: 'standalone',
        icon: 'src/assets/images/icon.png',
        crossOrigin: `use-credentials`,
      },
    },
    'gatsby-plugin-offline',
//...
]

넷리파이

호스팅 측면에서 저는 제 웹사이트를 호스팅하기 위해 비용을 전혀 지불하지 않았습니다 😁.Netlify는 정적 웹사이트에 대한 무료 호스팅을 제공하는 멋진 서비스입니다.

Netlify는 거의 모든 종류의 정적 사이트 생성기를 지원합니다.

더 명확히 해야 할 사항이 있으면 댓글로 알려주세요.

내 웹사이트의 소스 코드가 공개되어 사용 가능합니다here. 라이센스에 따라 자유롭게 사용하십시오.