How I Built My Personal Academic Website With AI

When I decided to build my personal academic website, I did not want a complicated stack, a paid hosting plan, or a setup that I would forget how to maintain six months later. I wanted something simple, fast, inexpensive, and fully under my control.

That is why I chose a static website hosted on GitHub Pages. This post is the guide I wish I had when I started, and it is written so that someone can follow it from scratch without needing to constantly search for missing steps elsewhere.

Why I built it this way

The first decision was not the design. It was the system. I wanted version control, free hosting, and a simple setup that would still make sense to me months later. A static website on GitHub Pages solved all of that at once.

I also liked that the website would live in the same place as the code. That means updates are easy, changes are tracked, and deployment is tightly connected to the repo itself.

What AI helped with

I used Perplexity, Claude, and GitHub Copilot at different stages. AI helped me draft sections, shape the HTML and CSS, improve layout decisions, fix mobile issues, and think through integrations like ORCID publications.

The key lesson was that AI works best when prompts are specific. Asking for “a website” gives generic output. Asking for “a simple and spacious academic portfolio in plain HTML/CSS/JS” gives something much more usable.

Step 1: Create a GitHub account

If you are starting from zero, go to GitHub and create a personal account. Verify your email, because GitHub requires that for some basic tasks. I also strongly suggest enabling two-factor authentication early for security.

GitHub matters here for three reasons: it stores your files, tracks all changes over time, and can host the finished website through GitHub Pages.

Step 2: Create the repository

A repository is your website project folder on GitHub. For a personal website, the easiest option is to create a repo named exactly yourusername.github.io. That naming convention gives you the clean default website URL.

You can add a README during setup. I recommend doing that because even a simple project benefits from basic documentation from day one.

Step 3: Add index.html

GitHub Pages needs an entry file at the top level of the publishing source, and index.html is the most straightforward starting point. Your first version can be very small.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name</title>
</head>
<body>
  <h1>Your Name</h1>
  <p>This is my personal website.</p>
</body>
</html>

This tiny page is enough to prove that the publishing pipeline works before you spend time polishing the design.

Step 4: Deploy with GitHub Pages

Once the repo exists and index.html is in place, go to the repository settings and open the Pages section. Enable GitHub Pages and wait for the build to finish. GitHub will then provide a live site link.

Do not worry if it takes a few minutes. The first deployment is sometimes not instant, and that is normal.

Step 5: Build the real structure with AI

After confirming that a minimal page works, I started asking AI to help me build the real site structure. I described the site as a simple, spacious academic portfolio and asked for sections like About, Skills, Experience, Research, Publications, Blog, and Contact.

I found it much better to iterate in small steps than to ask for one giant perfect file. Build the structure first, then content, then styling, then responsiveness.

Step 6: Add your real content

This is the part where your own thinking matters most. AI can help you phrase things, but it cannot decide your identity for you. I had to decide what I wanted the website to say about my work, my research, and the kind of reader I wanted to reach.

For an academic portfolio, a simple rule works well: explain yourself in plain language first, then add technical detail where needed.

Step 7: Integrate ORCID publications

I wanted my publications to update from ORCID instead of editing them manually on the site every time. The idea is simple: JavaScript fetches your public works from the ORCID API and inserts them into a placeholder section on the page.

https://pub.orcid.org/v3.0/YOUR-ORCID-ID/works

The reason this is useful is maintenance. ORCID becomes the source of truth, and the site becomes a clean display layer.

Step 8: Make it mobile friendly

This took more than one pass. A site can look perfectly fine on a laptop and still feel awkward on a phone. The most important changes were turning the layout into a single column on small screens, hiding the desktop sidebar, and adding a hamburger-driven slide-in menu.

That experience taught me that responsive design is not something you assume. It has to be tested and refined.

Step 9: Fix problems without rebuilding everything

One mistake I made early was treating every bug like a reason to regenerate the whole page. That usually creates more problems. A better approach is to inspect the exact part that is broken and fix only that section.

In practice, that means asking AI for diagnosis, not only for replacement. That shift made the workflow much more stable.

What worked well for me

Keeping the stack simple: HTML, CSS, JavaScript, GitHub Pages.
Using AI in small passes instead of giant rewrites.
Testing desktop and mobile separately.
Adding integrations only after the base layout was stable.
Writing content in my own voice instead of accepting generic text.

A checklist you can follow

Create a GitHub account and verify your email.
Create a repository named yourusername.github.io.
Add a minimal index.html.
Enable GitHub Pages.
Confirm the first deployment works.
Use AI to draft the site structure.
Replace placeholders with your own content.
Add ORCID or other small integrations if needed.
Test on mobile and improve the navigation.
Keep refining the site gradually.

Final thought

Using AI did not remove the need to think. What it removed was the intimidation of getting started. Once I had a simple live website, improving it became much easier. That is the real value here: not that AI magically builds everything, but that it helps turn hesitation into momentum.