How to Build a Personal Website — Creating a Portfolio with Astro × Vercel

Introduction

“I want to build my own website, but I don’t know where to start.”

Sound familiar?

In this article, I’ll answer common questions about building a personal website, using this site “khides.com” as a reference.

Want to get started right away?

I’ve published a boilerplate built with the same tech stack as this site. Clone it and start developing immediately.

GitHub - khides/website-boilerplate

If you want to understand the reasoning behind the technology choices, read on.

Questions this article addresses:

• Do I really need a personal website?
• What technology should I choose?
• Is setting up the environment difficult?
• How should I approach design?
• Does it cost money to publish?

---

Do I Really Need a Personal Site? Isn’t Social Media Enough?

It’s not essential, but having one opens up new possibilities.

Social media and blogging platforms are convenient, but there’s something special about having your own space.

Aspect	Social Media / Blog Platforms	Your Own Site
Ownership	Platform owns it	You own it
Customization	Limited	Unlimited freedom
Longevity	Risk of service shutdown	Depends on you
Branding	Among other users	Stand out with your own domain

A personal site serves as your digital business card, functions as a portfolio, and becomes a platform for sharing your thoughts—that’s the value of having your own website.

---

What Are My Options?

There are broadly two approaches to creating a personal site.

Method	Examples	Pros	Cons
No-code	WordPress, Wix, STUDIO	No coding required, quick to start	Monthly fees, limited customization
With code	Astro, Next.js, Hugo	Fast, can host for free, highly flexible	Learning curve

Should I Choose No-code (WordPress, etc.)?

WordPress is the world’s most popular CMS (Content Management System), with abundant resources available. A CMS is a system that allows you to create, edit, and manage website content (text, images, etc.) through a browser-based admin interface. You can post articles and change designs without writing code.

However, WordPress might be overkill for a personal portfolio.

Aspect	No-code (WordPress, etc.)	With Code
Initial Cost	Server fees ($5-10+/month)	Free (Vercel, etc.)
Load Speed	Can be slow due to dynamic generation	Fast with static HTML
Security	Plugin vulnerability risks	Safe with static files only
Customization	Depends on themes & plugins	Complete freedom with code
Learning Curve	Low (GUI-based)	Medium to High
Maintenance	Plugin updates & backups required	Minimal

No-code is for you if: You don’t want to write code, want to start immediately, plan to blog frequently

Coding is for you if: You can/want to write code, want a fast site, want free hosting

This article focuses on building with code.

---

If I’m Coding, Which Architecture Should I Choose?

Once you’ve decided to code your site, the next question is choosing your architecture.

Type	Full Name	How It Works	Examples
SSG	Static Site Generation	HTML generated at build time	Astro, Hugo, Gatsby
SSR	Server-Side Rendering	HTML generated on server per request	Next.js, Nuxt.js
SPA	Single Page Application	JavaScript renders in browser	React, Vue, Angular

SSG Is Optimal for Personal Portfolios

Aspect	SSG	SSR	SPA
Load Speed	◎ Fastest (pre-generated)	○ Server processing	△ Renders after JS loads
SEO	◎ Complete static HTML	○ Possible	△ Requires extra work
Server Cost	◎ None (CDN only)	× Always running	◎ None
Real-time	△ Requires rebuild	◎ Always current	◎ Dynamic updates
Complexity	◎ Simple	△ Server management needed	△ Complex state management

Key Point: Personal sites and blogs have characteristics like “content doesn’t change frequently,” “real-time updates not needed,” and “SEO matters.” This is exactly where SSG excels.

• When you need SSR: Displaying different content per user (e-commerce, social networks, etc.)
• When you need SPA: Complex UI interactions (admin dashboards, web apps, etc.)

For a personal portfolio, SSG is sufficient—in fact, it’s the optimal choice.

---

Where Do I Start? What Technology Should I Choose?

If your site is primarily for reading, I recommend Astro

Why Astro?

Astro is a framework that gained attention around 2022. Its key feature is the “use JavaScript only where needed” philosophy.

For reading-focused sites like blogs and portfolios, most pages work fine as static HTML. You only need React for interactive parts (menu toggles, forms, etc.).

Comparison with other frameworks:

