About This Website

What this website is, what you can do on it, how it is built with Quarto and Cloudflare Pages, and how you can build one like it.
Published

Jul 12, 2026

Modified

Sep 9, 2026

This website is a growing collection of free notes on network architecture, cybersecurity, artificial intelligence, and mathematics, together with a shelf of small tools that run inside your browser. I write and maintain all of it myself. Every page is rewritten in my own words and aimed at beginners, so a curious high school student can follow along.

How These Notes Are Written

The words and the understanding here are my own. I spend most of my day studying these subjects, working through the courses, and rewriting each idea until it is clear and simple.

I also use AI tools while I work, mainly Claude by Anthropic and Kiro. I treat them the way an author treats a good editor or a research assistant. They help me check phrasing, catch mistakes, format mathematics and diagrams, and take care of the slow and repetitive parts. What matters most stays with me. The choice of what to teach, the order of the ideas, the examples, and the final wording are my own, unless a source is explicitly referenced. When I build on a book, a course, or a paper, I credit its authors.

What You Can Do Here

Every page is public and free. Nothing is locked, and nothing asks you to register before you read.

  • See what a page costs you. Each page shows an estimated reading time and a difficulty rating from one to five. The estimate is built from the prose, the figures, the mathematics, and the code, not from a raw word count, so a short page full of derivations is not sold to you as a two-minute read.
  • Track your way through a course. Course pages carry a progress bar in the sidebar showing how many minutes of that course sit behind you and how many are still ahead.
  • Pick up where you stopped. The site remembers the page you were on and how far down it you had scrolled, then offers a Resume link in the navigation bar when you visit another page.
  • Sign in, if you want to. Signing in with Google or GitHub makes your reading position, your course progress, and your chess training follow you from your laptop to your phone. It unlocks no content, because there is none to unlock. Your record holds a handle you choose yourself plus your progress. The provider name and the email address are deliberately never read or stored, and an account left untouched for two years is warned once and then deleted.
  • Change how the site looks. A display rail near the lower-right corner switches between the Lion and Sun light palette and Quarto native dark mode. Printing always falls back to black on white, whatever you are using on screen.
  • Read without the furniture. The same rail has a reading mode that hides the navigation bar, both side columns and the comments, narrows the column, and sets the text a little larger and looser. The page metadata stays, a floating button brings the contents back, and Esc leaves. Code, tables and equations still take the full width, because a narrow column must never cut an equation off.
  • Ask a question. Every page has a comment box at the bottom, so a passage that does not land can be argued with in public rather than lost.
  • Search one section at a time. The search box can be narrowed to a single part of the site, which matters once the same word appears in a calculus page, a deep learning page, and a routing page.
  • Use the tools. Around twenty small utilities live under the Tools menu, covering networking (subnet and ASN calculators), writing and mathematics (LaTeX, Markdown, formula and typography previews), design (color palettes and SVG), astronomy (an eclipse atlas and a planetarium), and chess. Most run entirely inside your browser and send nothing anywhere. The exceptions say so on their own pages. The shared pastebin talks to a server because copying text between two devices cannot happen without one, Client Info asks an external service what your public address looks like, the handwriting field in Math Formula uses a remote recognizer, and the typography tool fetches fonts you preview from Google Fonts.

How This Website Is Built

The site is made with a few simple, free tools.

  • Quarto turns plain text files into web pages, with full support for mathematics and code.
  • The Flatly and Darkly Bootstrap themes provide the native light and dark modes. A custom stylesheet lays the branded Lion and Sun palette over the light one, and a small SCSS file carries the typography.
  • Type is Sora for text and headings and Roboto Mono for code and the page metadata, both self-hosted, so reading a note asks no third party for a font. The exceptions are the two design tools whose purpose is other fonts, the typography tool previewing faces it fetches on demand and the t-shirt designer fetching the face a design names for its export. Mathematics keeps its own typeface, because a sans-serif has neither the italics nor the symbols a formula needs.
  • Everything interactive is plain JavaScript, with no framework and no build step.
  • Firebase holds the sign-in records and the shared pastebin rooms. It is the only piece that lives on a server.
  • Figures are drawn by matplotlib where the page runs Python, and by hand in draw.io where an idea needs a diagram. SVGRepo supplies ready-made icons.
  • The pages are written in VSCode.
  • The repository is on GitHub, and the site is published by Cloudflare Pages.

