🚀 How to Rank #1 on Google with This New Ultrafast Web Framework

A practical guide to building a blazing-fast, SEO-optimized website using a modern, minimal, server-side rendered framework: Slick Server.

🧠 The Problem: Why Isn't My Website Ranking on Google?

It’s one of the most common issues developers and indie creators face:

"My site looks great. It works perfectly. But I’m nowhere to be found on Google."

If that sounds familiar, the likely culprits are:

1. Poor performance


2. Client-side rendering only


3. Unoptimized metadata & structure

To rank on Google in 2025, a website must be fast, crawlable, and cleanly structured. That means server-side rendering (SSR), semantic HTML, and lightning-fast load times.

Enter: Slick Server.

🧬 What is Slick Server?

Slick Server is a minimal, ultrafast framework built on top of Web Standards and running on Deno. It's designed for server-side rendering, with automatic asset optimization, and built-in SEO-first architecture.

Key Features

• ⚡ SSR by default (great for SEO)


• 🔎 Metadata and <head> optimization


• 🧹 Automatic minification of all assets (CSS, JS, TS)


• 🧱 Semantic project structure


• 🗂️ Static file serving


• 💡 Optional SPA client with @webtools/slick-client
  

🎯 Goal of this Tutorial

We'll build a website that:

• Loads in under 1 second


• Renders all content server-side


• Follows SEO best practices


• Is easy to maintain and extend

Ideal for freelancers, indie hackers, and developers who want performance without complexity.

📦 Step 1 — Install Slick Server

First, create a new Deno project:

deno add jsr:@webtools/slick-server

Create the basic directory structure:

mkdir pages templates static

mkdir -p static/styles/app static/scripts/app static/assets

touch index.ts pages/index.tsx templates/app.tsx

🧪 Step 2 — Setup Your Main Server

// index.ts

import { Slick } from "@webtools/slick-server";



const slick = new Slick(import.meta.dirname!, {

    env: {

        API_URL: "https://api.example.com",

    },

    lang: "en",

    port: 3000,

    r404: "/",

    client: true, // enables SPA helpers

});



await slick.start();

Run your server with:

deno run -A index.ts

📄 Step 3 — Create a Server-Rendered Homepage

// pages/index.tsx

import * as Slick from "@webtools/slick-server";



export default {

    url: "/",

    template: "app",

    title: "Freelance Web Developer – High Performance Sites",

    styles: ["/styles/app/index.css"],

    scripts: ["/scripts/app/index.ts"],

    head: (

        <>

            <title>Freelance Web Developer – SEO & Speed Expert</title>

            <meta name="description" content="Building modern, SEO-optimized, high-performance websites with Deno and Slick Server." />

            <meta name="robots" content="index, follow" />

            <link rel="canonical" href="https://example.com/" />

        </>

    ),

    body: (

        <>

            <h1>Welcome to My Portfolio</h1>

            <p>I build fast, SEO-ready websites using modern technologies.</p>

        </>

    ),

    onpost: null,

    onrequest: null,

} satisfies Slick.Page;

This page will be fully rendered on the server before it reaches the browser — making it immediately readable by search engines.

🧱 Step 4 — Define a Global Template

// templates/app.tsx

import * as Slick from "@webtools/slick-server";



export default {

    name: "app",

    favicon: "/favicon.ico",

    styles: ["/styles/reset.css", "/styles/app.css"],

    scripts: ["/scripts/app.ts"],

    head: <meta name="viewport" content="width=device-width, initial-scale=1.0" />,

    body: (

        <>

            <header>

                <h2>My Site</h2>

            </header>

            <main>{/* Page content is injected here */}</main>

            <footer>© 2025 All rights reserved</footer>

        </>

    ),

    onrequest: null,

} satisfies Slick.Template;

This template wraps all your pages with shared layout, styles, and scripts.

🧭 Step 5 — Add SEO Essentials: Sitemap & robots.txt

Create these files inside /static/ so they're publicly accessible.

# static/robots.txt

User-agent: *

Allow: /



Sitemap: https://example.com/sitemap.xml

<!-- static/sitemap.xml -->

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    <url>

        <loc>https://example.com/</loc>

        <lastmod>2025-07-12</lastmod>

        <priority>1.0</priority>

    </url>

</urlset>

Googlebot will find and index your site faster and more accurately.

🧪 Step 6 — Run SEO Audit with Lighthouse

Head over to Google PageSpeed Insights or run a Lighthouse audit.

With Slick Server, you should easily score:

• ✅ Performance: 100
  


• ✅ SEO: 100
  


• ✅ Accessibility: 100
  


• ✅ Best Practices: 100
  

That’s the power of SSR + optimized structure + zero config minification.

💡 Bonus: Dynamic Metadata with onrequest

If you're building a blog or dynamic site, you can update metadata dynamically at request time:

onrequest: async (req) => {

    const post = await fetch("https://api.example.com/post/123").then(res => res.json());

    req.data.title = post.title;

}

This ensures every page has SEO-ready titles, even with dynamic content.

✅ Summary

Slick Server helps you check all the SEO boxes out of the box:

• ✅ Fast initial load time


• ✅ Server-rendered content


• ✅ Proper meta tags and structure


• ✅ Clean URLs and sitemap


• ✅ Simple setup with modern standards

Whether you're a freelancer, solo dev, or working on a side project, Slick Server gives you the SEO boost you need without the bloat.

📚 Resources

• Slick Server GitHub Repo


• Deno Documentation


• Google SEO Starter Guide

🙋 Got Questions?

Feel free to leave a comment or fork the example on GitHub to start experimenting.