Adding a GitHub Codespace button to your README

GitHub Codespaces is a great way to make it easier for people to contribute to your project. With a few clicks, folks can spin up a Codespace environment with all necessary tooling installed and be productive right away. But it does take a few clicks and this quick post is to show how you can save developers a click or two because every click matters 😆

With one line of markdown in your README, you can add a button that looks like this...

To add the button, you'll first need to get your GitHub repo's ID. The GitHub repo ID is not obvious to find, but you can use the GitHub CLI to retrieve it.

Run a command like this from the root of your repo and make sure to replace Azure-Samples/aks-store-demo with your org/repo.

gh api repos/Azure-Samples/aks-store-demo --jq '.id'

From there, all you need to do is add the following line to your README, like this...

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=648726487)

Notice the query parameters ref and repo in the URL above. Make sure you replace 648726487 in the code above with your repo's ID and set ref to whatever branch you want to open the Codespace in as it will currently open in the main branch.

That's it! Now when someone visits your repo, they'll see a button at the top of the README that they can simply click to open a Codespace for your repo. 🎉