{"id":1454,"date":"2025-10-24T22:38:54","date_gmt":"2025-10-24T22:38:54","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/all-things-azure\/?p=1454"},"modified":"2025-10-24T22:38:54","modified_gmt":"2025-10-24T22:38:54","slug":"your-6-step-guide-to-deploying-a-website-with-github-codespaces-and-copilot-agent-mode","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/all-things-azure\/your-6-step-guide-to-deploying-a-website-with-github-codespaces-and-copilot-agent-mode\/","title":{"rendered":"Your 6-Step Guide to Deploying a Website with GitHub Codespaces and Copilot agent mode"},"content":{"rendered":"<div style=\"text-align: center;\">\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-content\/uploads\/sites\/83\/2025\/10\/chat-conversation-1.png\" alt=\"chat conversation image\" width=\"442\" height=\"438\" \/><\/p>\n<\/div>\n<p><!--ScriptorStartFragment-->\ud83d\udc4beveryone! Shree here. I&#8217;m sure many of you have had a similar chat with someone you know. We often hesitate to celebrate our achievements because of social perceptions around self-promotion. I believe it\u2019s time to challenge that mindset. Building a personal site is about owning your narrative and showcasing your work with pride. In this post, I\u2019ll show you how to launch your very first personal site (or, a portfolio piece) using GitHub Pages, a simple way to host a static website directly from GitHub. You\u2019ll learn how to create a remote repository, store your site\u2019s code, and deploy it to the web. Plus, I\u2019ll share tips on using <a href=\"https:\/\/github.com\/features\/codespaces\">GitHub Codespaces<\/a> and <a href=\"https:\/\/github.blog\/ai-and-ml\/github-copilot\/agent-mode-101-all-about-github-copilots-powerful-mode\/\">GitHub Copilot agent mode<\/a> to speed up your workflow and get things done faster. By the end, you\u2019ll gain confidence to have a live site and the confidence to share your story with the world.<!--ScriptorEndFragment--><\/p>\n<h3>Prerequisites<\/h3>\n<p><!--ScriptorStartFragment--><\/p>\n<div class=\"scriptor-paragraph\">GitHub account with a Free or Pro plans. If you don\u2019t have one, refer <a href=\"https:\/\/docs.github.com\/en\/get-started\/onboarding\/getting-started-with-your-github-account#1-creating-an-account\"><span role=\"link\">Creating an account<\/span><\/a> to sign up for an account.<\/div>\n<h3>From Code to Live: The Codespaces and Copilot agent mode workflow for launching a website<\/h3>\n<p>I created a public remote repository, <code class=\"language-PlainText\">shchinnasamy.github.io<\/code>. I chose to add a <code class=\"language-PlainText\">README<\/code> and appropriate license type. You must set the repository to Public to publish your site. Unless you have GitHub Pro, you can only publish a GitHub page if the repository is public. Keep this in mind if you don\u2019t want to share your site\u2019s source code publicly. Refer <a href=\"https:\/\/docs.github.com\/en\/repositories\/creating-and-managing-repositories\/creating-a-new-repository\">Creating a new repository<\/a> to learn more about creating a new repository.<\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/mVnwBpAAo40?si=GJAFsSx3XQIs3K80\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>In my case, I liked the style of <a href=\"https:\/\/jonbarron.info\/\"><span role=\"link\">Jon Barron<\/span><\/a>&#8216;s public academic website. So, I cloned the <a href=\"https:\/\/github.com\/jonbarron\/jonbarron.github.io\"><span role=\"link\">source code<\/span><\/a> of Jon Barron&#8217;s website and customized them. Thanks much, Jon! I cloned Jon\u2019s website source code repository to a GitHub Codespaces and not to my local computer. This eliminated the tedious setup of a local development environment and got me to a working state faster. Refer <a href=\"https:\/\/docs.github.com\/en\/repositories\/creating-and-managing-repositories\/cloning-a-repository#cloning-a-repository\"><span role=\"link\">Cloning a repository<\/span><\/a> to learn how to clone a repository from <a href=\"http:\/\/github.com\/\"><span role=\"link\">GitHub.com<\/span><\/a> to a Codespaces.<!--ScriptorStartFragment--><!--ScriptorEndFragment--><!--ScriptorEndFragment--><\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/hJeEYkBDFk0?si=c3SNGTj2A5GvD368\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>I used GitHub Copilot Chat in GitHub to understand the structure of the cloned repository. Refer <a href=\"https:\/\/docs.github.com\/en\/copilot\/how-tos\/use-chat\/use-chat-in-github#submitting-a-question-to-copilot-chat\">Submitting a question to Copilot Chat<\/a> to learn more.<\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/5qGPTtGxNjQ?si=d6eHWlLlXU4V-2B3\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Now that I\u2019ve a grip on how Jon\u2019s website is structured, I\u2019ll walk you through how I customized it for my website. I used Copilot agent mode and handed a high-level natural language prompt. I recorded a clip of how Copilot autonomously planned the steps, selected the right files, runs command, and iterated on code edits until the task is complete. In other words, Copilot made changes to files such as <code class=\"language-PlainText\">index.html<\/code> and CNAME, files\/directories to be deleted etc. Should you need to learn more about other Copilot chat modes, refer our colleague, Ashley\u2019s <a href=\"https:\/\/www.notion.so\/Your-6-Step-Guide-to-Deploying-a-Website-with-GitHub-Codespaces-and-Copilot-agent-mode-2678f46d7aed80a49bdff27c45ef2eec?pvs=21\">Copilot ask, edit, and agent modes: What they do and when to use them<\/a> blog post.<\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/FacnahcfkVc?si=bLKR7NvsYJVZSoeI\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>As a final touch, I finished by updating my <code class=\"language-PlainText\">index.html, README<\/code>and uploaded a headshot and logos to the <code class=\"language-PlainText\">\/images<\/code> directory.<\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/DObs6dUsfKI?si=QouTXe1-dde_mosO\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Now that my remote repository is ready with my website\u2019s code and files, I proceed to deploy to the web with GitHub. I configured GitHub Pages site to publish when changes are pushed to a specific branch (in my case, <code class=\"language-PlainText\">\/main<\/code>branch). GitHub Pages are one of the best features of GitHub. It is a service that allows you to host a static website directly from a GitHub repository. This means you can use your repository to store your website\u2019s code and files, and GitHub will automatically publish them as a website you can access online. On that note, I now have a personal (and secure) GitHub Pages site at <code class=\"language-PlainText\"><code class=\"language-PlainText\">https:\/\/shchinnasamy.github.io<\/code><\/code><\/p>\n<p style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/6txrBL_3pxw?si=xjF7ZnIkRxFrPDmB\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>(Optional) While I ignored, you can change the root of the site&#8217;s URL from the default, like <code class=\"language-PlainText\">shchinnasamy.github.io<\/code>, to any domain you own. Refer <a href=\"https:\/\/docs.github.com\/en\/pages\/configuring-a-custom-domain-for-your-github-pages-site\/about-custom-domains-and-github-pages\">About custom domains and GitHub Pages<\/a> to learn more.<\/p>\n<div class=\"scriptor-paragraph\">By following these six steps, I was able to quickly deploy my personal website using GitHub Pages, Codespaces, and Copilot agent mode. The combination of these powerful tools made the process straightforward and enjoyable, even for a beginner. From setting up the repository to customizing the template and configuring my domain, each step was manageable with the right guidance. Now I have a professional-looking website that I can continue to develop and improve over time.<\/div>\n<div><\/div>\n<h3>Onward<\/h3>\n<div class=\"scriptor-paragraph\">Ready to create your own website? Sign up for a GitHub account today and follow these steps to get your personal site up and running in no time. Remember, you don&#8217;t need advanced coding skills or expensive hosting services to establish your online presence. With GitHub&#8217;s suite of tools, you can focus on creating content while the platform handles the technical aspects of deployment. Share your journey with us in the comments below or reach out if you have any questions about your GitHub Pages implementation!<!--ScriptorEndFragment--><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc4beveryone! Shree here. I&#8217;m sure many of you have had a similar chat with someone you know. We often hesitate to celebrate our achievements because of social perceptions around self-promotion. I believe it\u2019s time to challenge that mindset. Building a personal site is about owning your narrative and showcasing your work with pride. In this [&hellip;]<\/p>\n","protected":false},"author":188662,"featured_media":1512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[35,1,38,20,19],"tags":[],"class_list":["post-1454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-agents","category-azure","category-app-development","category-developer-productivity","category-github-copilot"],"acf":[],"blog_post_summary":"<p>\ud83d\udc4beveryone! Shree here. I&#8217;m sure many of you have had a similar chat with someone you know. We often hesitate to celebrate our achievements because of social perceptions around self-promotion. I believe it\u2019s time to challenge that mindset. Building a personal site is about owning your narrative and showcasing your work with pride. In this [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/posts\/1454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/users\/188662"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/comments?post=1454"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/posts\/1454\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/media\/1512"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/media?parent=1454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/categories?post=1454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/all-things-azure\/wp-json\/wp\/v2\/tags?post=1454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}