"누군가는 웹용 X를 빌드해야 합니다."- 왜 안 되겠습니까? GitHub 계정만 있으면 됩니다.

지난 주, Šime Vidas는 트위터에서 그것이 모바일 장치에 있다고 불평했습니다. 나는 pastebin.com을 사용할 것을 제안했지만 붙여넣기 전에 많은 탭이 필요합니다. 그런 다음 Šime은 우리가 pastebinzero.com을 만들어야 하며 필요한 것은 전체 화면뿐이라고 농담을 계속했습니다.

<textarea autofocus></textarea>

그래서 저는 이것을 만드는 데 문자 그대로 1분을 보냈습니다. 내 브라우저에서 GitHub 로그인만 있으면 됩니다. 설정에서 자동 완성 지원을 통한 코딩, 호스팅까지. https://codepo8.github.io/pastebinzero에서 모든 영광을 볼 수 있고 https://github.com/codepo8/pastebinzero에서 코드를 볼 수 있습니다.

그리고 당신도 그렇게 할 수 있습니다. 방법은 다음과 같습니다.

이것을 비디오로 보고 싶다면 다음 ~2분 연습을 확인하십시오.



그렇지 않은 경우 GitHub에서 HTML/CSS/JavaScript 기반 프로젝트를 시작, 빌드 및 호스팅하는 단계는 다음과 같습니다.

GitHub 프로필로 이동하여 Repositories를 클릭하고 "새로 만들기"버튼을 누릅니다.

저장소 이름도 나중에 URL의 일부가 되므로 이름을 지정해야 합니다. GitHub는 저장소 이름이 여전히 사용 가능한지 여부를 자동으로 알려줍니다. 리포지토리가 공개되어 있는지 확인하고 "리포지토리 생성"을 누르십시오. 소스 코드를 공개하고 싶지 않고 사람들이 결과만 볼 수 있도록 하려면 비공개로 유지할 수도 있습니다. 생성된 GitHub 페이지는 항상 공개됩니다.

이렇게 하면 저장소가 생성되고 다음에 수행할 모든 종류의 정보를 얻을 수 있습니다. 지금은 creating a new file 링크를 클릭하십시오.

파일 이름index.html을 지정하고 내용을 아무거나 입력합니다. 여기 있는 이 편집기는 몇 가지 빠른 수정을 수행할 수 있지만 겨자를 자르지는 않으므로 지금은 중요하지 않습니다. Commit new file 버튼을 누르면 새 파일이 생성됩니다.

Settings 탭으로 이동하여 Pages 메뉴 항목을 선택합니다. 드롭다운 메뉴에서 main 분기를 선택하고 save 를 누르십시오. 이렇게 하면 작업 중인 내용을 웹에서 URL로 사용할 수 있습니다.

저장소의 Code 부분으로 돌아가서 . 버튼을 누릅니다. 이렇게 하면 이 프로젝트가 열려 있는 브라우저에서 Visual Studio Code가 로드됩니다. 이제 자동 완성 및 IntelliSense를 포함하여 VS Code의 모든 기능을 사용하여 프로젝트를 작성할 수 있습니다.

완료되면 VS Code의 Source Control 옵션으로 이동하여 커밋 메시지를 입력하고 확인 표시를 클릭합니다. 이렇게 하면 변경 사항이 저장소에 커밋됩니다.

저장소의 "작업"탭에서 제품을 온라인으로 사용할 수 있는 시기를 확인할 수 있습니다. "페이지 빌드 및 배포"워크플로를 확인합니다. 페이지가 준비될 때까지 노란색 스피너가 표시됩니다. 녹색 확인 표시로 바뀌면 페이지가 준비된 것입니다.

비디오 데모의 경우 코드는 https://github.com/codepo8/greencircle에서 사용할 수 있으며 브라우저 내 버전은 https://codepo8.github.io/greencircle에서 볼 수 있습니다. 여기서 codepo8는 내 GitHub 사용자 이름이고 greencircle는 리포지토리 이름입니다.

codepen, jsbin, codesandbox, jsfiddle…이 아닌 이유는 무엇입니까?

온라인에서 프로젝트를 호스팅하고 편집할 수 있는 곳이 수십 군데 있으며 모두 장점과 문제점이 있습니다. Visual Studio Code의 전체 기능을 제공하고 내 프로젝트가 버전 제어에 있기 때문에 이 방법을 정말 좋아합니다. 나는 모든 코드를 소유하고 있으며 원할 때마다 다운로드할 수 있습니다. 나는 또한 다른 사람들이 그것을 분기하고 변경하도록 허용할 수 있습니다.

이러한 기능 중 다수는 다른 플랫폼에서도 사용할 수 있으며 코드를 작성할 때 프로젝트 결과를 즉시 확인할 수 있다는 점이 정말 마음에 듭니다. 그러나 이것은 어쨌든 대부분의 작업에 필요한 단 한 번의 로그인만 요구하는 훌륭한 엔드 투 엔드 솔루션처럼 느껴집니다. 부수적으로 브라우저의 VS Code 내에서 프로젝트를 즉시 표시하려면 Codeswing 확장을 설치할 수도 있습니다.