# Auf Hostinger bereitstellen [Hostinger](https://hostinger.com) ist ein beliebter Shared-Hosting-Anbieter. Diese Anleitung zeigt, wie Sie BentoPDF auf dem Shared Hosting von Hostinger bereitstellen. ## Voraussetzungen - Hostinger-Hosting-Tarif mit Zugriff auf den Dateimanager - Lokal installiertes Node.js zum Bauen ## Schritt 1: Projekt bauen ```bash git clone https://github.com/alam00000/bentopdf.git cd bentopdf npm install npm run build ``` Die gebauten Dateien liegen im Ordner `dist`. ## Schritt 2: Auf Hostinger hochladen ### Bereitstellung auf der Hauptdomain 1. Melden Sie sich bei Ihrem Hostinger-Konto an 2. Gehen Sie zu **File Manager** → **public_html** 3. **Löschen Sie** vorhandene Dateien (bei Bedarf vorher sichern) 4. **Laden Sie** den gesamten Inhalt Ihres lokalen Ordners `dist` nach `public_html` **hoch** ### Bereitstellung in einem Unterverzeichnis Wenn Sie in einem Unterverzeichnis bereitstellen (z. B. `yourdomain.com/pdf-tools/`): 1. Mit der richtigen Basis-URL bauen: ```bash BASE_URL=/pdf-tools/ npm run build ``` 2. Den Ordner in Hostinger erstellen: - Gehen Sie zu **File Manager** → **public_html** - Erstellen Sie einen neuen Ordner: `pdf-tools` 3. Laden Sie den gesamten Inhalt von `dist` nach `public_html/pdf-tools/` hoch ## Schritt 3: .htaccess-Datei erstellen Erstellen Sie eine `.htaccess`-Datei im Stammverzeichnis Ihres Bereitstellungsordners (`public_html` oder `public_html/pdf-tools/`): ::: warning Wichtig Bei der Bereitstellung in einem Unterverzeichnis änderen Sie `RewriteBase /` in `RewriteBase /pdf-tools/` (oder in den Namen Ihres Ordners). ::: ```apache RewriteEngine On RewriteBase / # ============================================ # 1. SECURITY HEADERS (CRITICAL FOR WASM) # ============================================ Header always set X-Frame-Options "SAMEORIGIN" Header always set X-Content-Type-Options "nosniff" Header always set X-XSS-Protection "1; mode=block" Header always set Referrer-Policy "strict-origin-when-cross-origin" Header always set Permissions-Policy "geolocation=(), microphone=(), camera=()" # REQUIRED for soffice.js (SharedArrayBuffer) Header always set Cross-Origin-Opener-Policy "same-origin" Header always set Cross-Origin-Embedder-Policy "require-corp" # ============================================ # 2. BROWSER CACHING # ============================================ ExpiresActive On ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/wasm "access plus 1 year" ExpiresByType application/gzip "access plus 1 year" ExpiresByType text/html "access plus 0 seconds" # ============================================ # 3. COMPRESSION (STANDARD) # ============================================ # Prevent server from double-compressing files SetEnvIfNoCase Request_URI "\.gz$" no-gzip SetEnvIfNoCase Request_URI "\.br$" no-gzip SetEnvIfNoCase Request_URI "\.wasm$" no-gzip AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE font/woff AddOutputFilterByType DEFLATE font/ttf # ============================================ # 4. MIME TYPES & SPECIAL FILE HANDLING # ============================================ AddType application/javascript .js .mjs AddType application/wasm .wasm AddType font/woff2 .woff2 AddType font/woff .woff AddType image/webp .webp # Handle soffice.wasm.gz correctly ForceType application/wasm Header set Content-Encoding "gzip" Header set Cross-Origin-Resource-Policy "cross-origin" Header append Vary Accept-Encoding # Handle data.gz ForceType application/octet-stream Header set Content-Encoding "gzip" Header append Vary Accept-Encoding # ============================================ # 5. REDIRECTS & ROUTING # ============================================ # Canonical WWW (update domain as needed) RewriteCond %{HTTP_HOST} ^bentopdf\.com [NC] RewriteRule ^(.*)$ https://www.bentopdf.com/$1 [L,R=301] # Force HTTPS RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] # Remove trailing slash (except for language root directories) RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !^/(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/$ RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [R=301,L] # Existing files/dirs - serve directly RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # ============================================ # 5.1. LANGUAGE ROUTES # ============================================ # Supported languages: de, es, zh, zh-TW, vi, it, id, tr, fr, pt # English has no prefix - served from root # English prefix redirects to root (for SEO consistency) RewriteRule ^en/?$ / [R=301,L] RewriteRule ^en/(.+)$ /$1 [R=301,L] # Language prefix root (e.g., /de/ -> /de/index.html) RewriteCond %{DOCUMENT_ROOT}/$1/index.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/?$ /$1/index.html [L] # Language prefix with path (e.g., /de/merge-pdf -> /de/merge-pdf.html) RewriteCond %{DOCUMENT_ROOT}/$1/$2.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/([^/]+)/?$ /$1/$2.html [L] # ============================================ # 5.5. DOCS ROUTING (VitePress) # ============================================ RewriteCond %{REQUEST_URI} ^/docs RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME}\.html -f RewriteRule ^(.*)$ $1.html [L] # ============================================ # 6. ADD .HTML EXTENSION IF FILE EXISTS (ROOT LEVEL ONLY) # ============================================ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule ^([^/]+)$ $1.html [L] # ============================================ # 7. ERROR PAGES # ============================================ ErrorDocument 404 /404.html ``` ## Beispiel für .htaccess im Unterverzeichnis Für `yourdomain.com/pdf-tools/` passen Sie diese Zeilen an: ```apache RewriteBase /pdf-tools/ # ... (same content as above, but update paths) ... # Language prefix root RewriteCond %{DOCUMENT_ROOT}/pdf-tools/$1/index.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/?$ /pdf-tools/$1/index.html [L] # Language prefix with path RewriteCond %{DOCUMENT_ROOT}/pdf-tools/$1/$2.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/([^/]+)/?$ /pdf-tools/$1/$2.html [L] # Root level .html extension RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule ^([^/]+)$ $1.html [L] ErrorDocument 404 /pdf-tools/404.html ``` ## Fehlerbehebung ### WASM-Dateien werden nicht geladen Stellen Sie sicher, dass die MIME-Typen in der `.htaccess` korrekt gesetzt sind: ```apache AddType application/wasm .wasm ``` ### LibreOffice-Werkzeuge funktionieren nicht Die Sicherheits-Header sind für SharedArrayBuffer entscheidend: ```apache Header always set Cross-Origin-Opener-Policy "same-origin" Header always set Cross-Origin-Embedder-Policy "require-corp" ``` Werden die Header nicht angewendet, bitte den Hostinger-Support, `mod_headers` zu aktivieren. ### 404-Fehler beim Neuladen der Seite Stellen Sie sicher, dass die Regel für die Endung `.html` und die Sprachrouten korrekt konfiguriert sind. BentoPDF nutzt statische HTML-Dateien, kein SPA-Routing: ```apache # Language routes serve actual files from language directories RewriteCond %{DOCUMENT_ROOT}/$1/$2.html -f RewriteRule ^(de|es|zh|zh-TW|vi|it|id|tr|fr|pt)/([^/]+)/?$ /$1/$2.html [L] # Root level pages RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule ^([^/]+)$ $1.html [L] ``` ### Limits für Datei-Uploads Hostinger kann Dateigrößenlimits haben. Laden Sie WASM-Dateien separat hoch, wenn der Massen-Upload fehlschlägt.