Skip to content

Commit 19ac5e7

Browse files
Update to 2 in STEP and README.md
1 parent aa75951 commit 19ac5e7

File tree

2 files changed

+34
-44
lines changed

2 files changed

+34
-44
lines changed

.github/steps/-step.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1
1+
2

README.md

+33-43
Original file line numberDiff line numberDiff line change
@@ -16,68 +16,58 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_
1616
</header>
1717

1818
<!--
19-
<<< Author notes: Step 1 >>>
20-
Choose 3-5 steps for your course.
21-
The first step is always the hardest, so pick something easy!
22-
Link to docs.github.com for further explanations.
23-
Encourage users to open new tabs for steps!
19+
<<< Author notes: Step 2 >>>
20+
Start this step by acknowledging the previous step.
21+
Define terms and link to docs.github.com.
2422
-->
2523

26-
## Step 1: Create your first codespace and push code
24+
## Step 2: Add a custom image to your codespace!
2725

28-
_Welcome to "Develop code using GitHub Codespaces and Visual Studio Code"! :wave:_
26+
_Nice work! :tada: You created your first codespace and pushed code using VS Code!_
2927

30-
**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.
28+
You can configure the development container for a repository so that any codespace created for that repository will give you a tailored development environment, complete with all the tools and runtimes you need to work on a specific project.
3129

32-
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:
30+
**What are development containers?** Development containers, or dev containers, are Docker containers that are specifically configured to provide a fully featured development environment. Whenever you work in a codespace, you are using a dev container on a virtual machine.
3331

34-
- Create a codespace from your repository.
35-
- Push code from the codespace to your repository.
36-
- Use VS Code to develop code.
37-
- Customize the codespace with custom images.
38-
- Manage the codespace.
32+
A dev container file is a JSON file that lets you customize the default image that runs your codespace, VS code settings, run custom code, forward ports and much more!
3933

40-
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.
34+
Let's add a `devcontainer.json` file and add a custom image.
4135

42-
### :keyboard: Activity: Start a codespace
36+
### :keyboard: Activity: Add a .devcontainer.json file to customize your codespace
4337

44-
**We recommend opening another browser tab to work through the following activities so you can keep these instructions open for reference.**
38+
1. Navigating back to your **Code** tab of your repository, click the **Add file** drop-down button, and then click `Create new file`.
39+
1. Type or paste the following in the empty text field prompt to name your file.
4540

46-
1. Start from the landing page of your repository.
47-
1. Click the green **Code** button located in the middle of the page.
48-
1. Select the **Codespaces** tab in the box that pops up and then click the **Create codespace on main** button.
49-
50-
> Wait about 2 minutes for the codespace to spin itself up.
51-
> **Note**: It's a virtual machine spinning up in the background.
52-
53-
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:
54-
![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png)
41+
```
42+
.devcontainer/devcontainer.json
43+
```
5544

56-
### :keyboard: Activity: Push code to your repository from the codespace
45+
1. In the body of the new **.devcontainer/devcontainer.json** file, add the following content:
5746

58-
1. From inside the codespace in the VS Code explorer window, select the `index.html` file.
59-
1. Replace the **h1** header with the below:
47+
```jsonc
48+
{
49+
// Name this configuration
50+
"name": "Codespace for Skills!",
51+
// Use the base codespace image
52+
"image": "mcr.microsoft.com/vscode/devcontainers/universal:latest",
6053

61-
```html
62-
<h1>Hello from the codespace!</h1>
54+
"remoteUser": "codespace",
55+
"overrideCommand": false
56+
}
6357
```
6458

65-
1. Save the file.
66-
> **Note**: The file should autosave.
67-
1. Use the VS Code terminal to commit the file change by entering the following commit message:
59+
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
60+
1. Create a new codespace by navigating back to the **Code** tab of your repository.
61+
1. Click the green **Code** button located in the middle of the page.
62+
1. Click the **Codespaces** tab on the box that pops up.
63+
1. Click the **Create codespace on main** button OR click the `+` sign on the tab. This will create a new codespace on the main branch. (Notice your other codespace listed here.)
6864

69-
```shell
70-
git commit -a -m "Adding hello from the codespace!"
71-
```
65+
> Wait about **2 minutes** for the codespace to spin itself up.
7266
73-
1. Push the changes back to your repository. From the VS Code terminal, enter:
67+
1. Verify that your new codespace is running, as you did previously.
7468

75-
```shell
76-
git push
77-
```
69+
Note the image being used is the default image provided for GitHub Codespaces. It includes runtimes and tools for Python, Node.js, Docker, and more. See the full list here: https://aka.ms/ghcs-default-image. Your development team can use any custom image that has the necessary prerequisites installed. For more information, see [codespace image](https://aka.ms/configure-codespace).
7870

79-
1. Your code has been pushed to your repository!
80-
1. Switch back to the homepage of your repository and view the `index.html` to verify the new code was pushed to your repository.
8171
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.
8272

8373
<footer>

0 commit comments

Comments
 (0)