누구나 무료로 최신 웹사이트를 만들고 배포할 수 있는 방법

원래 발행일maxniederman.com

오늘날 웹사이트를 만드는 것이 그 어느 때보다 쉬워졌습니다. Squarespace 및 Wix과 같은 도구를 사용하면 코드 없이도 매력적인(지루한 경우) 웹사이트를 쉽게 만들 수 있습니다.

이것은 대부분의 사람들에게 훌륭한 솔루션입니다. 그러나 몇 가지 단점이 있습니다.

비용: 대부분의 사이트 빌더는 한 달에 최소 $10의 비용이 듭니다.

사용자 정의 부족: Squarespace와 같은 서비스는 수많은 테마를 제공합니다. 이것들은 좋지만 사이트 빌더는 일반적으로 사이트에 대한 세부적인 제어가 부족합니다.

동적 콘텐츠 및 기능: 이와 같은 사이트 빌더는 사이트에 사용자 지정 기능을 추가하거나 동적 콘텐츠를 제공할 수 있는 기능을 제공하지 않습니다.

좀 더 기술에 정통한 사람을 위해 누구나 무료로 할 수 있는 더 나은 솔루션이 있습니다. 웹사이트 템플릿을 사용하여 GitHub Pages 또는 Netlify 과 같은 서비스를 사용하여 무료로 호스팅할 수 있습니다.

호스팅용 Netlify와 함께 React 구성 요소를 미리 렌더링하는 정적 사이트 생성기인 Gatsby을 사용하여 웹 사이트를 빠르고 쉽게 설정하고 호스팅하는 방법을 보여 드리겠습니다. 단순한 정적 웹사이트에 널리 사용되며 우리가 활용할 광범위한 템플릿 라이브러리가 있습니다. Jekyll 과 같이 사용할 수 있는 다른 대안이 많이 있습니다.

먼저 Gatsby CLI를 설치해야 합니다.

npm install -g gatsby

Gatsby 스타터 사용

이제 Starter Library 에서 Gatsby 템플릿을 찾아야 합니다. Leko Arts ' Cara Theme 을 사용하겠습니다. 각 스타터에는 내용 수정에 대한 지침이 다르므로 스타터 지침을 따라야 합니다. 카라 테마의 과정을 보여드리겠습니다.

그런 다음 스타터를 다운로드합니다.

gatsby new my-awesome-website https://github.com/LekoArts/gatsby-starter-portfolio-cara

다음 부분은 템플릿에 따라 다르지만 일반적으로 콘텐츠가 포함된 일부 파일을 수정해야 합니다. 대부분의 초보자에게는 내용을 수정하는 지침이 있습니다. 운영:

gatsby develop

저장할 때마다 변경 사항을 확인합니다. 다시 로드할 필요도 없습니다!

스타터 수정

템플릿은 훌륭하지만 때로는 필요에 맞게 템플릿을 조정해야 합니다. 고맙게도 Gatsby는 Shadowing으로 이것을 매우 쉽게 만듭니다! 섀도잉을 사용하면 테마의 파일을 덮어쓸 수 있습니다. 전체 가이드here를 읽을 수 있지만 기본적으로 테마 이름으로 디렉토리src/를 내부에 만듭니다. 내 템플릿의 경우 src/@lekoarts/gatsby-theme-cara/ 입니다. 거기에 넣은 모든 파일은 테마의 소스 코드를 섀도잉(덮어쓰기)합니다.

배포

사이트가 만족스러우면 호스팅해야 합니다. 고맙게도 Netlify는 이 과정을 쉽게 만들어 주었습니다.

먼저 GitHub 또는 GitLab에 사이트를 업로드합니다. 이것은 요구 사항은 아니지만 배포를 훨씬 간단하게 만듭니다. 그런 다음 무료 Netlify 계정here을 만들어야 합니다.Netlify 대시보드에 Git에서 새 사이트를 만드는 버튼이 표시됩니다. 그것을 클릭하고 업로드한 저장소를 선택하십시오.

"사이트 배포"를 클릭하면 완료됩니다!

더 나아가

src/pages/ 디렉토리에 React 구성 요소를 추가하여 처음부터 자신의 Gatsby 사이트를 만들 수 있습니다. 재구축하지 않고 동적 콘텐츠를 제공하려면 Next.js 또는 서버 측 렌더링에 관심이 없는 경우 Create React App 같은 다른 React 사이트 생성기를 사용해야 합니다.