Skip to content

01-install.md

Latest commit

 

History

History
183 lines (133 loc) · 5.35 KB

01-install.md

File metadata and controls

183 lines (133 loc) · 5.35 KB
Raw

Putting it online

There is no build step, no Node, no database and no PHP. It is HTML, one CSS file, one JS file and some images. If you can upload files, you can host this.

The short version

Upload everything inside template/ into your web root. Not the template folder itself — its contents.

public_html/
├─ index.html
├─ guides.html
├─ 404.html
├─ favicon.ico
├─ robots.txt
├─ sitemap.xml
├─ .htaccess
└─ assets/

Load your domain. That is the whole install.

Where to host it

Any of these work, and the first three are free.

Cloudflare Pages (recommended)

Free, fast everywhere, HTTPS included, and it will not fall over when your server gets popular.

  1. Push template/ to a GitHub repository.
  2. Cloudflare dashboard → Workers & Pages → Create → Pages → Connect to Git.
  3. Build command: leave empty. Build output directory: /.
  4. Deploy, then add your domain under Custom domains.

There is nothing to build, so builds cannot fail.

Netlify

Drag the template folder onto https://app.netlify.com/drop. That is the entire process. Add a domain afterwards under Domain settings.

GitHub Pages

Push template/ to a repository, then Settings → Pages → Deploy from a branch. Works, but be aware it does not read .htaccess, so /guides will not work as a shortcut for /guides.html.

Your own cPanel / shared host

Upload the contents of template/ into public_html over FTP or the file manager. .htaccess does the rest.

Two things people miss:

  • .htaccess starts with a dot, so most FTP clients hide it. Turn on "show hidden files" or it silently never gets uploaded.

  • Some hosts serve .webp as a download instead of an image. If your backgrounds do not appear, add this to .htaccess:

    AddType image/webp .webp

FiveM server box

Do not host it on the same machine as your FiveM server if you can avoid it. A website getting traffic and a game server holding 128 tick-rate connections want different things from a CPU, and the game loses.

nginx

.htaccess is an Apache file and nginx ignores it completely. The equivalent:

server {
    listen 443 ssl;
    server_name yourserver.com;
    root /var/www/yourserver;
    index index.html;

    # /guides works as well as /guides.html
    location / {
        try_files $uri $uri.html $uri/ =404;
    }

    error_page 404 /404.html;

    # A year on things whose names change when they change.
    location ~* \.(webp|png|jpg|svg|ico|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # An hour on the things you edit.
    location ~* \.(html|css|js)$ {
        expires 1h;
    }

    gzip on;
    gzip_types text/css application/javascript text/html image/svg+xml;

    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
}

Before you tell anybody about it

A checklist, in the order things get forgotten.

  • Replaced every deathm.example URL — there are some in index.html, guides.html, robots.txt and sitemap.xml. Search the folder for deathm.example and you will find all of them.
  • Replaced https://discord.gg/your-invite with your real invite.
  • Replaced the logo at assets/img/logo.webp.
  • Made an og-image.jpg at 1200×630 and put it in assets/img/. This is the picture people see when your link is pasted into Discord, and without it they see nothing.
  • Changed the title and description in <head>.
  • HTTPS works and http:// redirects to it.
  • Opened it on an actual phone.

A content security policy, if you want one

Deliberately not enabled by default: the pages load fonts from Google and use inline style attributes, so a policy tight enough to be worth having would break the design on somebody else's host without explaining why.

If you want one, this matches what the template actually does:

<IfModule mod_headers.c>
    Header always set Content-Security-Policy "default-src 'self'; \
      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; \
      font-src 'self' https://fonts.gstatic.com; \
      img-src 'self' data:; \
      script-src 'self'; \
      frame-ancestors 'self'; \
      base-uri 'self'; \
      form-action 'self'"
</IfModule>

'unsafe-inline' for styles is required because the markup uses inline style attributes for the background filters. Removing them means moving about twenty declarations into the stylesheet — worth doing if a policy matters to you, unnecessary for most servers.

Self-hosting the fonts

The pages fetch Oswald and Inter from Google. That is one extra connection on first load, and in some jurisdictions people prefer not to send visitor IPs to Google at all.

To host them yourself:

  1. Download both families from https://fonts.google.com, or use https://gwfh.mranftl.com which gives you the woff2 files and the CSS.
  2. Put the woff2 files in assets/fonts/.
  3. Delete the three fonts.googleapis.com / fonts.gstatic.com lines from the <head> of each page.
  4. Add your own @font-face rules — either in a small <style> block or in build/input.css if you are recompiling.

Use font-display: swap, or the page renders with invisible text until the fonts arrive.