From d7dfdc0a62f34a20c07b7acade939ed395177ade Mon Sep 17 00:00:00 2001 From: github-actions Date: Thu, 2 Nov 2023 20:14:07 +0000 Subject: [PATCH] Update to 4 in STEP and README.md --- .github/steps/-step.txt | 2 +- README.md | 91 ++++++++++++++++++++++------------------- 2 files changed, 50 insertions(+), 43 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 2f52c67..0c9a3b1 100644 --- a/README.md +++ b/README.md @@ -16,77 +16,84 @@ _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. 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: - This will add a VS Code extension as well as open a file on start up of the codespace. + ![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png) -Next lets add some code to run upon creation of the codespace! +1. From inside the codespace in the VS Code explorer window, create a new file `setup.sh`. +1. Add the following code inside of the file: -### :keyboard: Activity: Execute code upon creation of the codespace + ```bash + #!/bin/bash -1. Edit the `.devcontainer/devcontainer.json` file. -1. Add the following postCreateCommand to the body of the file before the last `}`. + sudo apt-get update + sudo apt-get install sl + ``` + +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 + /usr/games/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.