Github + Copilot = Disposable Websites

Now that GitHub has Copilot available to use directly in your web browser, anyone with any level of coding experience can quickly and easily create a disposable website. Need to have a one-off site for an event, create a way to help your kid study for their big test, or make a shopping list? Now you can simply create a website to handle it for you.

Github provides all the pieces to make it simple to do:

1. Storage for the code
2. Tool to build the code using AI
3. Host and live URL link to share with anyone

Step-by-step guide to creating your own website using GitHub and Copilot (note this website is not affiliated with GitHub or Copilot and provides no guarantees that these instructions will work or be updated at any point)

Step 1: Create your github account.

Go to github.com and click the sign in link in the top right. Then click the create account link

Step 2: Create your first project.

For disposable websites we will create a repository for each site. For this example create a repository called addition. To do that click the create repository button on the left side. Then put in addition for the name and give it a description. Leave it public for this example repository.

Step 3: Start a coding session to create the website

Click the create a codespace button to open the tool that will let you use copilot to build the website.

Click the copilot button that looks like a frog.

In the chat input:

Create a simple javascript website that will be published using github actions. The website will use new age styling and will be a simple addition tester. It will show 2 numbers below 100 and have an input field to put in an answer. There will be a next button. After 10 test questions it will show the results and have a restart button.

copilot should create the full website along with configuration to publish the app to github pages. It will probably put it in a sub directory so you will need to move everything up to the root of the project or the .github folder will not be picked up correctly.

Click the source control tab on the left side. Add a commit message and click the commit button. Then click the sync button to push up to github.

Step 4: Setup the github pages settings so it will publish

Go back to the main repository page.

Click the settings tab

Click Actions->General

At the bottom change the workflow permissions to both read and write.

Click the Actions tab

Click on the failed job

Click the re-run job button

It should pass this time

Click the settings tab again

Click the Pages settings tab

Change the branch dropdown to gh-pages

Click Save

Go back to the actions tab

The pages deploy action should have shown up.

Click on the deploy pipelin

Click the link in the pipeline

https://useaitolearn.github.io/addition/

When I tried this it failed to work. The test didn’t show up and the buttons didn’t work.

Step 4: Debug the issues.

Tell copilot what is wrong with the page.

Looks like the 2 numbers did not show up and the buttons didn't work. Can you fix?

There will be code blocks in the chat. Click the apply button in the top right of the code blocks to get them to apply

Go back to the source control tab and commit and sync the changes.

On the actions tab it will publish again.

Once it finishes go back to the published page. You may need to force a full reload using shift+F5 to see the changes

You may have to repeat Step 4 a few times to get the website working

Step 5: Add new features to the app

Just ask copilot to add a new feature by describing it to copilot and it should be able to add it pretty easily.