DEV Community

Cover image for Deploy Your First Website without Leaving Your IDE
Rizèl Scarlett for GitHub

Posted on • Updated on


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:

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

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:

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

Top comments (12)

blake_seipler_9a529405ec1 profile image
Blake Seipler

This looks great! Thanks!

khokon profile image
Khokon M.

Great work 👏

nancybennetts profile image
Nancy Bennetts

Woow. Thanks!

johannesmogashoa profile image
Johannes Mogashoa

This is super cool man I won't lie. Just a question, why extension over like a command line tool?

blackgirlbytes profile image
Rizèl Scarlett

Thanks! It’s for a resume building workshop for people learning to code. Usually, the command line is another hurdle for folks that are just learning HTML and CSS.

khulyso12 profile image

Very usefull,thank you.

zepef profile image
Pierre-Emmanuel FEGA

Excellent, I love it. Bravo !

cetinogut profile image
Cetin OGUT

Very good and informative. Thanks.

drfcozapata profile image
Francisco Zapata

VScode let you create a new repository without open GitHub in a Web client, directly from itself. That complement this information and make it really cool.
Thanks a lot! Blessings from Venezuela.

blackgirlbytes profile image
Rizèl Scarlett

I forgot you can do that in VS Code! Love that it works well for your use case.

tykok profile image

Very usefull, i'm gonna use it for a project ;)

pwong09 profile image

so useful!!

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.