Deploy Your First Website without Leaving Your IDE

Why I built It

I built a VS Code Extension that deploys code to GitHub Pages.

I’ve always wanted to build a VS code extension, but I never had a reason or enough time. Now that I work in DevRel at GitHub, I finally got the opportunity to do so! The Microsoft VS Code team runs a resume website workshop where participants deploy a resume built with HTML and CSS to GitHub Pages.

I collaborated with the VS Code team to create a VS Code Extension that enables you to quickly deploy your static web page (Jekyll or HTML) to GitHub Pages without leaving your IDE.

My two favorite things are making a positive impact and experimenting with technologies I haven’t used!

How it works

There’s still room for improvement with the user experience and the workflow. Still, for my initial iteration to deploy your code to GitHub Pages using the extension I built, you can take the following steps:

Create a repository. In the screenshot below, I created a repository called ghpages-into-the-spiderverse

Image description

Create an index.html file at the very least. You can add CSS and JavaScript, too. For this blog post, I will create an HTML file. I created a file called index.html with an h1 element that includes a quote from the movie Spiderman: Intro to Spiderverse and an image from the movie as well.

Image description

Don’t forget to commit your file. The screenshot below indicates that I clicked the “Commit new file” button to commit my newly created index.html file.

Image description

Install the VS Code extension called “Deploy to GitHub Pages.” To find the extension, I clicked the extensions icon in Visual Studio Code and searched for “Deploy to GitHub Pages.” I pressed install for that particular extension.

Image description

Open the search bar to search for new files. You can do this through the following methods:
- Using Go to File, which is under the Go menu
- Using this keyboard shortcut on Windows Ctrl+p or Ctrl+e
- Using this keyboard shortcut on macOS Cmd ⌘+p
- Using this keyboard shortcut on Linux Ctrl+p or Ctrl+e

Image description

Trigger the extension by typing “>” in the search bar. If it works correctly, you should see the words “Deploy to GitHub Pages” as shown in the image below.

Image description

Once you choose the “Deploy to GitHub Pages”, you will receive a prompt to sign into GitHub.

Image description

After you complete the authentication process, your IDE will reveal a dropdown with your ten most recently created repositories. In the screenshot, my “ghpages-into-the-spiderverse” repository is at the top of the list.

Image description

After choosing the repository, “ghpages-into-the-spiderverse”, a toast message appears, prompting me to publish the repository to GitHub Pages. Click the “Publish” button to confirm that you want to deploy the repository to GitHub Pages.

Image description

The toast will update with a message that your site will go live in a few minutes.

Image description

Check the Actions logs for progress. GitHub Pages uses an action to build and deploy the site. If you see all green checkmarks, like the image below, your site is live!

Image description

Click the URL for your website and check out your new static site hosted on GitHub Pages. You can find my website at this link: https://blackgirlbytes.github.io/ghpages-into-the-spiderverse/

Image description

How I Built It

I wrote about the anatomy of my VS Code extension here.

Open to Contributions

Honestly, I didn’t invest as much time as I wanted into creating this extension. There’s room for improvement. I’m open to contributions in helping me improve my README, improving the workflow, and more. Feel free to open up an issue and a pull request in this repository: https://github.com/blackgirlbytes/vscodeextension-deploy-to-gh-pages

Tell me about your favorite VS Code extension in the comments below!

Deploy Your First Website without Leaving Your IDE

Comments

GitHub Tutorials

Use Copilot to Write and Translate a Binary Search Algorithm

More from this blog

Your AI Agent isn't an Engineer

What Text Area Popovers Taught Me About Browser APIs

A Beginner-Friendly Illustrated Guide to Verifiable Credentials

Shifting Loan Power to Borrowers

Developer Relations is an all-company effort

Why I built It

How it works

How I Built It

Open to Contributions

Command Palette

Comments

GitHub Tutorials

Use Copilot to Write and Translate a Binary Search Algorithm

More from this blog

Why I built It

How it works

How I Built It

Open to Contributions