From 6fee62164f9d592dec8881786f279a4f950ae8a9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 6 Dec 2024 12:14:28 +0000 Subject: [PATCH] Update to 4 in STEP and README.md --- .github/steps/-step.txt | 2 +- README.md | 96 +++++++++++++++++++++-------------------- 2 files changed, 51 insertions(+), 47 deletions(-) diff --git a/.github/steps/-step.txt b/.github/steps/-step.txt index 00750ed..b8626c4 100644 --- a/.github/steps/-step.txt +++ b/.github/steps/-step.txt @@ -1 +1 @@ -3 +4 diff --git a/README.md b/README.md index 90d0a7f..77523b7 100644 --- a/README.md +++ b/README.md @@ -16,81 +16,85 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_ -## Step 3: Customize your codespace! +## Step 4: Personalize your codespace! -_Nice work! :tada: You created a codespace with a custom image!_ +_Nicely done customizing your codespace!_ :partying_face: -You can customize your codespace by adding VS code extensions, adding features, setting host requirements, and much more. +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`. -Let's customize some settings in the `devcontainer.json` file! +`Dotfiles` will be the focus of this activity. -### :keyboard: Activity: Add customizations to the `devcontainer` file +**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. -1. Navigate to the `.devcontainer/devcontainer.json` file. -1. Add the following customizations to the body of the file before the last `}`. +Let's see how this works! - ```jsonc - , - // Add the IDs of extensions you want installed when the container is created. - "customizations": { - "vscode": { - "extensions": [ - "GitHub.copilot" - ] - }, - "codespaces": { - "openFiles": [ - "codespace.md" - ] - } - } - ``` +### :keyboard: Activity: Enable a `dotfile` for your codespace + +1. Start from the landing page of your repository. +1. In the upper-right corner of any page, click your profile photo, and then click **Settings**. +1. In the **Code, planning, and automation** section of the sidebar, click **Codespaces**. +1. Under **Dotfiles**, select **Automatically install dotfiles** so that GitHub Codespaces automatically installs your dotfiles into every new codespace you create. +1. Click **Select repository** and then choose your current skills working repository as the repository from which to install dotfiles. -1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**. -1. Create a new codespace by navigating to the landing page of your repository. +### :keyboard: Activity: Add a `dotfile` to your repository and run your codespace + +1. Start from the landing page of your repository. 1. Click the **Code** button located in the middle of the page. 1. Click the **Codespaces** tab on the box that pops up. -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). - - > **Tip**: To stop an active codespace, click the **•••** next to **●Active** and select **Stop codespace** from the menu. - 1. Click the **Create codespace on main** button. > Wait about **2 minutes** for the codespace to spin itself up. -1. Verify your codespace is running, as you did previously. -1. The `codespace.md` file should show up in the VS Code editor. -1. The `copilot` extension should show up in the VS Code extension list. +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) - This will add a VS Code extension as well as open a file on start up of the codespace. +1. From inside the codespace in the VS Code explorer window, create a new file `setup.sh`. +1. Enter the following code into the file: -Next lets add some code to run upon creation of the codespace! + ```bash + #!/bin/bash -### :keyboard: Activity: Execute code upon creation of the codespace + sudo apt-get update + sudo apt-get install sl + echo "export PATH=\$PATH:/usr/games" >> ~/.bashrc + ``` -1. Edit the `.devcontainer/devcontainer.json` file. -1. Add the following postCreateCommand to the body of the file before the last `}`. +1. Save the file. + > **Note**: The file should autosave. +1. Commit the file changes. From the VS Code terminal enter: - ```jsonc - , - "postCreateCommand": "echo '# Writing code upon codespace creation!' >> codespace.md" + ```shell + git add setup.sh --chmod=+x + git commit -m "Adding setup.sh from the codespace!" ``` -1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**. -1. Create a new codespace by navigating to the landing page of your repository. -1. Click the **Code** button located in the middle of the page. -1. Click the **Codespaces** tab on the box that pops up. +1. Push the changes back to your repository. From the VS Code terminal, enter: + + ```shell + git push + ``` + +1. Switch back to the homepage of your repository and view the `setup.sh` to verify the new code was pushed to your repository. +1. Close the codespace web browser tab. 1. Click the **Create codespace on main** button. > Wait about **2 minutes** for the codespace to spin itself up. 1. Verify your codespace is running, as you did previously. -1. Verify the `codespace.md` file now has the text `Writing code upon codespace creation!`. +1. Verify the `setup.sh` file is present in your VS Code editor. +1. From the VS Code terminal, type or paste: + + ```shell + sl + ``` + +1. Enjoy the show! 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.