17 Building Websites

Websites are increasingly important for research: project pages, lab sites, interactive visualizations, and documentation. Claude Code makes web development accessible even without prior experience.

17.1 When You Might Need a Website

Project page: Share your research with a landing page
Lab website: Present your group’s work
Documentation: Document your software package
Data visualization: Interactive exploration of your results
Course materials: This tutorial!

17.2 Options: Static vs Dynamic

17.2.1 Static Sites

Just HTML/CSS/JavaScript
No server-side code
Free hosting (GitHub Pages, Netlify)
Perfect for most research needs

17.2.2 Dynamic Sites

Database, user accounts, etc.
More complex hosting
Rarely needed for research

We’ll focus on static sites.

17.3 Quick Start: Simple HTML Page

> Create a simple project page for my paper "Analysis of Cell Types in Mouse Brain"
> with sections for Abstract, Methods, Results, and Data Download

Claude creates a complete index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cell Types in Mouse Brain</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            line-height: 1.6;
        }
        h1 { color: #333; }
        section { margin: 2rem 0; }
        .download-btn {
            background: #0066cc;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>Analysis of Cell Types in Mouse Brain</h1>
    <p><em>Your Name, Institution</em></p>

    <section id="abstract">
        <h2>Abstract</h2>
        <p>Your abstract here...</p>
    </section>

    <section id="methods">
        <h2>Methods</h2>
        <p>Your methods here...</p>
    </section>

    <section id="results">
        <h2>Results</h2>
        <p>Your results here...</p>
    </section>

    <section id="download">
        <h2>Data & Code</h2>
        <a href="data.zip" class="download-btn">Download Data</a>
        <a href="https://github.com/you/repo" class="download-btn">GitHub</a>
    </section>
</body>
</html>

17.4 Static Site Generators

For more complex sites, use a static site generator:

17.4.1 Quarto (Recommended for Academics)

You’re reading a Quarto site right now!

> Set up a Quarto website for my lab

Quarto is great because: - Markdown-based (easy to write) - Supports code execution (R, Python, Julia) - Beautiful themes - Built-in support for academic content

17.4.2 Jekyll (GitHub Pages)

GitHub Pages natively supports Jekyll:

> Create a Jekyll site for my project documentation

17.4.3 Hugo (Very Fast)

For large sites with many pages:

> Set up a Hugo site with the academic theme

17.5 Deploying to GitHub Pages

The easiest way to host a static site:

> Deploy this site to GitHub Pages

Steps: 1. Create a GitHub repository 2. Push your site files 3. Enable GitHub Pages in repository settings 4. Your site is live at username.github.io/repo-name

# Initialize and push
git init
git add .
git commit -m "Initial site"
gh repo create my-project-site --public --source=. --push

# Enable GitHub Pages (can also do in web interface)
gh repo edit --enable-pages

17.6 Interactive Visualizations

17.6.1 Embedding Plots

> Add an interactive Plotly chart showing my UMAP data

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="umap-plot"></div>
<script>
    // Load data and create plot
    fetch('umap_data.json')
        .then(response => response.json())
        .then(data => {
            Plotly.newPlot('umap-plot', [{
                x: data.x,
                y: data.y,
                mode: 'markers',
                marker: { color: data.cluster }
            }]);
        });
</script>

17.6.2 Data Tables

> Add a searchable, sortable table for my gene list

Using DataTables:

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<table id="gene-table" class="display">
    <thead>
        <tr><th>Gene</th><th>Log2FC</th><th>p-value</th></tr>
    </thead>
</table>

<script>
$(document).ready(function() {
    $('#gene-table').DataTable({
        ajax: 'gene_data.json'
    });
});
</script>

17.7 Lab Website Template

> Create a lab website with:
> - Home page with lab description
> - People page with team members
> - Publications list
> - Contact information
> - News/updates section

Claude creates a multi-page site structure:

lab-website/
├── index.html
├── people.html
├── publications.html
├── contact.html
├── css/
│   └── style.css
├── images/
│   └── team/
└── js/
    └── main.js

17.8 Making It Look Good

17.8.1 Using CSS Frameworks

> Add Bootstrap to make the site responsive and professional-looking

17.8.2 Themes

> Apply a minimalist academic theme to this site

17.8.3 Custom Styling

> The heading color should be our institutional blue (#003366)

17.9 Documentation Sites

For software documentation:

> Create a documentation site for my Python package using MkDocs

MkDocs + Material theme is excellent for technical documentation:

# mkdocs.yml
site_name: My Package
theme:
  name: material
nav:
  - Home: index.md
  - Installation: install.md
  - Tutorial: tutorial.md
  - API Reference: api.md

17.10 Practical Example: Paper Companion Site

> Create a companion website for my paper that includes:
> - Graphical abstract
> - Interactive figures (the static versions are boring)
> - Downloadable supplementary data
> - Code repository link
> - Citation in multiple formats

Claude builds a professional site with all components.

17.11 Tips for Research Websites

17.11.1 Keep It Simple

Researchers just want information—don’t over-design.

17.11.2 Make Data Accessible

Clear download links, documented formats.

17.11.3 Include Citations

Make it easy to cite your work:

> Add a "Cite this paper" section with BibTeX, RIS, and plain text formats

17.11.4 Keep It Updated

Set a reminder to update publications and news.

17.12 Maintenance

17.12.1 Updating Content

> Add a new publication to the publications page

17.12.2 Fixing Issues

> The contact form isn't working on mobile. Fix it.

17.12.3 Analytics

> Add Google Analytics to track visitors

17.13 What You’ve Learned

You can now: - Create simple HTML pages - Use static site generators - Deploy to GitHub Pages - Add interactive elements - Build documentation sites

17.14 Next Steps

Continue to Bioinformatics Tool Integration.