Pascal Polleunus

Web Development
•
#Astro #Tailwind #Vercel #v0

Building My Personal Website with Astro and Tailwind on Vercel

A lazy description of what I did to create this site.

How Was This Created?

Create Project

cd $HOME/dev
pnpm create astro@latest ./ppbe --skip-houston --template minimal --no-install --no-git
cd ppbe
git init
asdf local nodejs 20.18.0  # Vercel build fails with 22.12.0 :-/
pnpm install
gh repo create ppbe --public -h "pascal.polleunus.be" -s . --push

Options:

  • dir: ./ppbe
  • tmpl: minimal (Empty)
  • ts: No
  • use: base
  • deps: No (we’ll first define Node version)
  • git: No (because it commits immediately)

Test install: pnpm dev

See commit

Some Configuration

See commits.

Configure Vercel Deployment

Basically:

  • Add vercel adapter.
    • pnpm astro add vercel
    • Configure Astro.
  • Add configuration for Vercel:
    • Define Node version in package.json.
    • Create vercel.json to define install command.
  • Git ignore .vercel folder.
  • Install Vercel CLI.
    • brew install vercel-cli
  • Deploy to Vercel, accepting all defaults.
    • vercel deploy --yes.
    • Test: https://ppbe.vercel.app/.
  • Configure Vercel
    • Go to Vercel › Project “ppbe” › Settings › Git.
    • In “Connected Git Repository”, click on GitHub.
    • “Install the GitHub application”, click on Install.
      • Select ppo
      • Choose Only select repositories
      • Select ppbe repo
      • Click on Install
    • Click on Connect beside mysite
    • Enable Pull Request Comments & Commit Comments

See commit

Create Components

See commits.

Integrate sitemap & Tailwind

See commits.

And All The Rest…

See latest commits

Improving Tailwind & Design Using AI

I used Vercel’s v0 with this prompt:

I have a base Astro project for my personal website.

The structure of the site is minimal: a home page that lists the latest featured blog articles, a blog section (list and detail), an about page.

I want you to create the followings:

1. Tailwind code (tailwind.config.mjs and any other files for global styles).
2. Layouts: Main, Blog.
3. Pages: Home, About, Blog List, Blog Article.
4. Components: Header, Footer, Hero, Blog List, Blog List Item, Blog Article.

**Directives:**

- Minimalist, modern design.
- Responsive design, mobile-first.
- There must be shared global styles but I want the styles inside the components, not globally defined.
- All the layouts, pages and components must be in Astro code (not React!).
- The “Blog List” components is used in the pages: Home and Blog List.

**Specifications:**

- **Colors:** background: #fafafa, text: #333, text-dim: #888, primary: #1e88e5, accent: #7cb342.
- **Main Layout:** 3 horizontal zones: header, body, footer. Using flexbox with the footer sticking to the bottom when the body is small.
- **Header:** On the left, my name (Pascal Polleunus) as brand/logo (with a link to home). On the right, a nav: blog • about.
- **Footer:** Icon list of links to my socials: Facebook, GitHub, Instagram, LinkedIn, X, YouTube.
- **Hero:** A full-width hero section. Props: image, alt, title, subtitle, url, caption, captionUrl.
- **Blog Article:** Frontmatter Props: title, subtitle, abstract, category, tags, author, createdAt, modifiedAt, hero (see Hero Props). The Markdown body is the main content. Note: All the frontmatter props are handled by the “Blog Article” layout, they are not duplicated in the Markdown body.

It generated everything right straight ahead!

It gave also an example article. I asked to have 10 more… but it didn’t understood that, at all! That was the most complicated part 🙄