diff --git a/.github/steps/-step.txt b/.github/steps/-step.txt index 573541a..d00491f 100644 --- a/.github/steps/-step.txt +++ b/.github/steps/-step.txt @@ -1 +1 @@ -0 +1 diff --git a/README.md b/README.md index 5e34903..019ac84 100644 --- a/README.md +++ b/README.md @@ -16,49 +16,69 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_ -## Welcome +## Step 1: Create your first codespace and push code -GitHub Codespaces is a development environment that's hosted in the cloud. +_Welcome to "Develop code using GitHub Codespaces and Visual Studio Code"! :wave:_ -- **Who this is for**: Developers, DevOps Engineers, Engineering Managers, Product Managers. -- **What you'll learn**: How to create a codespace, push code from a codespace, select a custom image, and customize a codespace. -- **What you'll build**: A codespace with devcontainer.json files, customizations, and personalizations. -- **Prerequisites**: If you need to learn about Visual Studio Code, read [Visual Studio Code Docs](https://code.visualstudio.com/docs) first. -- **How long**: This course can be completed in less than an hour. +**What's the big deal about using a codespace for software development?** A codespace is a development environment that's hosted in the cloud. You can customize your project for GitHub Codespaces by committing configuration files to your repository (also known as configuration-as-code), which creates a repeatable codespace configuration for all users of your project. Each codespace you create is hosted by GitHub in a Docker container that runs on a virtual machine. You can choose the type of machine you want to use depending on the resources you need. -In this course, you will: +GitHub offers a range of features to help your development team customize a codespace to reach peak configuration and performance needs. For example, you can: -1. Create your first codespace -2. Add a custom image -3. Customize your codespace -4. Personalize your codespace +- Create a codespace from your repository. +- Push code from the codespace to your repository. +- Use VS Code to develop code. +- Customize the codespace with custom images. +- Manage the codespace. -### How to start this course +To begin developing using GitHub Codespaces, you can create a codespace from a template or from any branch or commit in a repository. When you create a codespace from a template, you can start from a blank template or choose a template suitable for the work you're doing. - +### :keyboard: Activity: Start a codespace + +**We recommend opening another browser tab to work through the following activities so you can keep these instructions open for reference.** + +1. Start from the landing page of your repository. +1. Click the green **Code** button located in the middle of the page. +1. Select the **Codespaces** tab in the box that pops up and then click the **Create codespace on main** button. + + > Wait about 2 minutes for the codespace to spin itself up. + > **Note**: It's a virtual machine spinning up in the background. + +1. Verify your codespace is running. The browser should contain a VS Code web-based editor and a terminal should be present such as the below: + ![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png) + +### :keyboard: Activity: Push code to your repository from the codespace + +1. From inside the codespace in the VS Code explorer window, select the `index.html` file. +1. Replace the **h1** header with the below: + + ```html +

Hello from the codespace!

+ ``` + +1. Save the file. + > **Note**: The file should autosave. +1. Use the VS Code terminal to commit the file change by entering the following commit message: + + ```shell + git commit -a -m "Adding hello from the codespace!" + ``` + +1. Push the changes back to your repository. From the VS Code terminal, enter: -[![start-course](https://user-images.githubusercontent.com/1221423/235727646-4a590299-ffe5-480d-8cd5-8194ea184546.svg)](https://github.com/new?template_owner=skills&template_name=code-with-codespaces&owner=%40me&name=skills-code-with-codespaces&description=My+clone+repository&visibility=public) + ```shell + git push + ``` -1. Right-click **Start course** and open the link in a new tab. -2. In the new tab, most of the prompts will automatically fill in for you. - - For owner, choose your personal account or an organization to host the repository. - - We recommend creating a public repository, as private repositories will [use Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions). - - Scroll down and click the **Create repository** button at the bottom of the form. -3. After your new repository is created, wait about 20 seconds, then refresh the page. Follow the step-by-step instructions in the new repository's README. +1. Your code has been pushed to your repository! +1. Switch back to the homepage of your repository and view the `index.html` to verify the new code was pushed to your repository. +1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.