Skip to content

Commit

Permalink
Update to 1 in STEP and README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
github-actions committed Jan 30, 2024
1 parent 31298d9 commit 15014fc
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 34 deletions.
2 changes: 1 addition & 1 deletion .github/steps/-step.txt
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0
1
86 changes: 53 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,49 +16,69 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_
</header>

<!--
<<< Author notes: Course start >>>
Include start button, a note about Actions minutes,
and tell the learner why they should take the course.
<<< Author notes: Step 1 >>>
Choose 3-5 steps for your course.
The first step is always the hardest, so pick something easy!
Link to docs.github.com for further explanations.
Encourage users to open new tabs for steps!
-->

## Welcome
## Step 1: Create your first codespace and push code

GitHub Codespaces is a development environment that's hosted in the cloud.
_Welcome to "Develop code using GitHub Codespaces and Visual Studio Code"! :wave:_

- **Who this is for**: Developers, DevOps Engineers, Engineering Managers, Product Managers.
- **What you'll learn**: How to create a codespace, push code from a codespace, select a custom image, and customize a codespace.
- **What you'll build**: A codespace with devcontainer.json files, customizations, and personalizations.
- **Prerequisites**: If you need to learn about Visual Studio Code, read [Visual Studio Code Docs](https://code.visualstudio.com/docs) first.
- **How long**: This course can be completed in less than an hour.
**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.

In this course, you will:
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:

1. Create your first codespace
2. Add a custom image
3. Customize your codespace
4. Personalize your codespace
- Create a codespace from your repository.
- Push code from the codespace to your repository.
- Use VS Code to develop code.
- Customize the codespace with custom images.
- Manage the codespace.

### How to start this course
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.

<!-- For start course, run in JavaScript:
'https://github.com/new?' + new URLSearchParams({
template_owner: 'skills',
template_name: 'code-with-codespaces',
owner: '@me',
name: 'skills-code-with-codespaces',
description: 'My clone repository',
visibility: 'public',
}).toString()
-->
### :keyboard: Activity: Start a codespace

**We recommend opening another browser tab to work through the following activities so you can keep these instructions open for reference.**

1. Start from the landing page of your repository.
1. Click the green **Code** button located in the middle of the page.
1. Select the **Codespaces** tab in the box that pops up and then click the **Create codespace on main** button.

> Wait about 2 minutes for the codespace to spin itself up.
> **Note**: It's a virtual machine spinning up in the background.
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)

### :keyboard: Activity: Push code to your repository from the codespace

1. From inside the codespace in the VS Code explorer window, select the `index.html` file.
1. Replace the **h1** header with the below:

```html
<h1>Hello from the codespace!</h1>
```

1. Save the file.
> **Note**: The file should autosave.
1. Use the VS Code terminal to commit the file change by entering the following commit message:

```shell
git commit -a -m "Adding hello from the codespace!"
```

1. Push the changes back to your repository. From the VS Code terminal, enter:

[![start-course](https://user-images.githubusercontent.com/1221423/235727646-4a590299-ffe5-480d-8cd5-8194ea184546.svg)](https://github.com/new?template_owner=skills&template_name=code-with-codespaces&owner=%40me&name=skills-code-with-codespaces&description=My+clone+repository&visibility=public)
```shell
git push
```

1. Right-click **Start course** and open the link in a new tab.
2. In the new tab, most of the prompts will automatically fill in for you.
- For owner, choose your personal account or an organization to host the repository.
- We recommend creating a public repository, as private repositories will [use Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions).
- Scroll down and click the **Create repository** button at the bottom of the form.
3. After your new repository is created, wait about 20 seconds, then refresh the page. Follow the step-by-step instructions in the new repository's README.
1. Your code has been pushed to your repository!
1. Switch back to the homepage of your repository and view the `index.html` to verify the new code was pushed to your repository.
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.

<footer>

Expand Down

0 comments on commit 15014fc

Please sign in to comment.