Introduction
Today, I built and deployed a basic outline for my newest static website on the UBC course ELEC221, Signals and Systems. Inspired by one of my previous courses, MATH307, Applied Linear Algebra, I decided to use the same framework to structure and organize my study materials.
Deploying the Website
Using Jupyter Book
To create the website, I chose Jupyter Book, a powerful tool for creating educational websites from Jupyter notebooks and Markdown files. Jupyter Book allows me to integrate rich text, executable code, and interactive content seamlessly. This makes it an ideal platform for creating a comprehensive and interactive set of course notes.
GitHub Pages for Hosting
For hosting, I opted for GitHub Pages, a free service provided by GitHub to host static websites directly from a repository. Using GitHub Pages, I can easily manage updates and ensure that my website is always up-to-date with the latest course materials.
Steps to Deploy
Here are the steps I followed to deploy my ELEC221 website:
- Setting Up the Repository: I created a new GitHub repository for the ELEC221 course and cloned it to my local machine.
- Creating the Book Structure: Using Jupyter Book, I set up the basic structure of the book, including chapters and sections based on the course syllabus.
- Adding Content: I added the course notes, images, and videos to the appropriate chapters, ensuring that each section is well-organized and easy to navigate.
- Building the Book: I used the
jupyter-book build
command to generate the static HTML files for the website. - Deploying to GitHub Pages: I set up a GitHub Actions workflow to automate the deployment process. This workflow builds the book and deploys it to the
gh-pages
branch, making it available at the specified URL.
Benefits of the New Framework
Organized Study Materials
By using a structured approach to organizing my study materials, I can easily find and review the content I need. Each chapter is clearly labeled, and the table of contents provides a quick overview of the course.
Interactive Learning
The integration of executable code and interactive content in Jupyter Book allows me to experiment with signal processing concepts directly within the course notes. This hands-on approach enhances my understanding and retention of the material.
Using Obsidian for Studying
Recently, I have adopted using Obsidian as my primary tool for studying and general organization. Obsidian is a highly powerful markdown editor that allows me to write complex mathematical equations with LaTeX and organize my notes efficiently. Because Obsidian uses Markdown, it allows for easy transfer of my notes to this static GitHub site. This seamless integration ensures that my study materials are always accessible, well-organized, and easy to update.
Consistency and Inspiration
Drawing inspiration from the MATH307 course, I have maintained a consistent style and structure across my study materials. This not only makes the content more visually appealing but also provides a familiar layout that is easy to navigate.
Conclusion
Deploying my ELEC221 website using Jupyter Book and GitHub Pages has been a rewarding experience. It has allowed me to create a comprehensive and interactive set of course notes that are well-organized and easy to access. This new framework for studying has significantly improved my learning process, and I look forward to applying it to other courses in the future.
You can check out the deployed website here.