PyScript is a framework that allows writing Python code in HTML files. This directory shows detailed instructions on how to get started using PyScript for HTML and Python projects and deploy them to the web with Github Pages. To view PyScript documentation, visit their website: https://pyscript.net/ (1)

Materials

GitHub account
- Make an account: https://github.com/ (2)
Python
- Install Python: https://www.python.org/ (3)
HTML
Terminal, Powershell, Command Prompt or IDE (Optional)
- IDE stands for Integrated Development Environment. There are many different Integrated Development Environments that are created to give users a friendly user interface to write code for specific files. A recommended IDE is Visual Studio Code since it supports writing many files with different extensions, including Python and HTML files.
  Download Visual Studio Code: https://code.visualstudio.com/ (4)

How to Incorporate PyScript in HTML

HTML files most basic structure is two HTML tags and within the tags, include the following source code to incorporate PyScript:

<HTML>
    <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <head>
<HTML>

Now, incorporate "py-script" tags in the HTML file. Within the "py-script" tags, the HTML file can read and execute code written in Python.

<HTML>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>

  <body>
    <py-script>
      print("Hello World!")
    </py-script>
  </body>
</HTML>

Procedure for Deploying PyScript Files onto the Web

Create a GitHub repository and include an "index.html" file in a directory
Select "Settings"
From the sidebar to the left, select "Pages"
Under Source, select "Deploy from a Branch" and under Branch select the branch that contains the source code. After specifying which branch has the source code, another box shows up to specify which directory the source code is located within the branch. Specify the directory that contains the source code. Afterward, click "Save". In this demonstration, the "main" branch was selected and all the source code is in the root directory of the main branch.
Once the branch has been deployed, the wait time is a few seconds to a minute for the website to be deployed. Refresh the page to see the change. Once finished, a link will be generated. Click on the link.

The picture shown above runs a script that prints "Hello World", a number is randomly chosen from one to three, and the background is changed to a blue color.