Giter Club home page Giter Club logo

docs's Introduction

GitHub Docs

This repository contains the documentation website code and Markdown source files for docs.github.com.

GitHub's Docs team works on pre-production content in a private repo that regularly syncs with this public repo.

Use the table of contents icon on the top left corner of this document to get to a specific section of this guide quickly.

Contributing

See the contributing guide for detailed instructions on how to get started with our project.

We accept different types of contributions, including some that don't require you to write a single line of code.

On the GitHub Docs site, you can click the make a contribution button to open a PR(Pull Request) for quick fixes like typos, updates, or link fixes.

For more complex contributions, you can open an issue using the most appropriate issue template to describe the changes you'd like to see. By this way you can also be a part of Open source contributor's community without even writing a single line of code.

If you're looking for a way to contribute, you can scan through our existing issues for something to work on. When ready, check out Getting Started with Contributing for detailed instructions.

Join us in discussions

We use GitHub Discussions to talk about all sorts of topics related to documentation and this site. For example: if you'd like help troubleshooting a PR, have a great new idea, or want to share something amazing you've learned in our docs, join us in the discussions.

And that's it!

If you're having trouble with your GitHub account, contact Support.

That's how you can easily become a member of the GitHub Documentation community. โœจ

READMEs

In addition to the README you're reading right now, this repo includes other READMEs that describe the purpose of each subdirectory in more detail: You can go through among them for specified details regarding the topics listed below.

License

The GitHub product documentation in the assets, content, and data folders are licensed under a CC-BY license.

All other code in this repository is licensed under the MIT license.

When you are using the GitHub logos, be sure to follow the GitHub logo guidelines.

Thanks ๐Ÿ’œ

Thanks for all your contributions and efforts towards improving the GitHub documentation. We thank you being part of our โœจ community โœจ ! title: Quickstart for Codespaces intro: 'Try out {% data variables.product.prodname_codespaces %} in 5 minutes.' allowTitleToDifferFromFilename: true product: '{% data reusables.gated-features.codespaces %}' versions: fpt: '' ghec: '' type: quick_start topics:

  • Codespaces redirect_from:
  • /codespaces/codespaces-quickstart

Introduction

In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace.

From this quickstart, you will learn how to create a codespace, connect to a forwarded port to view your running application, use version control in a codespace, and personalize your setup with extensions.

For more information on exactly how {% data variables.product.prodname_codespaces %} works, see the companion guide "Deep dive into {% data variables.product.prodname_codespaces %}."

Creating your codespace

  1. Navigate to the template repository and select Use this template.

  2. Name your repository, select your preferred privacy setting, and click Create repository from this template.

  3. Navigate to the main page of the newly created repository. Under the repository name, use the {% octicon "code" aria-label="The code icon" %} Code drop-down menu, and in the Codespaces tab, click {% octicon "plus" aria-label="The plus icon" %} New codespace.

New codespace button

Running the application

Once your codespace is created, your repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

  1. Since this example uses a Node.js project, start the application by entering npm run dev in the terminal. This command executes the dev script in the package.json file and starts up the web application defined in the sample repository.

    npm run dev in terminal

    If you're following along with a different application type, enter the corresponding start command for that project.

  2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to forward that port so you can connect to it.

Port forwarding toast

  1. Click Open in Browser to view your running application in a new tab.

Edit the application and view changes

  1. Switch back to your codespace and open the haikus.json file by double-clicking it in the File Explorer.

  2. Edit the text field of the first haiku to personalize the application with your own haiku.

  3. Go back to the running application tab in your browser and refresh to see your changes.

{% octicon "light-bulb" aria-label="The lightbulb icon" %} If you've closed the tab, open the Ports panel and click the Open in browser icon for the running port. Port Forwarding Panel

Committing and pushing your changes

Now that you've made a few changes, you can use the integrated terminal or the source view to commit and push the changes back to the remote.

{% data reusables.codespaces.source-control-display-dark %}

  1. To stage your changes, click + next to the file you've changed, or next to Changes if you've changed multiple files and you want to stage them all. Source control side bar with staging button highlighted
  2. Type a commit message describing the change you've made. Source control side bar with a commit message
  3. To commit your staged changes, click the check mark at the top the source control side bar. Click the check mark icon
    You can push the changes you've made. This applies those changes to the upstream branch on the remote repository. You might want to do this if you're not yet ready to create a pull request, or if you prefer to create a pull request on {% data variables.product.prodname_dotcom %}.
  4. At the top of the side bar, click the ellipsis (...). Ellipsis button for View and More Actions
  5. In the drop-down menu, click Push.

Personalizing with an extension

Within a codespace, you have access to the Visual Studio Code Marketplace. For this example, you'll install an extension that alters the theme, but you can install any extension that is useful for your workflow.

  1. In the left sidebar, click the Extensions icon.

  2. In the search bar, enter fairyfloss and install the fairyfloss extension.

Add an extension

  1. Select the fairyfloss theme by selecting it from the list.

Select the fairyfloss theme

  1. Changes you make to your editor setup in the current codespace, such as theme and keyboard bindings, are synced automatically via Settings Sync to any other codespaces you open and any instances of Visual Studio Code that are signed into your GitHub account.

Next Steps

You've successfully created, personalized, and run your first application within a codespace but there's so much more to explore! Here are some helpful resources for taking your next steps with {% data variables.product.prodname_codespaces %}.

Further reading

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.