2a:null 2b:["$","title",null,{"children":"Deploying to GitHub Pages | Steve Oney | Observable"}] 30:T581,md`## Web Server in a Nutshell

What does it mean to deploy a website? In order for others to visit your website, you need to upload the webpage resources to a [web server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server) from your local environment. A web server has to store the website's files, namely all HTML documents and their related assets, including images, CSS stylesheets, JavaScript files, fonts, and video. At the most basic level, whenever a browser needs a file that is hosted on a web server, the browser requests the file via the [HTTP protocol](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview). The web server finds the requested document, and sends it back to the browser, also through HTTP.

There are two types of web servers -- static web servers and dynamic web servers. A static web server sends its hosted files as-is to your browser, while a dynamic web server runs "applications" that update the hosted files before sending content to your browser. ### Optional Readings - [How the Web Works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) `31:T525,md` ### Step 4. Add a file to the staging environment A staging step in git allows you to continue making changes to the working directory, and when you decide you wanna interact with version control, it allows you to record changes in small commits. Before that, let's observe what happened after we made the edits in step 3. #### Check the current status - Go to the Source Control panel to check the current changes.

- You can also do this by using the command \`git status\`.

#### Stage the changes Next, let's tell git to stage the changes. This means that git knows about the change, but it is not permanent in the repository. The next commit will include the changes staged. - Go to the Source Control panel and click on the Stage Changes button (the "+" button). - You can stage all changed files at the same time or one by one.

- You can also do this by using the command \`git add\`. - \`git add $FILE_NAME\` stages changes in one file. - \`git add .\` stages all changed files.

`32:T49f,md` ### Step 6. Create a new repository on GitHub If you only want to keep track of your code locally, you don't need to use GitHub. But if you want to work with a team or publish the project on GitHub Pages, you can use GitHub to host the project's code. To create a new repo on GitHub, log in and go to the [GitHub home page](https://github.com/). You can find the “New repository” option under the “+” sign next to your profile picture, in the top right corner of the navbar. - GitHub will ask you to name your repo and provide a brief description, as well as a few options. - Public -- Anyone on the internet can see this repository. You choose who can commit. - Private -- You choose who can see and commit to this repository.

- After creating the repo on GitHub, it would return a repository link. Let's follow the instruction to push an existing repository. - You can do this from the VSCode command line: - \`git remote add origin $URL\` - You can also do this from the Source Control panel.

`33:T4ec,md`### Step 8. Publish on GitHub Pages To [publish the project on GitHub Pages](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages), let's go to the Setting on the GitHub project repo. Under Options, you will find the GitHub Pages section. Select the branch and entry folder for your GitHub Pages site, and save the setting. Then you will see a notification -- "Your site is ready to be published at $URL".

You can check the demo page here: https://littleaprilfool.github.io/SI-579-demo/index.html. #### Custom Domains By default, your GitHub Page will be published at \`https://.github.io/\`. You can also create a user site on GitHub Page by naming your repo as \`.github.io\` -- which means that others can directly visit \`https://.github.io/\`. GitHub Pages supports using custom domains, or changing the root of your site's URL from the default, like \`octocat.github.io\`, to [any domain you own](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site).

`34:T6e8,md`## Giving your site a domain name In order to use a custom domain for your site, you will need to buy a domain name first from domain name registrars. To name a few: - [Google Domains](https://domains.google/) - [GoDaddy](https://www.godaddy.com/) - [NameCheap](https://www.namecheap.com/) GitHub offers the [GitHub Student Developer Pack](https://education.github.com/pack/offers) which includes one year free domain name registration on the \`.me\` TLD on NameCheap. We will demonstrate how to do this. - Submit the [GitHub Student Benefits Application](https://education.github.com/discount_requests/student_application) using your UMich email. This usually takes a day or two to get approved. - Once you are approved, go to [GitHub Student Developer Pack](https://education.github.com/pack) and click on \`Get your pack\`.

- Find the NameCheap offer, click on \`Get access using your unique link\`

- This would redirect you to the NameCheap website. Let's search for an available domain name.

- Put it to the cart, complete the order

- Complete the process by verifying the email link. It may take long to receive the email verification since NameCheap is verifying your student email account, hang in there. - Last but not the least, don't forget to put your domain name under the GitHub Page setting. - 🚀 Our new domain is launched: http://um-si579.me/ `35:[{"id":"dd8ad6e49ee537e78debfcc58a5e9bff85bd1ca9aa428e26ec3a69e60f652f345446fd29e7392c6612144f850adc278daa2cbd0d9880e69733ed00e5ddeb8b9d","href":"https://static.observableusercontent.com/files/dd8ad6e49ee537e78debfcc58a5e9bff85bd1ca9aa428e26ec3a69e60f652f345446fd29e7392c6612144f850adc278daa2cbd0d9880e69733ed00e5ddeb8b9d","name":"image@8.png","type":"image/png","lastModified":1609957394924.978,"size":30242},{"id":"07705ee350fd9dd85cf5c96454e20af65ac5812e67cd6d1079bfaf9ab08c92127c31a15cf617d74b0796e4fedcc22ef9ccc5d80d01f18086584f8dec379e6d50","href":"https://static.observableusercontent.com/files/07705ee350fd9dd85cf5c96454e20af65ac5812e67cd6d1079bfaf9ab08c92127c31a15cf617d74b0796e4fedcc22ef9ccc5d80d01f18086584f8dec379e6d50","name":"image@18.png","type":"image/png","lastModified":1609957394924.978,"size":133994},{"id":"5f5a37f75c8c0d6059b0aa58f8be078f739dfaf66b25299c8161b2d4cb788caf0911c852ad7154c2e011519803f960f6fc29ccc95663f31f68e8fd725ad87014","href":"https://static.observableusercontent.com/files/5f5a37f75c8c0d6059b0aa58f8be078f739dfaf66b25299c8161b2d4cb788caf0911c852ad7154c2e011519803f960f6fc29ccc95663f31f68e8fd725ad87014","name":"image@17.png","type":"image/png","lastModified":1609957394924.978,"size":450038},{"id":"733ca8ddc590f0b63a92cf01c93a624b2a60f6dc04883e0de9fa1bfe40620b985996b2d8d9972711e51bb7ec3c038661069279fbe7859fcfba55ed3f82e1ef83","href":"https://static.observableusercontent.com/files/733ca8ddc590f0b63a92cf01c93a624b2a60f6dc04883e0de9fa1bfe40620b985996b2d8d9972711e51bb7ec3c038661069279fbe7859fcfba55ed3f82e1ef83","name":"image@16.png","type":"image/png","lastModified":1609957394924.978,"size":144559},{"id":"2167034d8e79e88323663273491a41db936e57c46c73995e9493ad6c3ef9440611234138103aef56b7b5c0bef989140730ac6c1af838dacad6cb4fc56c9f1f89","href":"https://static.observableusercontent.com/files/2167034d8e79e88323663273491a41db936e57c46c73995e9493ad6c3ef9440611234138103aef56b7b5c0bef989140730ac6c1af838dacad6cb4fc56c9f1f89","name":"image@15.png","type":"image/png","lastModified":1609957394924.978,"size":36678},{"id":"0725c89891612a030e7b26f55559229b58a238723e3eb523cc554cb0a27cd86663befc3bdcf83c92c2f6166b1fcadfef81d4b58c5f31228f9023896867ae205f","href":"https://static.observableusercontent.com/files/0725c89891612a030e7b26f55559229b58a238723e3eb523cc554cb0a27cd86663befc3bdcf83c92c2f6166b1fcadfef81d4b58c5f31228f9023896867ae205f","name":"image@14.png","type":"image/png","lastModified":1609957394924.978,"size":137808},{"id":"0321fd988265caa2e4b9cb28f2e763dc2e93e2b48d8cdd5b41b7fc0ad4a307f64720ddc6fd17ded1f7c72a87a9afc0ec9a56522e1fbd1517f9b10590d685aeab","href":"https://static.observableusercontent.com/files/0321fd988265caa2e4b9cb28f2e763dc2e93e2b48d8cdd5b41b7fc0ad4a307f64720ddc6fd17ded1f7c72a87a9afc0ec9a56522e1fbd1517f9b10590d685aeab","name":"image@13.png","type":"image/png","lastModified":1609957394924.978,"size":121737},{"id":"cd77158607ec47013bf85750c9e5bdd640103a3f1811c2689504a749acefc6cc3a9de41ff18e081718310df294ca93ae8b2a7cb958c0d3a0b92b83f5d681c34f","href":"https://static.observableusercontent.com/files/cd77158607ec47013bf85750c9e5bdd640103a3f1811c2689504a749acefc6cc3a9de41ff18e081718310df294ca93ae8b2a7cb958c0d3a0b92b83f5d681c34f","name":"image@12.png","type":"image/png","lastModified":1609957394924.978,"size":97102},{"id":"3d987123b1b7ecd8fd0c0fb2254e3348760bd049a730e41d1b742f26827e037db66e9a16626918ae26b440b65d485a3cf7b592b34b63308592c9a01059f75469","href":"https://static.observableusercontent.com/files/3d987123b1b7ecd8fd0c0fb2254e3348760bd049a730e41d1b742f26827e037db66e9a16626918ae26b440b65d485a3cf7b592b34b63308592c9a01059f75469","name":"image@11.png","type":"image/png","lastModified":1609957394924.978,"size":567978},{"id":"9896d18e5e3b0c2c35d2f69de204cd11aa40299681b633423bd33b823ab3958742e268257b63915716f42e24161a4ef01370f68409836697e5e9acae4420bee6","href":"https://static.observableusercontent.com/files/9896d18e5e3b0c2c35d2f69de204cd11aa40299681b633423bd33b823ab3958742e268257b63915716f42e24161a4ef01370f68409836697e5e9acae4420bee6","name":"image@1.png","type":"image/png","lastModified":1609957394924.978,"size":196489},{"id":"c24290e97bb791bb831528b3abf18c563abf6e5d0da882c7fdd1e6a14cec1b99c28036f03c9965afbf659009bf04ce8e7c85ab236fa571982a80afda70664174","href":"https://static.observableusercontent.com/files/c24290e97bb791bb831528b3abf18c563abf6e5d0da882c7fdd1e6a14cec1b99c28036f03c9965afbf659009bf04ce8e7c85ab236fa571982a80afda70664174","name":"image.png","type":"image/png","lastModified":1609957394924.978,"size":173895},{"id":"f828cec130d9cdb31811d1ad3e6746ef466a973b7ddeeb08632d78c85b585517a919f1f3da143b6fd53c5c4e852686c03125c4242957e8d2e55eeb1fb2b9c3eb","href":"https://static.observableusercontent.com/files/f828cec130d9cdb31811d1ad3e6746ef466a973b7ddeeb08632d78c85b585517a919f1f3da143b6fd53c5c4e852686c03125c4242957e8d2e55eeb1fb2b9c3eb","name":"image@7.png","type":"image/png","lastModified":1609957394924.978,"size":66625},{"id":"f9760af3d1fe4e22a3f9d00230bf618f245a585ccc1de891bc70f641e05e9a3189d53969bca4a1e3d303911965927dafea04432eefdacbbec46fa8d555dde578","href":"https://static.observableusercontent.com/files/f9760af3d1fe4e22a3f9d00230bf618f245a585ccc1de891bc70f641e05e9a3189d53969bca4a1e3d303911965927dafea04432eefdacbbec46fa8d555dde578","name":"image@6.png","type":"image/png","lastModified":1609957394924.978,"size":35588},{"id":"73a28c5dea91c1c08a1451da3ee264db79a5f9bd91ff3b9e84dea13efdba2ad5bd1d94e252e2905dde0e957cba3c22b7b61f8c49fe44815d410e6a2de9799be0","href":"https://static.observableusercontent.com/files/73a28c5dea91c1c08a1451da3ee264db79a5f9bd91ff3b9e84dea13efdba2ad5bd1d94e252e2905dde0e957cba3c22b7b61f8c49fe44815d410e6a2de9799be0","name":"image@5.png","type":"image/png","lastModified":1609957394924.978,"size":308930},{"id":"3a507d7d0110fd7a8e7fb41c61ddc9858f50bf2e9d26b0a7d22e7bbc4f8c0cb8d6b6723141b54e85fe422c1bda010372083efcc6265ea4ce86c51f553826819c","href":"https://static.observableusercontent.com/files/3a507d7d0110fd7a8e7fb41c61ddc9858f50bf2e9d26b0a7d22e7bbc4f8c0cb8d6b6723141b54e85fe422c1bda010372083efcc6265ea4ce86c51f553826819c","name":"image@4.png","type":"image/png","lastModified":1609957394924.978,"size":97744},{"id":"e33ec90ec672c329add95f30f65f55e0e07ea2f2c178ffb315ceab088d69958a50190d62fd87985044caf68865cc6769633b3042da39388fd6a0a5df37402669","href":"https://static.observableusercontent.com/files/e33ec90ec672c329add95f30f65f55e0e07ea2f2c178ffb315ceab088d69958a50190d62fd87985044caf68865cc6769633b3042da39388fd6a0a5df37402669","name":"image@3.png","type":"image/png","lastModified":1609957394924.978,"size":467218},{"id":"145ad57f43bcd75194c09936cdcac5b88a176e4cf5d361103314abf92361fa343db4df27ab1e0b89f8d9bb145c2d83259bea628e03cf598c868132e2b9d83617","href":"https://static.observableusercontent.com/files/145ad57f43bcd75194c09936cdcac5b88a176e4cf5d361103314abf92361fa343db4df27ab1e0b89f8d9bb145c2d83259bea628e03cf598c868132e2b9d83617","name":"image@20.png","type":"image/png","lastModified":1609957394924.978,"size":136175},{"id":"2b9774e52f0d54f62549115067ecb1d1d6ed30339346ce10837f3b22e620e6db3f4035a2ec6e2bb8f74b688afd5dc12208d7e8c3f47be00c16e8cf9db2f10dd4","href":"https://static.observableusercontent.com/files/2b9774e52f0d54f62549115067ecb1d1d6ed30339346ce10837f3b22e620e6db3f4035a2ec6e2bb8f74b688afd5dc12208d7e8c3f47be00c16e8cf9db2f10dd4","name":"image@19.png","type":"image/png","lastModified":1609957394924.978,"size":162649},{"id":"8f9416e5e5de67e191f4705d4213c29d072d5ce77648e13b7dc622902891a0c79263f8543671f521500b1d36559d0396bbd8c38e43739f77835b16b8f9100c74","href":"https://static.observableusercontent.com/files/8f9416e5e5de67e191f4705d4213c29d072d5ce77648e13b7dc622902891a0c79263f8543671f521500b1d36559d0396bbd8c38e43739f77835b16b8f9100c74","name":"image@9.png","type":"image/png","lastModified":1609957394924.978,"size":208683}] 2e:{"id":"34c2fdf2a7efcf7f","slug":"deploying-to-github-pages","title":"Deploying to GitHub Pages","thumbnail":"f12e762d588ee96328c1aa535a56d59493d96fd58d3b98eb98593dc1f7901a38","access_level":"public","create_time":"$D2020-12-30T19:27:23.595Z","update_time":"$D2023-10-02T17:43:33.985Z","view_time":null,"first_public_time":"$D2020-12-30T19:31:31.138Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":28,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Deploying to GitHub Pages","cells":[{"id":0,"value":"md`# Deploying to GitHub Pages\nNow that you have learned how to create a basic webpage, let take a look at how to publish it online so that others can find it.\nThere are many different ways to publish a website. In this note, we will teach you how to deploy the webpage to GitHub Pages.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`## GitHub Pages\n\nGitHub is a \"social coding\" site where users can store and sync their local code projects to the cloud repositories using version control management.\nUsers can view, comment, and collaborate on code projects. \n\nGitHub Pages is a free service provided by GitHub.\nIt allows users to host website code live on GitHub's web server.\nMany programmers use GitHub Pages to host API documentations, demonstrations, and personal webpages.\n\nYou can find a collection of example GitHub Pages [here](https://github.com/collections/github-pages-examples).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`\n> **Git and GitHub**\n>\n> A quick aside: Git and GitHub are **not** the same thing. Git is an open-source, version control tool while GitHub is a code repository platform that integrate with git. You do not need GitHub to use git, but you cannot use GitHub without using git. There are many other alternatives to GitHub, such as GitLab, BitBucket, and “host-your-own” solutions such as gogs and gittea.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`## Deploy on GitHub Pages\nRemember that a web server stores the website's files, including all HTML files and their related assets.\nSo in order to deploy on GitHub Pages, we need to first \"upload\" the files to GitHub.\n\nThere are several approaches to \"upload\" files to GitHub.\nWe will first present how to do this using the built-in git bindings with VSCode.\nOptionally, you can also use command lines or [GitHub Desktop](https://desktop.github.com/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`\n### Prerequisite\n\n1. A GitHub account\n2. Visual Studio Code Editor: we will use the built-in Git bindings with the Visual Studio Code Editor.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`\n### Step 1. Installing Git\n\nFirst, you would need to install Git in your local environment.\n\n- Mac OS Installer: https://sourceforge.net/projects/git-osx-installer/\n- Windows Installer: https://git-scm.com/download/win\n- Others: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`\n### Step 2. Creating a Local Git Repository\n\n- Open the project folder in VS Code\n- Go to the Source Control panel\n- Initialize repository.\n

\n\nThis can also be done by using the following command in the terminal.\n\n- Go to VS Code Menu bar\n- Open Terminal\n- Type \\`git init\\`\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`\n### Step 3. Add a New File to the Repo\n\nNow let's make some edits in your project folder by adding a new HTML file and a Markdown file.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`\n### Step 5. Create a commit\n\nNow let’s commit the staged changes to the repository.\n\n- You can do this by clicking the checkmark (✓) in the Source Control panel.\n - You will need to input a commit message. Writing a meaningful commit message is a good practice to document your project.\n

\n\n- You can also do this by the command line.\n - \\`git commit -m \"add the index page\"\\`\n\nAfter committing the staged changes, you will see the following messages under \\`git status\\`.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`\n### Step 7. Push the Commits to GitHub\n\n- Use the following command to push the commits to GitHub\n - \\`git push origin master\\`\n

\n\nNow you can see the files on the GitHub repo.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`\n## (Optional) Working with GitHub Desktop\n[GitHub Desktop](https://desktop.github.com/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n## (Optional) Advanced Readings on Git\n\nIf you are new to Git, the [git-scm website](https://git-scm.com/doc) is a good place to start with [a popular online book](https://git-scm.com/book/en/v2), [Getting Started videos](https://git-scm.com/video/what-is-git) and [cheat sheets](https://training.github.com/downloads/github-git-cheat-sheet.pdf).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"