Each page is a plain text file that becomes a fixed HTML file, so the pages themselves need no database and no server code. My own computer does the building, and only the finished HTML is pushed, which is why Cloudflare has nothing to build and simply serves what it receives.

Building is incremental. A page that runs Python is executed once, and its output is cached and replayed on later builds until either the page or one of the data files it reads actually changes. That keeps a site with this many computed figures rebuildable in a reasonable time.

Build a Website Like This One

If you would like your own website built the same way, you are welcome to start from the same template I use. It works on Windows, Linux, and macOS with the fewest possible steps, and you do not need to know how to program. You run only one small setup script for your kind of computer, and everything else is done with buttons.

Get the template on GitHub

The template carries the visible parts of this site, including the light palette, native dark mode, reading time estimates, the resume-reading prompt, and scoped search. It leaves out the parts that are tied to my own accounts, such as sign-in, comments, and the tools.

What You Need First

Two free accounts and two free programs.

  • A GitHub account, which stores your files online.
  • A Cloudflare account, which puts your website on the internet.
  • VSCode, the program you write in, from code.visualstudio.com.
  • GitHub Desktop, which saves and publishes your work with buttons instead of typed commands, from desktop.github.com. It is available for Windows and Mac. There is no official Linux version, so on Linux you use the Source Control panel built into VSCode instead. It has the same Commit and Push buttons.

Step 1. Get Your Copy of the Website

Your website starts from the template above. The design and layout are already built for you. You just make your own copy of it.

  1. On the template page, click the green Use this template button, then Create a new repository.
  2. Give your copy a name, for example my-website, and click Create.
  3. Open GitHub Desktop and sign in with your GitHub account.
  4. Click Clone a repository, choose the copy you just made, and click Clone.

That last step downloads the website folder onto your computer.

Step 2. Install the Tools (the one script)

The template includes a small setup script for each kind of computer. It installs Quarto (the website builder), uv (the Python package tool), and the Python packages that pages with charts need. Find your computer below. This is the only step that differs between Windows, Linux, and Mac.

On Windows

Inside your website folder there is a file named setup-windows.ps1. This one file installs everything the website needs.

  1. Find setup-windows.ps1 in the folder.
  2. Right-click it and choose Run with PowerShell.
  3. If Windows shows a blue Yes / No box, click Yes.
  4. Wait for it to say All done, then close the window.

For reference, these are the commands that script runs for you. You do not need to type them.

winget install --id Posit.Quarto        # the website builder
winget install --id astral-sh.uv        # the Python package tool
uv venv                                  # a private space for packages
uv pip install -r requirements.txt       # the small set of packages
Note

If the script says uv is “not visible yet,” simply close the window and run the file one more time. This happens the first time because Windows needs a moment to notice the new tools.

If winget cannot find Quarto on your computer, install it once by hand from quarto.org, then run the script again for the rest.

On Linux

The setup script for Linux is named setup-linux.sh.

  1. Open a terminal in your website folder. In most file managers you can right-click inside the folder and choose Open Terminal Here.
  2. Type bash setup-linux.sh and press Enter.
  3. If it asks for your password, type it and press Enter. This happens once, to install Quarto.
  4. Wait for it to say All done.

The script is written for Ubuntu and Debian. On another distribution, install Quarto once by hand from quarto.org, then run the script again for the rest.

On macOS

The setup script for Mac is named setup-mac.sh.

  1. Open Terminal in your website folder. In Finder, right-click the folder and choose New Terminal at Folder.
  2. Type bash setup-mac.sh and press Enter.
  3. Wait for it to say All done.

The script installs Quarto with Homebrew if you have it. If you do not, it asks you to install Quarto once by hand from quarto.org, and then you run the script again for the rest.

NoteTwo Packages That Need One More Step on Mac

Both of these install cleanly and then fail later, the first time you rebuild a page that uses them, which makes them confusing. Neither step is needed unless your own pages use those packages.

