31:Tabc,### Step 1: Creating a `deploy.yml` file for deployment We need to create a new file called `deploy.yml` inside of our project. This `deploy.yml` must be created inside of a bunch of new, nested directories in your project. Here's an example of what that should look like (note the new `.github/` directory):

${render_filetree({
    ".git/": null,
    ".gitignore": null,
    "node_modules/": null,
    ".github/": {
      "workflows/": {
        "deploy.yml": null
      }
    },
    "src/": {
      "index.md": null,
      "iris.md": null,
      "quotes.md": null,
      "notebook.md": null,
      "guide.md": null,
      "styling.md": null,
      "components/": { "unique.js": null, "quotes.js": null },
      "data": { "iris.csv": null },
    },
    "package.json": null,
    "package-lock.json": null,
    "README.md": null,
    "observablehq.config.js": null
})}

Inside the new file, you must populate it with the following code **exactly**:

name: Deploy

on:
  # Run this workflow whenever a new commit is pushed to main.
  push: {branches: [main]}
  # Run this workflow once per day, at 10:15 UTC
  schedule: [{cron: "15 10 * * *"}]
  # Run this workflow when triggered manually in GitHub’s UI.
  workflow_dispatch: {}

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Checkout Repo Content
        uses: actions/checkout@v4
      
      - name: Setup Python
        uses: actions/setup-python@v5
        with:
          python-version: '3.10'
    
      - name: Install Python Dependencies
        run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt

      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v4
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

${comment(html`This deploy.yml is actually different from the file provided by Observable's official guide for deployment. This file is modified to install the necessary Python packages needed by our Python data loader, which we implemented in the previous guide. Notice the steps "Setup Python" and "Install Python Dependencies" in the code above.`)}32:T749,## 2. Preparing your Online Repository for Github Pages When you push your changes to your repository, a new step occurs: a new Github Action is launched! You can check it running by navigating to your Github repository online and navigating to the following page: ${await FileAttachment("github_actions.png").image({width:500})} This runs because of the new `deploy.yml` file. `.yml` files placed inside of `.github/workflows/` will be checked by your repository and will instantiate new actions based on the provided files. In fact, you can utilize this system to automate a bunch of stuff, such as running validation checks or updating other systems connected to your repository. In this case, we are running a workflow Action that generates a new build online and pushes that build to Github Pages (hence why we recommended building a version locally to confirm if it works first). Now, we just need to make sure that Github Pages is referring to the correct build. 1. Navigate to "Settings" in your Github repository: ${await FileAttachment("settings.png").image({width:450})} | 2. Under "Code and automation", navigate to "Pages": ${await FileAttachment("pages.png").image({width:200})} 3. Modify the setting so that the "Source" is set to "Github Actions": ${await FileAttachment("gh_source.png").image({width:200})} After this, and after your new Action finishes running (times may vary depending on how big your project is), you can see if your project runs correctly: ${await FileAttachment("gh_url.png").image({width:600})}

[NOTE]: If you want, you can actually check out the demo we've generated throughout all our guides here: https://kimryan0416.github.io/Observable-Framework-Demo/.