Framework	Best For	Learning Curve
Astro	Blogs, portfolios, landing pages	Low to Medium
Next.js	Web apps, dynamic content-heavy	Medium to High
Hugo	Ultra-simple blogs	Low

This Site’s (khides.com) Tech Stack

Here’s the technology stack used on this site:

Role	Technology	Why I Chose It
Framework	Astro	Static site generation, fast loading
UI Library	React	Used only for interactive parts
Styling	Tailwind CSS	Efficient CSS design
Hosting	Vercel	Free, fast, easy deployment

---

Is Environment Setup Difficult?

You only need two things:

1. Node.js (v18+) — JavaScript runtime
2. Git — Version control

Once installed, run this in your terminal:

npm create astro@latest my-portfolio
cd my-portfolio
npm run dev

Open http://localhost:4321 in your browser, and you’ll see Astro’s welcome page.

---

How Should I Approach Design?

Start simple. Be efficient with Tailwind CSS.

This article focuses on technical points rather than design methodology.

This site uses Tailwind CSS. Instead of writing CSS directly, you style by adding classes to HTML, which dramatically improves development efficiency.

// tailwind.config.mjs (key parts only)
export default {
  theme: {
    extend: {
      colors: {
        brand: '#D28363',      // Main color
        surface: '#FFFCFA',    // Background
        ink: '#3D3330',        // Text color
      },
    },
  },
};

By defining a color palette, you can specify colors with class names like text-brand or bg-surface. Consistent design becomes effortless.

---

How Do I Implement a Blog?

With Astro’s Content Collections, you can write articles in Markdown.

Astro has a feature called “Content Collections” that lets you manage articles as Markdown files.

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog: blogCollection };

Then just place Markdown files in the src/content/blog/ folder. Title and date go in the frontmatter at the top of each file.

Adding new articles is simple—create a file, push to GitHub, and it’s automatically published.

---

How Do I Handle Multiple Languages?

It’s easier to design for it from the start rather than adding it later

This site supports both Japanese and English. Honestly, it takes more than twice the effort. But there are benefits:

• Reach an international audience
• Demonstrate English communication skills
• An interesting technical challenge

Astro’s i18n configuration is surprisingly simple:

// astro.config.mjs (i18n section only)
i18n: {
  defaultLocale: 'ja',
  locales: ['ja', 'en'],
  routing: {
    prefixDefaultLocale: true, // Routes as /ja/ and /en/
  },
}

URL /ja/blog shows Japanese, /en/blog shows English. Translation texts are managed in JSON files.

---

What About SEO?

At minimum, set up meta tags and OGP.

Essential SEO (Search Engine Optimization) tasks:

1. Title and description — Set for each page
2. OGP images — Images shown when shared on social media
3. Structured data — Help Google understand your content

<!-- src/layouts/BaseLayout.astro (key parts only) -->
<head>
  <title>{title}</title>
  <meta name="description" content={description} />

  <!-- OGP -->
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImage} />

  <!-- Structured Data -->
  <script type="application/ld+json" set:html={JSON.stringify(schema)} />
</head>

Don’t overthink it. Master these three basics first, then improve from there.

---

How Do I Publish? What Does It Cost?

Vercel makes it free and easy to publish.

The publishing workflow:

1. Create a GitHub repository
2. Sign up for Vercel (log in with GitHub)
3. Import your repository
4. Click “Deploy”

That’s it. Within minutes, your site is accessible worldwide.

If you want a custom domain (e.g., yourdomain.com), purchase one separately and configure it in Vercel. Domains typically cost $10-20 per year.

---

Is Post-Launch Maintenance Difficult?

Adding articles is just creating a file

Workflow for Adding Articles

1. Create a .md file in src/content/blog/en/
2. Add title and date
3. Write content in Markdown
4. git push
5. Vercel automatically builds and deploys

Periodic Tasks

# Check for dependency updates
npm outdated

# Security check
npm audit

Keeping packages updated about once a month gives peace of mind.

---

Conclusion

To everyone thinking “I want to build my own site”: You don’t need to aim for perfection from the start.

I recommend starting small and improving gradually. The tech stack introduced in this article is approachable even for beginners.

A boilerplate using the same technology as this site is available below. Feel free to use it as a reference.

If you have questions or feedback, please reach out through the contact page.

---

Source Code