Some packages that train models, such as XGBoost, need a shared component called the OpenMP runtime. macOS does not include it. If a rebuild stops with a message about libxgboost.dylib not loading, install it once with Homebrew.

brew install libomp

The NLTK package, which works with English text, installs the code but none of its word lists. If a rebuild stops with a LookupError naming a missing resource such as stopwords, fetch the word lists once.

python -m nltk.downloader stopwords punkt_tab

Step 3. Write and See Your Website

  1. Open the website folder in VSCode. When VSCode offers to install the Quarto extension, click Install.
  2. Open a page. Pages end in .qmd. The home page is index.qmd, and your writing lives in the notes folder.
  3. Click Preview at the top right. Your page opens in the browser and updates as you type.

To start a brand-new page, copy the example file notes/first-note.qmd, rename the copy, and change the words inside. It appears on your Notes page by itself.

Step 4. Publish to the Internet

Publishing takes two short steps once you are happy with a change.

  1. Rebuild the site.
    • On Windows, double-click render.bat. A small black window opens, rebuilds the site, and says Done. Close it.
    • On Linux or Mac, run bash render.sh in a terminal in the website folder.
    Either way, the script also turns on Python first, so any page that draws a chart is built correctly.
  2. Open GitHub Desktop (on Linux, the Source Control panel in VSCode). Type a short note in the Summary box, click Commit to main, then click Push origin.

Wait about one minute, then refresh your website address. Your change is live.

Tip

Always run the render script before you publish. If you forget, the website keeps the old content even after you push.

Connect Cloudflare (one time)

You connect Cloudflare to your website only once, at the very beginning. This is what tells the internet where to find your pages.

  1. Sign in at dash.cloudflare.com.
  2. In the menu on the left, click Workers & Pages.
  3. Click the blue Create application button at the top right.
  4. The next screen opens on Workers first, and the Pages choice is easy to miss. Look for the Pages tab near the top of that screen and click it.
  5. Click Connect to Git (it may also say Import an existing Git repository).
  6. The first time, a GitHub window opens and asks for permission. Click Install & Authorize and, if it asks, choose the account that holds your website copy.
  7. Back in Cloudflare, pick your website repository from the list and click Begin setup.
  8. Fill in the settings page as follows.
    • Project name. Pick a short name. It becomes part of your web address, so my-website gives you my-website.pages.dev.
    • Production branch. Choose main.
    • Framework preset. Choose None.
    • Build command. Leave it empty.
    • Build output directory. Type _site.
  9. Click Save and Deploy and wait a minute or two while Cloudflare publishes for the first time.
  10. When it finishes, Cloudflare shows your web address, something like https://my-website.pages.dev. Open it. That is your website, live on the internet.
Note

Why these settings? Your computer already builds the site when you run the render script, and the finished pages are stored in the _site folder. So Cloudflare does not need to build anything. It only needs to serve that folder, which is why the build command stays empty and the output directory is _site.

After this, you never touch Cloudflare again. Every time you push from GitHub Desktop, Cloudflare notices the change and updates your website by itself within about a minute. If you later want a personal web address such as yourname.com instead of the free .pages.dev one, you can buy a domain and attach it in Cloudflare under Custom domains, but that is entirely optional.

Day-to-Day Workflow

Once everything above is done, the setup part of your life is over. From then on, updating your website is the same short routine every time.

  1. Open the website folder in VSCode and edit a page. Click Preview (top right) to watch your changes live in the browser as you type.
  2. To add a new page, copy an example file in the notes folder, rename the copy, and change the words inside. It appears on your Notes page by itself. Copy first-note.qmd for a text page, or example-with-a-plot.qmd for a page with a Python chart.
  3. When you are happy, rebuild the site. On Windows, double-click render.bat. On Linux or Mac, run bash render.sh in a terminal.
  4. Publish with GitHub Desktop (on Linux, the Source Control panel in VSCode). Type a short note in the Summary box, click Commit to main, then Push origin.
  5. Wait about one minute and refresh your website address. Your change is live.
Note

After the render script runs, GitHub Desktop may show a long list of changed files. That is normal. Rebuilding the site refreshes many pages at once. Just commit them all.

That is the whole routine. Edit, render, commit, push.

Back to top