Skip to content

RomanHauksson/academic-project-astro-template

Repository files navigation

Research project page template

This is a template you can use to build a project page for your research paper, adapted from the original Nerfies page. It's designed to be easy to set up for those without web development experience, but web developers will appreciate that it's flexible and built with modern, familiar technologies. See a live demo of the template here.

Usage

Want help setting it up? Please schedule a call with me here, and I'll personally walk you through making your project page live! I want to talk to potential users to figure out pain points and features to add.

  1. Click "Use this template" to make a copy of this repository in your GitHub account. Alternatively, you can click one of the buttons below to quickly begin deploying a copy with Vercel or Netlify. To use GitHub Pages instead (recommended), see step 7.

Deploy with Vercel Deploy to Netlify

  1. Clone your repository.
  2. Install Node.js if you haven't already. Make sure you're using version 24 or later, which you can check by running:
node --version

If your Node version is less than 24, you can use Node Version Manager to install version 24 and switch to it:

nvm install 24 && nvm use 24
  1. In the root directory of your cloned repository, install the dependencies:
npm install
  1. Start the development server:
npm run dev

While the development server is running, you can open http://localhost:4321 in your browser to see a live preview of your page.

  1. Edit the content in /src/paper.mdx. You should use Visual Studio Code – or one of its forks, like Cursor – so you can take advantage of the extensions I recommend in .vscode/extensions.json. Every time you save a file, the development server will automatically reload and display the updated version of the page.

  2. To deploy your site to the web, you need to enable GitHub Pages for the GitHub repository. Click on the Settings tab, then go to Pages (under the Code and automation section). Using the dropdown, change Source from "Deploy from a branch" to "GitHub Actions".

  3. Whenever you push to the main branch, the GitHub Actions workflow in .github/workflows/astro.yml will automatically build and deploy your site to https://<username>.github.io/<repository>/. No other configuration is necessary!

For more documentation, consult ./documentation.md.

Features

  • Easily edit the content using Markdown syntax instead of HTML.
  • Quick-to-load, works with mobile devices, accessible, SEO-friendly, and supports dark mode.
  • Includes out-of-the-box components for figures, LaTeX, code blocks (with syntax highlighting), videos, 3D objects, and a figure comparison slider.
  • Can automatically convert figures stored as PDFs into web-friendly images.
  • Add custom components using HTML or Javascript frameworks like React, Vue, or Svelte.
  • Built with Astro, React, Tailwind, MDX, and TypeScript.

Real-world examples

Alternative templates

Credits

This template was adapted from Eliahu Horwitz's Academic Project Page Template, which was adapted from Keunhong Park's project page for Nerfies. It's licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

About

Astro template to help you build an interactive project page for your research paper

Topics

Resources

Stars

Watchers

Forks

Contributors 3

  •  
  •  
  •