How to Make a Damn Website

• by Petabite
webranthtmlsimplicity

How to Make a Damn Website

I’ve been building websites for over 15 years. Somehow, it’s gotten simultaneously easier and harder. Let me tell you how to make a website without losing your mind.

Step 1: Write HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>This is my website.</p>
</body>
</html>

Congratulations. You’re done. This is a website.

”But I Need…”

Styling?

<style>
  body {
    max-width: 650px;
    margin: 40px auto;
    font-family: system-ui;
    line-height: 1.6;
  }
</style>

Done. Your site now looks better than 90% of the web.

Interactivity?

<script>
  document.querySelector('button').onclick = () => {
    alert('Hello!');
  };
</script>

Done. You’ve added interactivity without downloading 3MB of React.

A Blog?

Create files named post-1.html, post-2.html, etc. Link between them. Done.

”But What About…”

SEO?

<meta name="description" content="My cool site">
<meta property="og:title" content="My Site">
<meta property="og:image" content="/preview.jpg">

Three tags. That’s all the SEO most sites need. The rest is content quality.

Mobile?

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  img { max-width: 100%; height: auto; }
</style>

Done. If your HTML is semantic, mobile works automatically.

Performance?

HTML is fast. You’ve won by default. If you need to optimize:

<!-- Lazy load images -->
<img src="big.jpg" loading="lazy">

<!-- Defer scripts -->
<script src="thing.js" defer></script>

When To Use Frameworks

Use React/Vue/Svelte when you’re building an application, not a website:

  • Application: Gmail, Figma, Notion
  • Website: Blog, marketing site, documentation

If your site is mostly text and links, you don’t need a framework. Full stop.

The Modern Complexity Tax

Here’s what a “modern” website requires today:

  • Node.js and npm
  • A package.json with 1,000 dependencies
  • Webpack/Vite/Parcel/Turbopack configuration
  • Babel to transpile your JavaScript
  • PostCSS to transform your CSS
  • A component framework
  • A state management library
  • A routing library
  • A build step
  • A deployment pipeline

Here’s what you actually need:

  • A text editor
  • A browser

Hosting Static Sites

# Option 1: GitHub Pages (free)
git push origin main  # Done

# Option 2: Netlify (free)
netlify deploy  # Done

# Option 3: Your own server
scp -r dist/ server:/var/www/html/  # Done

When I Actually Use Build Tools

I’ll reach for Astro or 11ty when I want:

  • Markdown for content
  • Templates to avoid repetition
  • Image optimization
  • Automatic sitemap generation

But even then, the output is static HTML. No JavaScript required.

The Philosophy

  1. HTML is enough for most sites
  2. CSS is powerful (learn Grid and Flexbox)
  3. JavaScript is enhancement, not requirement
  4. Simpler is faster (for users and developers)
  5. Static is reliable (no servers to crash)

A Challenge

Build your next project with this rule: Use the simplest tool that works.

  • Need a blog? Use 11ty or Hugo, not Next.js
  • Need a form? Use Netlify Forms, not Firebase
  • Need styling? Write CSS, not install Tailwind
  • Need a database? Use SQLite, not MongoDB

The Irony

This entire rant site? Built with Astro, Three.js, and custom GLSL shaders. The particles alone are more complex than most websites need to be.

Do as I say, not as I do.

But at least I’m self-aware about it.