33:[{"id":"447a8a781f18822d0a6579a69417ddbd4f39d186867e3c1e3e8acb58cab193d2e95fc69f94e48231329ddf786c51a598172139d68fad8cbd086540789acbfbb0","href":"https://static.observableusercontent.com/files/447a8a781f18822d0a6579a69417ddbd4f39d186867e3c1e3e8acb58cab193d2e95fc69f94e48231329ddf786c51a598172139d68fad8cbd086540789acbfbb0","name":"gh_source.png","type":"image/png","lastModified":1760831021732.339,"size":242668},{"id":"11ddbe9a4f9f4fa34beeeaa30630043b38e8fdd1b56b278cd42e78a1701adec5a9e244e5655f4d3c2814228711e453efed0d84a919ac5cc00025ae238fd1593f","href":"https://static.observableusercontent.com/files/11ddbe9a4f9f4fa34beeeaa30630043b38e8fdd1b56b278cd42e78a1701adec5a9e244e5655f4d3c2814228711e453efed0d84a919ac5cc00025ae238fd1593f","name":"gh_url.png","type":"image/png","lastModified":1760831141123.773,"size":218583},{"id":"1002259d68ea06e0f32ac433a3c0c6ea87ed45c73e45ba351609cf36faed33cf180b8d4fc67e4fc4e3f8e2b05b86a5895e18f26bac3a6fd2b9a28778500585c5","href":"https://static.observableusercontent.com/files/1002259d68ea06e0f32ac433a3c0c6ea87ed45c73e45ba351609cf36faed33cf180b8d4fc67e4fc4e3f8e2b05b86a5895e18f26bac3a6fd2b9a28778500585c5","name":"github_actions.png","type":"image/png","lastModified":1760830712899.879,"size":383308},{"id":"c8a76b43c404db877c7c644eaa71f130a2ca3b53931c095ae76ddbc7c8fc1de072e476640c8ef1de228cda4447088b1b596601469cf2c0a3d76020e413ea1691","href":"https://static.observableusercontent.com/files/c8a76b43c404db877c7c644eaa71f130a2ca3b53931c095ae76ddbc7c8fc1de072e476640c8ef1de228cda4447088b1b596601469cf2c0a3d76020e413ea1691","name":"pages.png","type":"image/png","lastModified":1760743524556.36,"size":219142},{"id":"cb9f61db419777839c14dac9a32dff4540dd741bcb62e59aac16a1bd6941aca070cdded0a9d2a4d5d87260b86aa825e24455b488fc2fa6c9b0fe770d18ec207e","href":"https://static.observableusercontent.com/files/cb9f61db419777839c14dac9a32dff4540dd741bcb62e59aac16a1bd6941aca070cdded0a9d2a4d5d87260b86aa825e24455b488fc2fa6c9b0fe770d18ec207e","name":"settings.png","type":"image/png","lastModified":1760743427975.231,"size":128793}] 2f:{"title":"Framework Guide #6: Deploying to Github Pages","cells":[{"id":0,"value":"# Framework Guide #6: Deploying to Github Pages\n\n

Feel free to refer to [_this Github Repository_](https://github.com/kimryan0416/Observable-Framework-Demo), which contains the _Framework_ project that this guide is based off of.

\n\nPreviously, we:\n\n1. [_set up our Framework project_](https://observablehq.com/@rk2546/guide-local_observable_setup),\n2. [_covered project structure_](https://observablehq.com/@rk2546/guide-project_structure),\n3. [_imported functions and modules from NPM and Observable_](https://observablehq.com/@rk2546/guide-imports),\n4. [_styled our project_](https://observablehq.com/@rk2546/guide-styling_themes), and\n5. [_implemented data loaders_](https://observablehq.com/@rk2546/guide-data_loaders).\n\nIn this guide, we'll ensure that your project can be deployed to [Github Pages](https://docs.github.com/en/pages). This allows you to host your projects via Github as independent websites. Much of this guide is ","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"### How Github Pages works\n\nGithub Pages is a system where web applications and websites can be hosted via Github for free. Github Pages are built off of Github repositories, meaning that you can use a repository as the core back-end of your website.\n\nIn a majority of cases, programmers must _build_ a website, dashboard, or web application first. Github pages effectively hosts these builds, rather than the raw code itself. This is the same regardless if you are using _Node.js_, _Angular_, _React.js_, or _Framework_. This guide will instruct you on how to build a dashboard build using _Framework_.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"## 1. Preparing your Project for Deployment","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"### Step 2: Create a build (optional, but recommended)\n\nBefore you actually push anything to Github, make sure that you have a runnable build of your dashboard. To create this, run the following command:\n\n

\nnpm run build\n

\n\nThis creates a new directory `dist/` that contains a standalone HTML-based website derived from the contents in your `src/` directory. If you want to test it out for yourself, you can run the build by using the following command:\n\n

\nnpx http-server dist\n

\n\nThis hosts your `dist/` directory as a localhost website - just navigate to the localhost URL provided after running the above command.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"### Step 3: Commit and push your changes\n\nThis is simple: just push all your changes to your repository. Make sure you include the `deploy.yml` file.","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"## What's Next?\n\nIf you want to go professional and generate a completely custom domain for your web application, you can do so! We won't cover it here, but there are [other guides](https://hossainkhan.medium.com/using-custom-domain-for-github-pages-86b303d3918a) for this step.\n\nOtherwise, feel free to check out any other guides we've written about _Framework_:\n\n${framework_guides}\n\n### Additional Resources\n\n- [Github Pages](https://docs.github.com/en/pages)\n- [Observable's Guide for Deployment](https://observablehq.com/framework/deploying)\n- [An alternative method for setting up Github Pages](https://medium.com/@dr.junghoonson/configuring-github-pages-for-deployment-ready-website-with-observable-framework-43c08b74ba45)\n- [About Python and R data loaders and Github Pages](https://talk.observablehq.com/t/deploying-observable-framework-on-github-pages-with-r-and-python-as-data-loaders/9043/5)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import { css, render_filetree, framework_guides, comment } from '@rk2546/2025-infovis-cse_notebook-gallery';","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"css","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}