Quickstart for GitHub Codespaces

Get started with GitHub Codespaces quickly.

이 문서의 내용

Note

GitHub Codespaces는 octocorp.ghe.com과 같은 GHE.com의 하위 도메인에서는 사용할 수 없습니다.

Introduction

In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace. You'll work in the browser version of Visual Studio Code, which is initially the default editor for GitHub Codespaces. After trying out this quickstart you can use Codespaces in other editors, and you can change the default editor. Links are provided at the end of this guide.

From this quickstart, you'll learn how to create a codespace, connect to a forwarded port to view your running application, publish your codespace to a new repository, and personalize your setup with extensions.

For more information on exactly how GitHub Codespaces works, see the companion guide Deep dive into GitHub Codespaces.

Creating your codespace

  1. Navigate to the github/haikus-for-codespaces template repository.

  2. 이 템플릿 사용을 클릭한 다음, codespace에서 열기를 클릭합니다.

    "이 템플릿 사용" 단추와 "codespace에서 열기" 옵션을 표시하도록 확장된 드롭다운 메뉴의 스크린샷.

Running the application

Once your codespace is created, the template repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

  1. When the terminal becomes available, enter the command npm run dev. This example uses a Node.js project, and this command runs the script labeled "dev" in the package.json file, which starts up the web application defined in the sample repository.

    Screenshot of the Terminal in VS Code with the "npm run dev" command entered.

    If you're following along with a different application type, enter the corresponding start command for that project.

  2. When your application starts, the codespace recognizes the port the application is running on and displays a pop-up message to let you know that the port has been forwarded.

    Screenshot of the pop-up message: "Your application running on port 3000 is available." Below this is a green button, labeled "Open in Browser."

  3. Click Open in Browser to view your running application in a new tab.

Edit the application and view changes

  1. Switch back to your codespace and open the haikus.json file by clicking it in the Explorer.

  2. Edit the text field of the first haiku to personalize the application with your own haiku.

  3. Go back to the running application tab in your browser and refresh to see your changes.

    If you've closed the browser tab, click the Ports tab in VS Code, hover over the Local Address value for the running port, and click the Open in Browser icon.

    Screenshot of the "Ports" panel. The "Ports" tab and a globe icon, which opens the forwarded port in a browser, are highlighted with orange outlines.

Committing and pushing your changes

Now that you've made a few changes, you can use the integrated terminal or the source view to publish your work to a new repository.

  1. 작업 표시줄에서 Source Control(원본 제어) 보기를 클릭합니다.

    소스 제어 단추가 주황색 윤곽선으로 강조 표시된 VS Code 작업 표시줄의 스크린샷.

  2. To stage your changes, click next to the haikus.json file, or next to Changes if you've changed multiple files and you want to stage them all.

    Screenshot of the "Source control" side bar with the staging button (a plus sign), to the right of "Changes," highlighted with a dark orange outline.

  3. To commit your staged changes, type a commit message describing the change you've made, then click Commit.

    Screenshot of the "Source control" side bar. The commit message, "Change haiku text and styles," and the "Commit" button are outlined in orange.

  4. Click Publish Branch.

    Screenshot of the "Source control" side bar showing the "Publish Branch" button.

  5. In the "Repository Name" dropdown, type a name for your new repository, then select Publish to GitHub private repository or Publish to GitHub public repository.

    Screenshot of the repository name dropdown in VS Code. Two options are shown, for publishing to a private or a public repository.

    The owner of the new repository will be the GitHub account with which you created the codespace.

  6. In the pop-up that appears in the lower right corner of the editor, click Open on GitHub to view the new repository on GitHub. In the new repository, view the haikus.json file and check that the change you made in your codespace has been successfully pushed to the repository.

    Screenshot of a confirmation message for a successfully published repository, showing the "Open on GitHub" button.

Personalizing with an extension

When you connect to a codespace using the browser, or the Visual Studio Code desktop application, you can access the Visual Studio Code Marketplace directly from the editor. For this example, you'll install a VS Code extension that alters the theme, but you can install any extension that's useful for your workflow.

  1. In the Activity Bar, click the Extensions icon.

    Screenshot of the Activity Bar. The Extensions icon is highlighted with an orange outline.

  2. In the search bar, type fairyfloss and click Install.

    Screenshot of "Extensions: Marketplace". The search box shows "fairyfloss." The results show the "fairyfloss" extension with an "Install" button.

  3. Select the fairyfloss theme by selecting it from the list.

    Screenshot of the "Select Color Theme" dropdown, with the "fairyfloss" theme selected.

About Settings Sync

You can enable Settings Sync to sync extensions and other settings across devices and instances of VS Code. 동기화된 설정은 클라우드에 캐시됩니다. 설정 동기화가 codespace에서 켜져 있으면 codespace의 설정에 대한 모든 업데이트가 클라우드로 푸시되고 다른 위치에서 클라우드로 푸시하는 모든 업데이트가 codespace로 끌어와집니다. For more information, see 계정에 맞게 GitHub Codespaces 개인 설정.

Next steps

You've successfully created, personalized, and run your first application within a codespace but there's so much more to explore! Here are some helpful resources for taking your next steps with GitHub Codespaces.

Further reading