Skip to content

Commit 97434e3

Browse files
Update to 4 in STEP and README.md
1 parent 25d19d7 commit 97434e3

File tree

2 files changed

+50
-43
lines changed

2 files changed

+50
-43
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: 49 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -16,77 +16,84 @@ _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.
5849
1. Click the **Create codespace on main** button.
5950

6051
> Wait about **2 minutes** for the codespace to spin itself up.
6152
62-
1. Verify your codespace is running, as you did previously.
63-
1. The `codespace.md` file should show up in the VS Code editor.
64-
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:
6554

66-
This will add a VS Code extension as well as open a file on start up of the codespace.
55+
![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png)
6756

68-
Next lets add some code to run upon creation of the codespace!
57+
1. From inside the codespace in the VS Code explorer window, create a new file `setup.sh`.
58+
1. Add the following code inside of the file:
6959

70-
### :keyboard: Activity: Execute code upon creation of the codespace
60+
```bash
61+
#!/bin/bash
7162

72-
1. Edit the `.devcontainer/devcontainer.json` file.
73-
1. Add the following postCreateCommand to the body of the file before the last `}`.
63+
sudo apt-get update
64+
sudo apt-get install sl
65+
```
66+
67+
1. Save the file.
68+
> **Note**: The file should autosave.
69+
1. Commit the file changes. From the VS Code terminal enter:
7470

75-
```jsonc
76-
,
77-
"postCreateCommand": "echo '# Writing code upon codespace creation!' >> codespace.md"
71+
```shell
72+
git add setup.sh --chmod=+x
73+
git commit -m "Adding setup.sh from the codespace!"
7874
```
7975

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

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

9299
<footer>

0 commit comments

Comments
 (0)