Preview článků přímo z Gitu

Při práci s blogem postaveným na SvelteKit a hostovaným na Vercelu jsem řešil problém – jak rychle zobrazit náhled rozpracovaného článku?

Klasický postup vypadá takto:

1. Vytvořím větev s novým článkem
2. Pushnu na GitHub
3. Vercel spustí build (~60 sekund)
4. Teprve pak vidím náhled

Minutu čekat na každou změnu v textu? To je otravné.

Řešení: Načítat články přímo z GitHubu

Namísto čekání na build můžeme články načítat za běhu přímo z GitHub raw URL:

https://raw.githubusercontent.com/user/repo/branch/content/posts/clanek.md

Vytvořil jsem speciální /preview stránku, která:

• Přijme slug článku a název větve
• Stáhne markdown soubor z GitHubu
• Zparsuje frontmatter a obsah
• Zobrazí článek stejně jako na produkci

Implementace

Sdílená funkce pro načítání článků z GitHubu:

// $lib/preview/github.ts
const GITHUB_RAW_BASE = 'https://raw.githubusercontent.com/user/repo';

export async function fetchPostFromGitHub(slug: string, branch: string) {
  const url = `${GITHUB_RAW_BASE}/${branch}/content/posts/${slug}.md`;
  const response = await fetch(url);

  if (!response.ok) return null;

  const content = await response.text();
  const { data, content: body } = matter(content);

  return {
    title: data.title,
    headline: data.headline,
    description: data.description,
    text_html: body,
    // ...
  };
}

A jednoduchý server endpoint:

// routes/preview/[slug]/+page.server.ts
export const load = async ({ params, url }) => {
  const slug = params.slug;
  const branch = url.searchParams.get('branch') || 'main';

  const post = await fetchPostFromGitHub(slug, branch);

  if (!post) throw error(404, 'Článek nenalezen');

  return { post, branch };
};

Co s obrázky?

Články často obsahují náhledový obrázek. Ten také musíme načíst z GitHubu.

Vytvořil jsem proxy endpoint:

// routes/preview/files/article/[slug]/+server.ts
export const GET = async ({ params, url }) => {
  const branch = url.searchParams.get('branch') || 'main';
  const githubUrl = `${GITHUB_RAW_BASE}/${branch}/static/files/article/${params.slug}`;

  const response = await fetch(githubUrl);
  return new Response(await response.arrayBuffer(), {
    headers: { 'Content-Type': response.headers.get('content-type') }
  });
};

Proč proxy a ne přímé načítání z GitHubu? Kvůli CORS – GitHub raw URL nemá potřebné hlavičky pro všechny use-cases. Proxy endpoint navíc zachovává konsistentní URL strukturu (/files/article/slug.png) stejnou jako na produkci.

Automatické odkazy v PR

Aby nebylo potřeba ručně skládat URL, přidal jsem GitHub Action, která automaticky přidá komentář k pull requestu:

name: Preview Comment

on:
  pull_request:
    paths:
      - 'content/posts/*.md'

jobs:
  comment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Get changed articles
        run: |
          # Najdi změněné články a vygeneruj odkazy
          for file in $(git diff --name-only ...); do
            slug=$(basename "$file" .md)
            echo "- [$slug](/preview/$slug?branch=$BRANCH)"
          done

      - name: Create comment
        uses: peter-evans/create-or-update-comment@v4
        # ...

Výsledný komentář obsahuje odkazy na preview i s náhledovými obrázky.

Bezpečnost

Preview stránky by neměly být indexovány vyhledávači:

• <meta name="robots" content="noindex, nofollow">
• Pravidlo v robots.txt: Disallow: /preview/

Porovnání rychlosti

Způsob	Čas
Vercel build	~60 sekund
Preview z GitHubu	~200 ms

Rozdíl je dramatický – místo minuty vidím změny okamžitě.

Závěr

Toto řešení odděluje náhled obsahu od nasazení aplikace:

• Změny v článcích → okamžitý náhled přes /preview
• Změny v kódu → klasický Vercel build

Není potřeba žádná externí služba ani database. Stačí GitHub raw URL a pár řádků kódu.