curl · NielsHamelink-web · Mar 28, 2026 · Mar 29, 2026 · Mar 29, 2026 · Mar 29, 2026
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 5
+    labels:
+      - "dependencies"
+      - "automated"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,29 @@
+name: CI
+
+on:
+  push:
+    branches: ["**"]
+  pull_request:
+    branches: ["**"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: List build output
+        run: ls -la public || true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+public/assets/
+public/index.html
+public/manifest.json
diff --git a/README.md b/README.md
@@ -4,10 +4,59 @@ The curl.dev website
 
 ## Idea
 
-This website is **not** meant to be a curl.se alternative nor to "compete" with its attention.
+This website is **not** meant to be a [curl.se](https://github.com/curl/curl-www) alternative nor to "compete" with its attention.
 
-curl.dev is meant to have content to refer users to the correct targets for various curl development topics. Development *with* curl/libcurl and development *of* curl/libcurl.
+curl.dev is meant to have content to refer users to the correct targets for various curl development topics: development *with* [curl/libcurl](https://curl.se/libcurl/) and development *of* [curl/libcurl](https://curl.se/libcurl/).
 
-curl.se remains the main curl website
+[curl.se](https://github.com/curl/curl-www) remains the main curl website. [everything.curl.dev](https://github.com/curl/everything-curl) is the curl book and a good reference to link to.
 
-everything.curl.dev is the curl book, which is also fine to link to for various topics
+---
+
+## curl.dev website
+
+### Quick start
+
+Prerequisites: Node.js (LTS) and NPM.
+
+Install dependencies:
+
+```bash
+npm ci
+```
+
+Run the development server (Vite):
+
+```bash
+npm run dev
+```
+
+Open http://localhost:5173 (Vite will print the exact URL).
+
+Build for production:
+
+```bash
+npm run build
+```
+
+This produces the production output in the `public/` directory.
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+### Project layout
+
+- `index.html` - Vite entry at repository root (loads `/src/main.js`).
+- `src/` - source JavaScript, CSS and assets (imports from node modules are bundled by Vite).
+- `src/assets/` - images and other static assets that are bundled by Vite.
+- `public/` - Vite build output (contains `.gitignore` to keep generated files out of git).
+
+Fonts are self-hosted via `@fontsource` packages. The site bundles highlight.js for code highlighting.
+
+## Related GitHub projects
+
+- curl organization: https://github.com/curl
+- curl source (main repo): https://github.com/curl/curl
+- curl.se website: https://github.com/curl/curl-www
diff --git a/index.html b/index.html
@@ -1,158 +1,83 @@
+<!doctype html>
+<html lang="en">
 <head>
-  <title>everything on curl development</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>curl development - everything on curl</title>
 </head>
 <body>
-<style>
-body {
-    margin: 0px 0px 0px 0px;
-    font-family: Lora, arial, helvetica, ariel, sans-serif;
-    font-size: 140%;
-}
-a {
-  text-decoration: none;
-  color: #ffffff;
-}
-a:hover {
-  text-decoration: none;
-  color: #4040ff;
-  background-color: #093754;
-}
+  <header>
+    <div class="wrap header-row">
+      <div class="logo-container"><img id="site-logo" src="" alt="curl logo" class="logo"></div>
+      <div>
+        <h1>curl development</h1>
+        <div style="color:rgba(255,255,255,0.85);font-size:0.95rem">everything on curl - resources for the curl project</div>
+      </div>
+      <nav>
+        <a href="https://everything.curl.dev/">Everything curl</a>
+        <a href="https://curl.se/">curl.se</a>
+      </nav>
+    </div>
+  </header>
 
-a.light {
-  text-decoration: none;
-  color: #093754;
-}
-a:hover.light {
-  text-decoration: none;
-  color: #4040ff;
-  background-color: #e0e0e0;
-}
+  <main class="wrap">
+    <section class="grid">
+      <article class="card">
+        <h2>Development with curl (the tool)</h2>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-bash">curl https://example.com/
+      &lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
+      &lt;html&gt;&lt;head&gt;
+      &lt;title&gt;301 Moved Permanently&lt;/title&gt;</code></pre></div>
+        <ol>
+          <li><a href="https://everything.curl.dev/cmdline">Command line tool basics</a></li>
+          <li><a href="https://everything.curl.dev/http">How to HTTP with the curl tool</a></li>
+          <li><a href="https://everything.curl.dev/http/browserlike">Scripting browser-like tasks</a></li>
+        </ol>
+      </article>
 
-.title {
-    width: 50%;
-    background: #202020;
-    color: #ffffff;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 10px 0px 10px 0px;
-}
+      <article class="card">
+        <h2>Development with libcurl</h2>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-php">curl = curl_easy_init();
+if(curl) {
+  curl_easy_setopt(curl, CURLOPT_URL, "https://curl.se");
+  curl_easy_setopt(curl, CURLOPT_FOLLOWLOCATION, 1L);
+  res = curl_easy_perform(curl);
+  curl_easy_cleanup(curl);
+}</code></pre></div>
+        <ol>
+          <li><a href="https://everything.curl.dev/libcurl">libcurl basics</a></li>
+          <li><a href="https://everything.curl.dev/libcurl/drive">Driving transfers with libcurl</a></li>
+          <li><a href="https://everything.curl.dev/libcurl-http">HTTP with libcurl</a></li>
+        </ol>
+      </article>
 
-.withcurl {
-    width: 48%;
-    background: #093754;
-    color: #ffffff;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    height: 40%;
-}
-.withlib {
-    width: 48%;
-    background: #ffffff;
-    color: #093754;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    height: 40%;
-}
-.devcurl {
-    width: 48%;
-    background: #ffffff;
-    color: #0f564d;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    clear: left;
-    height: 100%;
-}
-.devlib {
-    width: 48%;
-    background: #0f564d;
-    color: #ffffff;
-    padding: 10px 10px 10px 10px;
-    float: left;
-    height: 100%;
-}
-.term {
-    padding: 4px 4px 4px 4px;
-    border: 2px solid white;
-}
-.whiteterm {
-    padding: 4px 4px 4px 4px;
-    border: 2px solid #093754;
-}
+      <article class="card">
+        <h2>Development of curl (the project)</h2>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-bash">./configure</code></pre></div>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-bash">make</code></pre></div>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-bash">make install</code></pre></div>
+        <ol>
+          <li><a href="https://everything.curl.dev/project">What is the curl project?</a></li>
+          <li><a href="https://everything.curl.dev/opensource/license">The curl license</a></li>
+          <li><a href="https://everything.curl.dev/source">curl source code</a></li>
+        </ol>
+      </article>
 
+      <article class="card">
+        <h2>Development of libcurl</h2>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-bash">./configure</code></pre></div>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-bash">make</code></pre></div>
+        <div class="code-wrap"><button class="copy-btn" aria-label="Copy">Copy</button><pre class="code"><code class="language-bash">make install</code></pre></div>
+        <ol>
+          <li><a href="https://everything.curl.dev/source/build">Build from source</a></li>
+          <li><a href="https://everything.curl.dev/internals">libcurl internals</a></li>
+          <li><a href="https://everything.curl.dev/source/contributing">Contribute</a></li>
+        </ol>
+      </article>
+    </section>
 
-</style>
+  </main>
 
-<div class="title">
-  <center><h1>curl development</h1>
-    <a href="https://everything.curl.dev/">"everything curl"</a> <br>
-    <a href="https://curl.se/">curl.se</a>
-  </center>
-  <p>
-</div>
-
-<div class="withcurl">
-<h2>development with curl</h2>
-<pre class="term">
-$ curl https://example.com/
-&lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
-&lt;html&gt;&lt;head&gt;
-&lt;title&gt;301 Moved Permanently&lt;/title&gt;
-&lt;/head&gt;&lt;body&gt;
-</pre>
-
-  <ol>
-    <li> <a href="https://everything.curl.dev/cmdline">Command line tool basics</a>
-    <li> <a href="https://everything.curl.dev/http">How to HTTP with the curl tool</a>
-    <li> <a href="https://everything.curl.dev/http/browserlike">Scripting browser-like tasks</a>
-  </ol>
-
-</div>
-<div class="withlib">
-<h2>development with libcurl</h2>
-<pre class="whiteterm">
-  curl = curl_easy_init();
-  if(curl) {
-    curl_easy_setopt(curl, CURLOPT_URL, "https://curl.se");
-    curl_easy_setopt(curl, CURLOPT_FOLLOWLOCATION, 1L);
-
-    res = curl_easy_perform(curl);
-    curl_easy_cleanup(curl);
-  }
-</pre>
-  <ol>
-    <li> <a class="light" href="https://everything.curl.dev/libcurl">libcurl basics</a>
-    <li> <a class="light" href="https://everything.curl.dev/libcurl/drive">driving transfers with libcurl</a>
-    <li> <a class="light" href="https://everything.curl.dev/libcurl-http">HTTP with libcurl</a>
-  </ol>
-
-</div>
-
-<div class="devcurl">
-<h2>development of curl</h2>
-<pre class="whiteterm">
-$ ./configure
-$ make
-$ make install
-</pre>
-  <ol>
-    <li> <a class="light" href="https://everything.curl.dev/project">what is the curl project?</a>
-    <li> <a class="light" href="https://everything.curl.dev/opensource/license">the curl license</a>
-    <li> <a class="light" href="https://everything.curl.dev/source">curl source code</a>
-  </ol>
-
-</div>
-
-<div class="devlib">
-<h2>development of libcurl</h2>
-<pre class="term">
-$ ./configure
-$ make
-$ make install
-</pre>
-  <ol>
-    <li> <a href="https://everything.curl.dev/source/build">build from source</a>
-    <li> <a href="https://everything.curl.dev/internals">libcurl internals</a>
-    <li> <a href="https://everything.curl.dev/source/contributing">contribute</a>
-  </ol>
-</div>
+  <script type="module" src="/src/main.js" defer></script>
 </body>
+</html>