Skip to content

Commit 247dbe6

Browse files
Update to 4 in STEP and README.md
1 parent 00253a0 commit 247dbe6

File tree

2 files changed

+51
-47
lines changed

2 files changed

+51
-47
lines changed

.github/steps/-step.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
3
1+
4

README.md

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -16,81 +16,85 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_
1616
</header>
1717

1818
<!--
19-
<<< Author notes: Step 3 >>>
19+
<<< Author notes: Step 4 >>>
2020
Start this step by acknowledging the previous step.
2121
Define terms and link to docs.github.com.
2222
-->
2323

24-
## Step 3: Customize your codespace!
24+
## Step 4: Personalize your codespace!
2525

26-
_Nice work! :tada: You created a codespace with a custom image!_
26+
_Nicely done customizing your codespace!_ :partying_face:
2727

28-
You can customize your codespace by adding VS code extensions, adding features, setting host requirements, and much more.
28+
When using any development environment, customizing the settings and tools to your preferences and workflows is an important step. GitHub Codespaces offers two main ways of personalizing your codespace: `Settings Sync` with VS Code and `dotfiles`.
2929

30-
Let's customize some settings in the `devcontainer.json` file!
30+
`Dotfiles` will be the focus of this activity.
3131

32-
### :keyboard: Activity: Add customizations to the `devcontainer` file
32+
**What are `dotfiles`?** Dotfiles are files and folders on Unix-like systems starting with . that control the configuration of applications and shells on your system. You can store and manage your dotfiles in a repository on GitHub.
3333

34-
1. Navigate to the `.devcontainer/devcontainer.json` file.
35-
1. Add the following customizations to the body of the file before the last `}`.
34+
Let's see how this works!
3635

37-
```jsonc
38-
,
39-
// Add the IDs of extensions you want installed when the container is created.
40-
"customizations": {
41-
"vscode": {
42-
"extensions": [
43-
"GitHub.copilot"
44-
]
45-
},
46-
"codespaces": {
47-
"openFiles": [
48-
"codespace.md"
49-
]
50-
}
51-
}
52-
```
36+
### :keyboard: Activity: Enable a `dotfile` for your codespace
37+
38+
1. Start from the landing page of your repository.
39+
1. In the upper-right corner of any page, click your profile photo, and then click **Settings**.
40+
1. In the **Code, planning, and automation** section of the sidebar, click **Codespaces**.
41+
1. Under **Dotfiles**, select **Automatically install dotfiles** so that GitHub Codespaces automatically installs your dotfiles into every new codespace you create.
42+
1. Click **Select repository** and then choose your current skills working repository as the repository from which to install dotfiles.
5343

54-
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
55-
1. Create a new codespace by navigating to the landing page of your repository.
44+
### :keyboard: Activity: Add a `dotfile` to your repository and run your codespace
45+
46+
1. Start from the landing page of your repository.
5647
1. Click the **Code** button located in the middle of the page.
5748
1. Click the **Codespaces** tab on the box that pops up.
58-
1. Ensure the number of active codespaces does not reach the maximum (typically 2). For more information, see [understanding the codespace lifecycle](https://docs.github.com/en/codespaces/getting-started/understanding-the-codespace-lifecycle).
59-
60-
> **Tip**: To stop an active codespace, click the **•••** next to **<span>&#x25cf;</span>Active** and select **Stop codespace** from the menu.
61-
6249
1. Click the **Create codespace on main** button.
6350

6451
> Wait about **2 minutes** for the codespace to spin itself up.
6552
66-
1. Verify your codespace is running, as you did previously.
67-
1. The `codespace.md` file should show up in the VS Code editor.
68-
1. The `copilot` extension should show up in the VS Code extension list.
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+
55+
![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png)
6956

70-
This will add a VS Code extension as well as open a file on start up of the codespace.
57+
1. From inside the codespace in the VS Code explorer window, create a new file `setup.sh`.
58+
1. Enter the following code into the file:
7159

72-
Next lets add some code to run upon creation of the codespace!
60+
```bash
61+
#!/bin/bash
7362

74-
### :keyboard: Activity: Execute code upon creation of the codespace
63+
sudo apt-get update
64+
sudo apt-get install sl
65+
echo "export PATH=\$PATH:/usr/games" >> ~/.bashrc
66+
```
7567

76-
1. Edit the `.devcontainer/devcontainer.json` file.
77-
1. Add the following postCreateCommand to the body of the file before the last `}`.
68+
1. Save the file.
69+
> **Note**: The file should autosave.
70+
1. Commit the file changes. From the VS Code terminal enter:
7871

79-
```jsonc
80-
,
81-
"postCreateCommand": "echo '# Writing code upon codespace creation!' >> codespace.md"
72+
```shell
73+
git add setup.sh --chmod=+x
74+
git commit -m "Adding setup.sh from the codespace!"
8275
```
8376

84-
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
85-
1. Create a new codespace by navigating to the landing page of your repository.
86-
1. Click the **Code** button located in the middle of the page.
87-
1. Click the **Codespaces** tab on the box that pops up.
77+
1. Push the changes back to your repository. From the VS Code terminal, enter:
78+
79+
```shell
80+
git push
81+
```
82+
83+
1. Switch back to the homepage of your repository and view the `setup.sh` to verify the new code was pushed to your repository.
84+
1. Close the codespace web browser tab.
8885
1. Click the **Create codespace on main** button.
8986

9087
> Wait about **2 minutes** for the codespace to spin itself up.
9188
9289
1. Verify your codespace is running, as you did previously.
93-
1. Verify the `codespace.md` file now has the text `Writing code upon codespace creation!`.
90+
1. Verify the `setup.sh` file is present in your VS Code editor.
91+
1. From the VS Code terminal, type or paste:
92+
93+
```shell
94+
sl
95+
```
96+
97+
1. Enjoy the show!
9498
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.
9599

96100
<footer>

0 commit comments

Comments
 (0)