Showcase Your Research Online: Building a Personal Portfolio Website with HTML, CSS, and Hugo
This two-day hands-on workshop will teach researchers how to build and publish a personal portfolio website for showcasing scientific work. Starting with the basics of HTML and Markdown, participants will learn how to structure web pages, use templating systems to standardize layouts, and apply Bootstrap CSS framework to create professional-looking designs without writing raw CSS. On the second day, the focus will be on building portfolio and blog sections, integrating analyses from Jupyter notebooks into web-friendly formats, and deploying a finished website for free using GitHub Pages. By the end of the course, participants will have a live, professional-looking personal website for sharing their research, CV, and publications.
Offerings:
Topics
- Create and design web pages using HTML, Markdown, and the Bootstrap CSS framework
- Turn Jupyter analyses into web articles with Hugo
- Publish your research site online for free with GitHub Pages
Intended Participants
- Researchers and students from all universities are welcome.
- Participants of all educational backgrounds are welcome.
Certification Requirements
Students who attend at least 75% of the course will receive a participation certificate by email at the end of the course.
Software Requirements
All students must attend the course with a Windows, Mac, or Linux Computer they can use to do the course exercises.
Register: https://www.zoom.com/
Zoom is a video conferencing software that allows for virtual meetings and webinars. It is essential for attending our online workshop sessions and provides the interactive features needed for effective learning.
Why Zoom?
- Breakout Rooms: Essential for our small-group exercises
- Screen Sharing: Share your screen to get help or demonstrate solutions
- Stable & Reliable: Handles large groups with consistent quality
- Recording: Sessions can be recorded for later review (where permitted)
Installation
Download and install the Zoom Desktop Client from the official website. We require the desktop client rather than the web version for full feature support.
Before Your First Session
- Test Your Setup: Join a test meeting to check audio/video
- Update Zoom: Make sure you have the latest version
- Check Your Internet: Ensure you have a stable connection
- Find a Quiet Space: Minimize background noise during sessions
Workshop Etiquette
- Keep your microphone muted when not speaking
- Use video when possible to help build community
- Use reactions (👍, ✋) to provide feedback
- Ask questions in chat or unmute to speak
- Be ready to join breakout rooms for exercises
Tips
- Familiarize yourself with screen sharing features before the workshop
- Keep your Zoom name consistent with your registration
- Use virtual backgrounds if needed for privacy
- Enable “dual monitor mode” if you have two screens
Register: https://code.visualstudio.com/download
Visual Studio Code is a powerful, lightweight code editor used for developing software. It supports various programming languages through extensions and provides an excellent environment for Python development and data science work.
Why VS Code?
- Free & Open Source: Completely free with active community development
- Extensible: Thousands of extensions for any language or tool
- Integrated Tools: Built-in terminal, debugger, and Git integration
- Jupyter Support: Work with notebooks directly in the editor
- Remote Development: Edit files on remote servers or in containers
Installation
Download and install Visual Studio Code from the official website. Choose the appropriate version for your operating system (Windows, macOS, or Linux).
Essential Extensions for Research
Python Development
- Python - IntelliSense, debugging, code navigation
- Jupyter - Run and edit Jupyter notebooks
- Pylance - Fast, feature-rich Python language support
Collaboration & Version Control
- GitLens - Supercharge Git integration
- Live Share - Real-time collaborative editing
Data & Visualization
- Data Wrangler - Explore and clean data visually
- Rainbow CSV - Colorize CSV files for easier reading
Tips
- Learn keyboard shortcuts to improve efficiency (
Ctrl+Shift+P/Cmd+Shift+Pfor command palette) - Customize your theme and settings
- Use the integrated terminal for running commands
- Enable autosave to never lose work
- Use Zen Mode (
Ctrl+K Z) for distraction-free coding
Getting Started with Python
- Install the Python extension
- Select your Python interpreter (
Ctrl+Shift+P→ “Python: Select Interpreter”) - Open a
.pyfile or create a new one - Run code using the play button or
Ctrl+Alt+N
Register: https://pixi.sh/latest/installation/
Pixi is a modern package manager that simplifies the installation of scientific software. It’s built on top of the conda-forge ecosystem but is significantly faster and provides better dependency resolution.
Why Pixi?
- Fast: 5-10x faster than conda for most operations
- Reproducible: Uses lock files to ensure exact environment reproduction
- Task Runner: Built-in task management (like npm scripts)
- Modern Design: Clean CLI with better error messages
- Conda Compatible: Uses the conda-forge repository
Installation
Follow the installation instructions on the official Pixi website. The installer will set up Pixi and configure your PATH automatically.
Getting Started
Initialize a new project:
pixi init
pixi add python
pixi shell
Add packages:
pixi add numpy pandas matplotlib
Define and run tasks in pixi.toml:
[tasks]
dev = "python main.py"
test = "pytest tests/"
Run tasks:
pixi run dev
pixi run test
Advantages Over Conda
- Much faster package resolution and installation
- Lock files ensure reproducibility by default
- Better support for managing multiple projects
- Built-in task runner eliminates need for separate tools
Tips
- Use
pixi shellto activate the environment - Define common tasks in
pixi.tomlfor easy project workflows - Lock files (
pixi.lock) should be committed to version control - Use
pixi global installfor system-wide tools
Register: https://git-scm.com/downloads
Git is a version control system that tracks changes in source code. It allows multiple people to work on a project simultaneously and maintains a complete history of all changes.
Why Git?
- Distributed: Every developer has a complete copy of the project history
- Branching: Experiment with new features without affecting the main codebase
- Collaboration: Work with others seamlessly through platforms like GitHub
- Reproducibility: Track exactly which version of code produced which results
Installation
Download and install Git from the official website. Choose the appropriate installer for your operating system.
Windows
Use Git for Windows installer with recommended defaults.
macOS
Git comes pre-installed on most macOS systems. Update with Homebrew: brew install git
Linux
Install using your package manager: sudo apt-get install git (Ubuntu/Debian)
Configuration
After installation, configure your identity:
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
Essential Commands
git clone- Copy a repository to your local machinegit add- Stage changes for commitgit commit- Save changes with a messagegit push- Upload changes to remote repositorygit pull- Download changes from remote repository
Tips
- Use meaningful commit messages that explain why you made changes
- Commit frequently to create detailed checkpoints
- Create branches for new features or experiments
- Use
.gitignoreto exclude data files and generated content
Register: https://github.com/
GitHub is a web-based platform built around Git that provides hosting for software development and version control. It’s the world’s largest code hosting platform and essential for modern collaborative research.
Why GitHub?
- Collaboration: Work with researchers worldwide on shared projects
- Visibility: Make your research code discoverable and citable
- Integration: Connect with CI/CD, documentation, and project management tools
- Community: Access to millions of open-source projects and libraries
- Free for Research: Unlimited public and private repositories
Getting Started
- Create a free account at github.com
- Set up Git on your local machine
- Configure Git with your GitHub credentials
- Create your first repository or clone an existing one
Essential Features
Repositories
- Host your code with full version history
- README files for documentation
- Issues for tracking bugs and features
- Pull requests for code review
Collaboration
- Fork projects to contribute
- Star repositories to bookmark them
- Follow researchers working in your field
- Use GitHub Pages for project websites
Tips for Researchers
- Include a LICENSE file to clarify how others can use your code
- Write a clear README explaining what your code does
- Create a CITATION.cff file for proper attribution
- Use releases to mark versions associated with publications
- Add topics to make your repository discoverable
Best Practices
- Commit often with meaningful messages
- Use branches for new features
- Write clear documentation
- Add a DOI through Zenodo integration for permanent archiving