Quickly build open source web pages for academic purposes in a pythonic and elegant way.

pyspage makes it possible to build web pages with sophisticated logic from a single Python script. What pyspage actually does is turn a plain .py file into a valid pyscript page, you don't have to worry about anything other than what you really want to do.

pip install pyspage

Go to directory demo/, there is already a script scatter_hist.py.

pyspage scatter_hist.py -sb

A file named scatter_hist.html is generated, your browser opens a tab and show it.

Create a new file named index.py which consists of mainly two parts, layout and script.

In the layout part, a layout variable should be defined, of which the contents are the page elements named in a way you like. The hierarchical relationships are expressed by indenting.

layout = '''
row_a
    box
row_b
    col_a
        btn_a
    col_b
        btn_b
'''

In the script part, all the elements above should be created.

from pyspage import *
import matplotlib.pyplot as plt

row_a = Row()
row_b = Row()
col_a = Column()
col_b = Column()
box   = Column(class_='col-6')
btn_a = Button('CLICK a')
btn_b = Button('CLICK b')

You can define a function and let an element run it on a certain event happens.

btn_a.onclick = lambda e: print('a is clicked!')

def click_b(e):
    fig, ax = plt.subplots()
    fruits = ['apple', 'blueberry', 'cherry', 'orange']
    counts = [40, 100, 30, 55]
    ax.bar(fruits, counts)
    box.write(fig)
btn_b.onclick = click_b

def create_box():
    row_a.classList.add('bg-warning')
    box.write('This is the content.')
box.oncreate = create_box

You can create a figure with matplotlib or altair, and show it in an empty box(row or column) by box.write(fig).

In your terminal, run as follow

pyspage index.py

a index.html in current directory is generated.

If you use the arguments -s(for server) and -b(for browser), pyspage will start a server on 127.0.0.1:8000 and open browser automatically.

pyspage index.py -sb

This page can then be deployed on GitHub Pages, you don't have to bother about anything with HTML, JS or backend APIs.🎉🎉🎉

The easiest way to use GitHub Pages with your built HTML is to use the ghp-import package. ghp-import is a lightweight Python package that makes it easy to push HTML content to a GitHub repository.

ghp-import works by copying all of the contents of a folder to a branch of your repository called gh-pages, and pushes it to GitHub. The gh-pages branch will be created and populated automatically for you by ghp-import.

1. Install ghp-import.

pip install ghp-import

2. Call ghp-import and point it to the directory containing your HTML files.

ghp-import -n -p -f demo/

Now goto https://chunribu.github.io/pyspage/scatter_hist.html .The URL format is always {USER}.github.io/{REPOSITORY}/{FILENAME}. The filename can be omitted by changing name to index.html.

Deployment is that easy!🎉🎉🎉

Tips:

• Make sure that you included the -n, it tells GitHub not to build your book with Jekyll, which we don’t want because our HTML is already built.

• You may neet to update the settings for your GitHub pages site:

  • Use the gh-pages branch to host your website.

  • Choose root directory /.

• Row
• Column
• Text
• Button
• Input
• Textarea
• SelectOne
• SelectMulti
• File
• Image

The MIT License.