academic-project-astro-template.github.io

my？

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.

Features

• Easily edit the content in Markdown instead of HTML.
• Quick-to-load, responsive, accessible, and SEO-friendly.
• Includes out-of-the-box components for the header, figures, LaTeX equations, two-column layouts, code blocks (with syntax highlighting), small caps, videos, and YouTube embeds.
• Add custom components using HTML or even other web frameworks like React, Vue, or Svelte.
• Built with Astro, Tailwind CSS, MDX, and Typescript.

Real-world examples

• CLIP-RT: Learning Language-Conditioned Robotic Policies from Natural Language Supervision
• StochSync: Stochastic Diffusion Synchronization for Image Generation in Arbitrary Spaces
• CRESSim: Simulator for Advancing Surgical Autonomy
• PCO: Precision-Controllable Offset Surfaces with Sharp Features

Usage

Need 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. Install Node.js.
2. Click “Use this template” to make a copy of this repository and then clone it, or just clone it directly.
3. Run npm install from the root of the project to install dependencies.
4. Edit the content in /src/pages/index.mdx, and remember to update the favicon at /public/favicon.svg and the social link thumbnail (optional) at /public/thumbnail.png.
5. Run npm run dev to see a live preview of your page while you edit it.
6. Host the website using GitHub Pages, Vercel, Netlify, or any other static site hosting service.

Icons

This template uses Astro Icon library.

To use a custom icon:

1. Search on Iconify to find the icon you want. For example, the Hugging Face icon is simple-icons:huggingface, from the Simple Icons icon set.
2. Install the corresponding icon set: npm install @iconify-json/simple-icons.
3. If you’re using the icon in one of the link buttons, add it in one of the objects in the links prop of the <Header /> component in index.mdx:

    {
      name: "Hugging Face",
      url: "https://huggingface.co/",
      icon: "simple-icons:huggingface"
    }

Or, to use it anywhere in an Astro component or MDX file:

import { Icon } from "astro-icon/components";

<Icon name={"simple-icons:huggingface"} />

Notes

• If you’re using VS Code, I recommend installing the Astro extension to get IntelliSense, syntax highlighting, and other features.
• When people share the link to your project on social media, it will often appear as a “link preview” based on the title, description, thumbnail, and favicon you configured. Double check that these previews look right using this tool.
• The Nerfies page uses the Google Sans font, which is licensed by Google, so unfortunately, I had to change it to a different font instead (I picked Noto Sans).

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.