Surge를 사용하여 정적 사이트 배포 (2020 업데이트)

Surge를 사용하여 정적 사이트 배포 (2020 업데이트)

Surge를 사용하여 정적 사이트 배포

정적 웹 사이트를 배포하는 과정에서 웹 앱 개발자는 항상 웹 사이트를 개선하기 위해 가장 효율적인 최신 도구를 찾고 있습니다. 일반적으로 SSG (Static Site Generator)는 직접 코딩 된 작업과 전체 CMS로 즉석에서 작동합니다. 이 설정은 대부분의 웹 사이트 또는 웹 응용 프로그램 프로젝트에 적합하며 서버 측 처리가 아닙니다. 이러한 추세로 인해 개발자는 웹태스크.io 다른 서버 엔드 포인트를 처리하는 프로그램입니다. 웹 앱 개발의 중요한 추세와 함께이 기사에서는 개발자가 정적 사이트의 성장을 위해 겪는 프로세스에 대해 자세히 설명합니다.서버리스”웹 애플리케이션.

정적 사이트 생성기는 무엇입니까?

구체적으로 State Site Generator를 사용하는 개발자는 HTML 전용 웹 사이트를 생성하여 프로세스를 시작합니다. HTML 전용이기 때문에 사이트는 대부분 원시 데이터와 템플릿으로 실행됩니다. 앞서 언급했듯이 원시 데이터는 "마크 다운 파일"로도 분류됩니다. 더 나은 이해를 위해 마크 다운 파일 (링크 : https://guides.github.com/features/mastering-markdown/)은 마크 다운 언어의 방언을 사용하는 일반 텍스트 파일입니다. 일반 텍스트 형식에는 굵게, 기울임 꼴, 들여 쓰기, 머리글 및 표시를 포함한 텍스트 형식을 만들기위한 텍스트 기호가 포함됩니다. 이러한 파일은 프로그래밍 지식이 상대적으로 필요하지 않으며 동적 웹 사이트와 달리 가장 기본적인 유형의 웹 사이트입니다. 따라서 사이트의 각 웹 페이지에는 모든 플랫폼의 모든 사용자에게 동일하게 표시되는 고정 웹 사이트 콘텐츠가 포함 된 자체 HTML 파일이 있습니다. 그 결과 라이브 서버로 전송되는 빌드입니다.

정적 사이트 대 동적 사이트

이에 비해 정적 웹 사이트는 클라이언트 측 HTML 및 CSS 코드 기반입니다. 클라이언트가 정적 서버 웹 사이트에서 요청하면 HTML 파일이 게스트 장치에 즉시 표시 될 수있는 사이트로 깔끔하게 패키징됩니다. 인기있는 정적 사이트 생성기는 다음과 같습니다. 지킬, 이는 Github 페이지에서 지원됩니다. 다음. 반대로 동적 웹 사이트는 클라이언트 측 및 서버 측 스크립팅 언어에 의존합니다. 예를 들어 JavaScript (링크 : https://www.javascript.com), PHP (링크 : https : //www.php.net), ASP (링크 : https : //www.w3schools.com/) asp / webpages_intro.asp)는 "동적 서버 측"스크립트입니다. 설명으로 HTTP 동적 서버로 실행하면 파일이 브라우저로 전송됩니다. 동시에 생성기는 최종 사용자가 페이지를 호출 할 때마다 새 HTML 파일을 만듭니다.

서지 란?

Surge는 정적 웹 사이트 및 애플리케이션을 배포하고 호스팅하기위한 서비스입니다. 이를 사용하여 다음과 같은 정적 사이트 생성기로 빌드 된 프로젝트를 호스팅 할 수 있습니다. 개츠비.js지킬. HTML, CSS 및 클라이언트 측 JavaScript로 빌드 된 모든 사용자 정의 프로젝트도 작동합니다. 무료 계획은 거의 모든 정적 사이트에 최적이며 명령 줄에 몇 번의 키 입력만으로 서비스를 구성 할 수 있습니다. 사용자 지정 SSL, 암호 보호 등과 같은 몇 가지 추가 기능을 추가하는 프리미엄 버전이 있습니다.

왜 Surge를 사용해야합니까?

Surge는 모든 프런트 엔드 웹 개발자가 익숙해 져야하는 매우 편리한 도구입니다. 사용하기가 매우 간단하며 문자 그대로 몇 초 내에 정적 사이트를 인터넷에 게시 할 수 있습니다. 모든 웹 게시는 명령 줄에 몇 가지 명령 만 입력하면됩니다. 가장 좋은 점은 투자가 필요 없다는 것입니다. 또한 사용자는 프로젝트에 개인 도메인을 추가하고, 다른 사용자와 프로젝트를 공유하고, 404 오류 페이지를 만들어 클라이언트를 다른 웹 페이지로 안내 할 수 있습니다. Surge에는 다른 인기있는 정적 사이트 배포자에게없는 몇 가지 고유 한 이점도 있습니다 (“Surge 및 Github 페이지 비교”참조).

Surge는 무료 서비스입니까?

위에서 암시했듯이 Surge는 사용 비용이 필요하지 않습니다. 그러나 추가 비용을 기꺼이 투자하려는 사용자에게 더 많은 혜택을 제공하는 Surge Professional이 있습니다. 이 프리미엄 버전의 서비스는 월 $ 30부터 시작합니다. 특히 추가 비용으로 무제한 전문 프로젝트를 생성하고, 사용자 지정 SSL을 사용하고, https로 보안 웹 사이트를 만들 수 있습니다. 또한 리소스를 공유하고 사이트 내에서 리디렉션을 개발하며 암호로 프로젝트를 보호 할 수 있습니다.

소규모 또는 개인 웹 사이트를 만들기 위해 소스 파일을 게시 할 계획이라면 무료 계획으로 충분합니다. 그러나 프로젝트 게시를 위해 정기적으로 Surge에 의존하는 사람에게는 Surge Premium도 현명한 옵션으로 간주 될 수 있습니다.

서지 가격

Surge 설치

Surge를 설치하고 계정을 설정하는 것은 매우 간단하고 직관적입니다. 새 터미널 창을 열고 다음 명령을 입력하기 만하면됩니다.

npm install – 글로벌 서지

(참고 :이 단계에서는 Node 및 npm이 시스템에 이미 설치되어 있다고 가정합니다. 그렇지 않은 경우 공식 사이트에서 최신 버전을 설치할 수 있습니다. Node.js 웹 사이트.)

Node.js.website가 올바르게 설치되었는지 확인하려면 명령 줄로 이동하여 상태에 'node -v'를 입력하십시오.

처음 설정할 때 Surge는 계정 설정을 요청합니다. 유일한 요구 사항은 이메일 주소와 비밀번호를 제공하고 나중에 이메일을 확인하는 것입니다. 이 단계를 완료하면 이제 Surge 계정이 설정되고 해당 서비스에 배포 할 준비가됩니다.

서지 명령

사이트 배포

Surge에 정적 웹 사이트를 사용하려면 먼저 구현하려는 프로젝트 디렉토리의 파일 경로를 찾으십시오. 예를 들어, / Users / air / surge-test에있는 프로젝트를 구현할 것입니다.

배포 할 디렉터리의 파일 경로를 알고 나면 터미널 창에서 다음 명령을 실행합니다.

발생

그러면 사용자 이름 (예 : 이메일 주소)이 표시됩니다. 나중에 프로젝트의 파일 경로를 제공하면됩니다.

Surge에 정적 사이트 배포

전체 파일 경로를 입력 한 다음 Enter 키를 누르십시오.

서지 프로그램은 임의의 단어를 사용하여 도메인 이름을 자동으로 제공합니다. 아직 사용하지 않은 경우 사용자 지정 도메인을 만들 수도 있습니다. 선택한 도메인 이름을 입력 한 다음 Enter 키를 누르십시오.

(참고 : 입력 한 사용자 지정 도메인 이름이 이미 사용중인 경우 오류 메시지가 표시됩니다.

중단됨 – [에 게시 할 권한이 없습니다. ]

배포가 완료되면 터미널에 성공 메시지가 표시됩니다. 프로젝트의 도메인 이름과 IP 주소는 라이브 배포에 액세스 할 수있는 위치를 보여줍니다.

서지 배포

웹 브라우저에 도메인 이름을 입력하면 이제 사이트가 라이브로 표시됩니다.

급증하는 정적 사이트 배포

사용자 지정 도메인 이름 추가 

를 사용하여 CNAME 기록

기본적으로 Surge는 서비스에 배포하는 모든 웹 사이트에 대한 사용자 지정 하위 도메인을 제공합니다. your-custom-domain.surge.sh와 유사합니다. 하위 도메인을 사용자 정의하고 선택할 수 있습니다 (아직 사용하지 않은 경우). 그러나 전문 프로젝트에 고유 한 사용자 지정 도메인을 사용하고 싶을 가능성이 있습니다.

이렇게하려면 도메인 공급자의 DNS 패널에 두 개의 새 CNAME 레코드를 추가해야합니다. 하나는 호스트 이름이 @이고 다른 하나는 호스트 이름이 www입니다. 두 CNAME 레코드는 다음 IP 주소를 가리 킵니다.

na-west1.surge.sh

사용 년 A 기록

어떤 이유로 도메인 공급자가 CNAME 레코드를 허용하지 않는 경우 A 레코드를 대안으로 설정할 수 있습니다. A 레코드가 IP 주소 45.55.110.124를 가리 키도록합니다.

사용자 지정 하위 도메인 사용

sub.my-cool-site.com과 같은 사용자 정의 하위 도메인을 사용하여 Surge를 가리킬 수도 있습니다. 이렇게하려면 새 CNAME 레코드를 설정해야합니다. 이는 위의 동일한 na-west1.surge.sh IP 주소로 연결되어야하지만 이번에는 호스트 이름이 *. * 호스트 이름은 와일드 카드입니다. 즉, 기본 도메인을 제외한 모든 하위 도메인이 유효하고 허용됩니다.

서지 프로그램은 이러한 DNS 변경 사항을 즉시 인식합니다. 다른 곳에 전파하는 데 시간이 걸릴 수 있지만 일반적으로 24 – 48 시간을 넘지 않습니다.

사용자 지정 도메인을 사용하여 프로젝트 배포

DNS 설정이 적용되면 이제 프로젝트를 배포 할 수 있습니다. 사용하려는 도메인을 지정하기 만하면됩니다. 이렇게하려면 터미널에서 서지 명령을 실행하십시오. 다음과 같이 먼저 프로젝트의 파일 경로를 지정한 다음 나중에 사용자 지정 도메인을 지정합니다.

서지 파일 경로 / 프로젝트 a-cool-custom-domain.com

사용자 지정 도메인을 프로젝트에 바인딩

도메인을 프로젝트에 바인딩 할 수 있으므로 배포 할 때마다 입력 할 필요가 없습니다. echo 명령을 사용하여 다음과 같이 CNAME 파일로 보낼 수 있습니다.

echo a-cool-custom-domain.com> CNAME

Surge 프로젝트 공유

Sunlight Media LLC : Surge 프로젝트 공유

다른 Surge 사용자에게 게시 권한을 부여하려면 먼저 프로젝트를 게시해야합니다. 그런 다음 명령 줄에 add 명령을 입력하여 이메일 주소로 공동 작업자 추가를 시작합니다.

급증 – 추가 협력자@email.com

프로젝트에 초대되고 초대를 수락 한 게스트는 소스 파일을 동일한 도메인에 게시 할 수 있습니다.

 


서지 프로젝트 나열

Surge를 사용하여 게시 한 모든 프로젝트를 보려면이 간단한 Surge 명령을 명령 줄에 입력합니다. 그러면 모든 프로젝트 목록이 생성됩니다.

서지 목록

사용자 지정 404 오류 페이지 추가

기본 404 오류 페이지를 맞춤 제작 한 페이지로 바꾸려면 Surge 프로젝트에 404.html 파일을 추가하기 만하면됩니다. 새로운 404 파일을 배포 할 준비가 되었으면 명령 만 급증하십시오.

 

만들기 .surgeignore 파일, / h2>

Git 생태계의 .gitignore 파일과 매우 유사하게 Surge는 자체 무시 파일을 제공합니다. 배포시 Surge에서 무시할 파일 및 디렉터리 목록을 설정할 수 있습니다. 이는 개발 프로세스 중에 만 관련 될 수있는 파일을 제외하는 데 유용합니다. 완전히 비공개로 유지하려는 모든 항목도 여기에 포함하는 것이 좋습니다.

이를 설정하려면 프로젝트 폴더의 루트에 .surgeignore라는 새 파일을 만듭니다. 이 파일 안에 무시할 파일과 디렉토리를 나열 할 수 있습니다. 몇 가지 일반적인 예에는 node_modules, bower_components 등이 포함될 수 있습니다. 사이트의 프로덕션 버전과 관련이없는 특정 파일 형식을 무시할 수도 있습니다. 확장자 (예 : * .swp, * .psd 등) 앞에 * (와일드 카드 기호)를 추가하면이를 수행 할 수 있습니다.

Surge에서 사이트 제거

어떤 이유로 웹 사이트를 삭제하려는 경우에는 서지 분해 명령과 프로젝트 도메인을 사용하여 쉽게 할 수 있습니다.

서지 분해 your-domain.com

프로젝트 제거를 시도하기 전에 Surge 버전이 최신 버전으로 업데이트되었는지 확인하십시오.

Surge 및 Github 페이지 비교

Surge와 유사한 또 다른 인기있는 대체 정적 호스팅 서비스는 Github 페이지. 이 무료 서비스를 통해 사용자는 개인 정적 사이트 프로젝트를 Github 저장소에 호스팅 할 수 있습니다. Github Pages는 가장 높은 순위의 정적 호스팅 서비스 중 하나로서 모든 수준의 웹 개발자들 사이에서 매우 잘 알려진 명성을 자랑합니다. 두 가지 유형의 페이지를 만들 수 있습니다. github.io 도메인에서 만들 수있는 "프로젝트 페이지 또는 사용자 및 조직 페이지". 물론 사용자 지정 도메인도 자유롭게 사용할 수 있습니다. Github는 상업적 목적을 달성하기위한 프로젝트는 호스팅 서비스를 사용하여 게시하지 말 것을 명시 적으로 권장합니다. 따라서 대규모 웹 사이트를 수용 할 수는 없지만 Github 페이지는 비상업적 또는 개인적인 용도로 적합합니다.

프로젝트 페이지와 사용자 및 조직 페이지에는 약간의 차이가 있습니다. 프로젝트 페이지는 마스터 및 "GH 페이지"분기를 포함하여 여러 소스 위치에서 게시 할 수 있습니다. 사용자 지정 도메인이 없으면 기본 게시 도메인은 https : //입니다. .github.io /. 반면 사용자 및 조직 페이지는 Github 저장소 아래의 마스터 브랜치에 있습니다. https : // 도메인으로 게시됩니다. .github.io.

Surge의 이점

Github Pages는 의심 할 여지없이 강력한 도구이지만 Surge는 Github Pages에도없는 몇 가지 이점을 제공합니다. 이러한 이점 중 하나는 클라이언트 측 라우팅입니다. Surge 프로젝트 내에서 존재하지 않는 경로를 요청하는 경우 클라이언트를 "백업"HTML 파일 (200.html)로 리디렉션 할 수 있습니다. 이는 놀라운 404 오류를 표시하는 대신 Surge가 단순히 대체 파일을 제공하기 때문에 유용합니다.

Surge의 또 다른 주목할만한 이점은 사용자가 몇 초 만에 사이트에 새로운 변경 사항을 배포 할 수 있다는 것입니다. 위에서 언급했듯이 단순히 명령 줄에 서지 명령을 입력하면 변경 사항을 온라인에서 즉시 볼 수 있습니다. 테스트 실험 중에 특히 유용하며 사용자 웹 사이트에 대한 간단한 편집이 관리하기 더 쉽습니다. 웹 페이지를 즉시 새로 고치는 옵션으로 인해 웹 브라우저의 변경 사항이 더 눈에 띄게 나타납니다. 또는 Github Page 사용자는 온라인 인터페이스에 대한 변경 사항을 계속 푸시하고 커밋하며 더 길고 지루한 프로세스로 어려움을 겪습니다. 장기적으로 올바른 정적 사이트는 소프트웨어 개발자.

 

작성자 바이오

Crystal은 캘리포니아 주 산타 클라리 타에있는 공립 고등학교 XNUMX 학년입니다. 그녀는 첫 웹 개발 과정을 수강하고 Dreamweaver를 사용하여 첫 번째 웹 사이트를 디자인 한 XNUMX 학년 때부터 기술에 투자 해 왔습니다.

그녀는 대학 수준의 컴퓨터 과학 과정으로 분기하여 Java 프로그래밍에 능숙 해졌습니다. 2018 년 여름, Crystal은 Kode with Klossy라는 선택 프로그램에 참석하여 HTML5 / CSS, Javascript에 대한 기술을 습득하고 가상 및 증강 현실 시뮬레이션 개발을 실험했습니다.

Crystal은 고등 교육 과정에서 컴퓨팅 및 기술 연구를 계속하기를 희망합니다.

2 코멘트

  • 소리 29 5 월 2020, 6 : 45의 오후

    멋진 블로그, 게시 해 주셔서 감사합니다.

  • 우르슬란.알리 31 5 월 2020, 3 : 28의 오후

    다음 문제가 발생합니다. 해결 방법을 알려주십시오.
    중단됨 – 해당 파일 또는 디렉토리 없음 : C : \ Users \ lenovo \ Desktop \ UrduBootCamp \ UrduBootCamp \ UrslanAli.surge.sh

코멘트를 게시

댓글이 검토됩니다. 귀하의 이메일은 비공개로 유지됩니다. 필요 입력 사항은 표시되어 있습니다 *