Vlastní nothings krok za krokem

Nemusíš nic programovat ani instalovat. Stačí účet Google, tak půl hodiny klidu, a jdeme na to. 🙂

Než začneš: co jsou ty dvě služby

Návod je plný cizích názvů, ale schované jsou za nimi dvě obyčejné věci.

🚀 Netlify je výloha

Místo v ulici, kde tvůj web stojí a kam za ním lidé přijdou. Ty tam jen přetáhneš složku se soubory a Netlify se postará o zbytek: dá webu adresu, zámeček s https a rozešle ho po světě. Nic se neinstaluje, nic se nenastavuje.

Uděláš s ním jednu věc: přetáhneš myší složku do okna prohlížeče.

🔥 Firebase je sklad vzadu

Ve výloze je jen prázdný regál. Firebase je sklad, kde leží tvoje fotky, texty a štítky, a taky vrátný, který pozná, že jsi to ty, a pustí dovnitř psát jenom tebe. Návštěvník si smí prohlížet, ale nic nepřepíše.

Uděláš s ním tři věci: založíš projekt, zapneš přihlášení Googlem a vložíš dva odstavce pravidel, které máš přiložené hotové.

💛 A teď to hlavní. Nebudeš programovat. Nebudeš nic instalovat do počítače. Neuvidíš žádný černý terminál. Celý návod je klikání ve dvou webech, jedno přetažení složky a zkopírování pár řádků z jednoho okna do druhého. Nejdéle ti potrvá čekání, než se stránky načtou. Obě služby mají verzi zdarma, která na osobní web bohatě stačí, a kartu po tobě nikdo nechce.

Když se někde zasekneš, nic se nerozbije. Účet si můžeš kdykoli smazat a začít znovu, a když se ti nechce sám, kousek níž je oddíl o pomoci od AI, která tě provede krok za krokem.

📦 Rozbal stažený ZIP

Uvnitř je hotový web. Najdi js/config.example.js, udělej jeho kopii a pojmenuj ji config.js. Za chvíli ji vyplníš.
🔥 Založ si projekt ve Firebase

Na console.firebase.google.com klikni na Add project. Až budeš zakládat databázi, vyber si region blízko svým čtenářům, třeba evropský. Fotky se pak budou stahovat odtamtud a později se to už nedá změnit. Pak v něm zapni Firestore Database, Storage a v Authentication povol přihlášení přes Google (a nic jiného).
🔗 Propoj web s Firebase

V nastavení projektu přidej webovou aplikaci (ikonka </>). Údaje, které se ukážou, zkopíruj do js/config.js a připiš k nim svůj e-mail.
🔒 Publikuj bezpečnostní pravidla

Ve Firestore otevři Rules a vlož obsah souboru firestore.rules. Totéž udělej ve Storage se souborem storage.rules. V obou nahraď ukázkový e-mail tím svým a dej Publish.
🚀 Nahraj web na Netlify

Na Netlify Drop přetáhni obsah rozbalené složky (ne složku samotnou). Adresu, kterou dostaneš, pak přidej ve Firebase do Authentication → Settings → Authorized domains.
🔑 Přihlas se

Otevři svůj nový web, klikni na Přihlásit a přihlas se Googlem pod adresou, kterou jsi napsal do config.js. Objeví se ti tlačítka pro psaní.

✨ A je to. Píšeš přímo na webu: příspěvky, podstránky, jejich názvy i adresy. Do souborů už sahat nemusíš. A když si web přidáš na plochu telefonu nebo počítače, budeš ho mít jako běžnou aplikaci (návod níž).

Nevíš si rady? Zkus pomoc AI

Sám jsem to jinak než s AI nezprovoznil. Nejsem programátor a bez ní bych to nedal dohromady, takže tuhle cestu rozhodně doporučuju. Ale je to na tobě, návod výš je psaný tak, aby se dal projít i bez ní.

Stažený ZIP můžeš vložit do ChatGPT nebo Clauda spolu s tímhle promptem. Provedou tě nastavením krok za krokem a po tvém souhlasu ti část práce můžou i udělat.

Než to uděláš: je to dobrovolná pomůcka. Před každou změnou si přečti, co chce AI udělat, a potvrď jen to, čemu rozumíš. Nikdy neposílej hesla, ověřovací kódy ani jiné tajné údaje. Za nastavení, zabezpečení, zveřejněný obsah i případné náklady odpovídá provozovatel webu, tedy ty.

Zkopíruj tenhle prompt:

Pomoz mi zprovoznit přiloženou aplikaci nothings. Nejsem programátor, proto postupuj
jednoduše a dávej mi vždy jen jeden další krok. Nejdřív si projdi celý ZIP i přiložený návod.
Nic neměň bez mého souhlasu a před každou změnou v cizí službě mi srozumitelně vysvětli,
co přesně uděláš a co to může způsobit.

Proveď mě postupně těmito kroky:
1. založení vlastního projektu ve Firebase;
2. zapnutí přihlášení přes Google, Firestore Database a Storage;
3. vyplnění mého js/config.js podle js/config.example.js;
4. úprava firestore.rules a storage.rules na můj e-mail a jejich publikování;
5. nahrání webu na Netlify a přidání jeho adresy do Firebase → Authorized domains;
6. ověření, že se dá přihlásit, ukládat, mazat a že se změny objeví i v druhém okně;
7. volitelně Firebase App Check s mým vlastním reCAPTCHA Enterprise Site Key;
8. u App Check nejdřív jen sleduj metriky a Enforce nezapínej, dokud nebude jisté,
   že požadavky z mého webu procházejí.

Používej jen údaje z mého projektu. Nikdy po mně nechtěj heslo, ověřovací kód, tajný klíč
ani číslo karty. Když se musí přihlásit člověk nebo potvrdit citlivý krok, zastav se a napiš
mi přesně, co mám udělat sám. Když si nebudeš jistý, nehádej a řekni mi to.

Ještě než to pustíš ven

Tři věci, které se vyplatí projít, dokud si to jenom zkoušíš.

🔑 Co přesně patří do config.js

window.NOTHINGS_CONFIG = {
  firebase: {
    apiKey: "…",
    authDomain: "…",
    projectId: "…",
    storageBucket: "…",
    messagingSenderId: "…",
    appId: "…"
  },
  appCheckSiteKey: "",
  adminEmails: ['tvuj@email.cz']
};

Tyhle údaje nejsou heslo a je v pořádku, že je vidět každý. Data chrání publikovaná pravidla a přihlášení, ne utajení klíče.

🔐 Bezpečnost v kostce

Nech zapnuté jen přihlášení Googlem. S e-mailem a heslem by si kdokoli mohl založit účet s tvojí adresou.
Stejný správcovský e-mail musí být na třech místech: js/config.js, firestore.rules a storage.rules.
Pravidla se publikují ve Firebase. Nahrání webu na Netlify je tam nedostane.
Po každé změně pravidel si web zkus otevřít v anonymním okně a zkontroluj, že nevidíš nic, co bys vidět neměl.
V Google Cloud → Billing si nastav upozornění na rozpočet.
Občas si stáhni zálohu a ulož ji mimo počítač.

🗂️ Co je ve složce

index.html          stránka, styly, texty pro vyhledávače
navod.html          tenhle návod
js/config.js        tvoje nastavení (nesdílí se)
js/core.js          Firebase, ukládání fotek, pomocné funkce
js/security.js      čištění vloženého HTML (DOMPurify)
js/components.js    drobné kousky rozhraní
js/gallery.js       mřížka, karty, editor záznamu, podstránky
js/app.js           stav aplikace, synchronizace, záloha
netlify/functions/  náhledy odkazů
firestore.rules     pravidla databáze
storage.rules       pravidla úložiště

Žádný build krok, soubory se načítají tak, jak jsou. Komentáře jsou česky. Když něco změníš, stačí složku nahrát na Netlify znovu.

Když to běží, co s tím

Všechno, co se dá dělat přímo na webu, bez sahání do souborů.

📄 Vlastní stránky: „O projektu", „Kontakt", cokoli

Přihlas se a otevři Nastavení → Stránky. Tlačítkem + Nová stránka založíš další; obsah se píše stejným editorem jako u příspěvků.

U každé stránky si zvlášť zapneš, jestli má být v horním menu a jestli v patičce. Může tedy být jen v menu, jen v patičce, na obou místech, nebo nikde, a pak se k ní dostane jen ten, komu pošleš odkaz.

Koncept znamená, že stránku vidíš jen ty. Až ji budeš chtít pustit ven, přepneš na Publikováno. Smazaná stránka jde v koši obnovit.

Adresu (například /kontakt) můžeš kdykoli změnit. Appka ji sama převede do bezpečného tvaru bez háčků a mezer a ta stará bude fungovat dál, takže se nerozbijí odkazy, které už někde jsou.

🌍 Dva jazyky

Rozhraní umí česky a anglicky. V js/config.js nastavíš jazyk: 'cs' nebo 'en' a přes dvojjazycne: true se v hlavičce objeví malý přepínač CS / EN, aby si návštěvník mohl vybrat sám. Jeho volba se pamatuje.

U každé stránky vyplníš zvlášť anglický název a text. Co nepřeložíš, zůstane česky, takže se nikde neobjeví prázdno.

Chceš třetí jazyk? Zkopíruj v js/jazyk.js blok en, přejmenuj ho (třeba na de), přelož pravou stranu a nastav jazyk: 'de'.

💬 Jak funguje vzkazník

Napsat vzkaz může kdokoli, ale na webu se objeví, až když ho pustíš dál. Dokud jsi přihlášený, vidíš nad seznamem oddíl „Čeká na schválení" s tlačítky Zveřejnit a Smazat.

Návštěvník čekající vzkazy nevidí. E-mail odesílatele vidíš jen ty a do zveřejněného vzkazu se nepřenáší.

📱 Nainstaluj si to jako appku, na mobil i na počítač

Nemusíš to pokaždé hledat v prohlížeči. Web se dá přidat na plochu a chová se pak jako běžná aplikace: vlastní ikona, celá obrazovka, žádný adresní řádek.

iPhone a iPad: otevři web v Safari, ťukni na ikonu sdílení (čtvereček se šipkou) a vyber Přidat na plochu.
Android: v Chromu ťukni na tři tečky vpravo nahoře a vyber Přidat na plochu nebo Nainstalovat aplikaci.
Počítač: v Chromu nebo Edge se vpravo v adresním řádku objeví ikonka instalace; na Macu v Safari najdeš v menu Soubor → Přidat do Docku.

Instaluje se to samo, nic se nestahuje z obchodu s aplikacemi. Je to pořád ten samý web, jen v okně bez prohlížeče.

💾 Záloha, i s fotkami

Přihlášený správce má v liště tlačítko se šipkou dolů. Stáhne JSON se všemi záznamy včetně koše, a to funguje vždycky.

Aby se stáhly i fotky jako ZIP, musí prohlížeč dostat povolení číst je ze Storage (CORS). Nastavíš to jednou v Google Cloud přes Cloud Shell:

printf '[{"origin":["https://TVOJE-DOMENA"],"method":["GET","HEAD"],"responseHeader":["Content-Type"],"maxAgeSeconds":3600}]' > cors.json && gcloud storage buckets update gs://TVUJ-BUCKET --cors-file=cors.json

Bez toho appka funguje úplně stejně, jen záloha obsahuje texty a odkazy na fotky. Firebase sám zálohy nedělá, takže ta tvoje stažená je jediná kopie mimo Google. Dělej ji čas od času a odlož ji někam jinam než do počítače.

Když to chceš dotáhnout

Nepovinné. Web funguje i bez toho.

🛡️ Doporučená ochrana: Firebase App Check

App Check pozná, že požadavky chodí opravdu z tvého webu, a ne z cizího skriptu. Pro první spuštění ho nepotřebuješ, ale u veřejného webu se vyplatí.

V Google Cloud si vytvoř vlastní klíč reCAPTCHA Enterprise typu Web a přidej k němu svou doménu.
Ve Firebase otevři App Check, zaregistruj svou webovou aplikaci a vlož ten Site Key.
Stejný klíč napiš do js/config.js k appCheckSiteKey.
Web publikuj a chvíli sleduj metriky. Enforce zapni až potom, jinak si můžeš zamknout vlastní web.

Klíč je vázaný na doménu, takže každý web potřebuje svůj vlastní. Klíč z nothings.cz v balíčku není a fungovat by ti nemohl.

🔎 Vyhledávače, na rovinu

Titulek a popis podstránek se nastavují až v prohlížeči, po načtení obsahu z Firestore. Google si stránku obvykle vykreslí a přečte, ale není to plnohodnotné serverové SEO: náhledy odkazů na sociálních sítích a menší roboti uvidí jen výchozí hodnoty z index.html.

Kdybys chtěl mít jistotu, musel by obsah vracet server, nebo by se stránky musely při nasazení předgenerovat do HTML. Tenhle projekt to nedělá a nepředstírá to.

Co nothings umí

fotky (samy se zmenší, než se nahrají), poznámky, odkazy s náhledem, mapy, videa;
štítky, hledání, kolekce, připínání a koš s obnovením;
vlastní podstránky a moderovaný vzkazník;
zálohu jedním kliknutím;
instalaci na plochu mobilu i počítače, jako by to byla appka;
veřejné prohlížení, ale upravovat můžeš jen ty.

Licence

MIT, viz soubor LICENSE. Dělej si s tím, co chceš. Je to osobní projekt, který dávám k dispozici bez technické podpory.

Build your own nothings, step by step

You do not have to program anything or install anything. You need a Google account, about half an hour of quiet, and off we go. 🙂

↓ Download nothings (ZIP)

Before you start: what those two services are

The guide is full of foreign names, but there are only two ordinary things behind them.

🚀 Netlify is the shop window

A spot on the street where your site stands and where people come to see it. All you do is drag a folder of files there, and Netlify handles the rest: it gives the site an address, the little padlock for https, and sends it around the world. Nothing to install, nothing to configure.

You do one thing with it: drag a folder into a browser window.

🔥 Firebase is the storeroom out back

The shop window is just an empty shelf. Firebase is the storeroom where your photos, texts and tags live, and also the doorman who recognises you and lets only you in to write. Visitors may look around, but they cannot change a thing.

You do three things with it: create a project, turn on Google sign-in, and paste in two paragraphs of rules that come ready-made in the package.

💛 And now the important part. You will not be programming. You will not install anything on your computer. You will never see a black terminal window. The whole guide is clicking around two websites, one drag of a folder, and copying a few lines from one window into another. The longest part is waiting for pages to load. Both services have a free tier that is plenty for a personal site, and nobody asks you for a card.

If you get stuck somewhere, nothing breaks. You can delete the account and start over at any time, and if you would rather not go it alone, there is a section further down about letting an AI walk you through it step by step.

📦 Unzip what you downloaded

Inside is a finished site. Find js/config.example.js, make a copy of it and name the copy config.js. You will fill it in shortly.
🔥 Create a Firebase project

At console.firebase.google.com click Add project. Then turn on Firestore Database, Storage, and under Authentication enable sign-in with Google (and nothing else). When you create the database, pick a region close to your readers. Photos are served from there and it cannot be changed later.
🔗 Connect the site to Firebase

In the project settings add a web app (the </> icon). Copy the values it shows into js/config.js and add your own email address.
🔒 Publish the security rules

In Firestore open Rules and paste in the contents of firestore.rules. Do the same in Storage with storage.rules. Replace the example email with yours in both and hit Publish.
🚀 Upload the site to Netlify

Drag the contents of the unzipped folder (not the folder itself) onto Netlify Drop. Then add the address you get to Firebase under Authentication → Settings → Authorized domains.
🔑 Sign in

Open your new site, click Sign in and use the Google account whose address you put in config.js. The writing buttons will appear.

✨ That is it. You write directly on the site: entries, pages, their names and their addresses. You never have to touch the files again. And if you add the site to your phone's or computer's home screen, you get it as a regular app (see below).

Stuck? Ask an AI

I could not have set this up any other way myself. I am not a programmer and without AI I would not have got it together, so I really do recommend this route. But it is up to you; the guide above is written so you can walk through it without one.

You can drop the downloaded ZIP into ChatGPT or Claude along with the prompt below. They will take you through the setup step by step and, with your approval, do part of the work for you.

Before you do: this is optional help. Read what the AI wants to do before every change and approve only what you understand. Never send passwords, verification codes or other secrets. Whoever runs the site is responsible for its setup, its security, what gets published on it and any costs. That is you.

Copy this prompt:

Help me get the attached nothings app running. I am not a programmer, so keep it simple
and give me one step at a time. Start by going through the whole ZIP and the included guide.
Do not change anything without my approval, and before every change in an outside service
explain in plain words what you are about to do and what it can affect.

Walk me through these steps:
1. creating my own Firebase project;
2. turning on Google sign-in, Firestore Database and Storage;
3. filling in my js/config.js based on js/config.example.js;
4. editing firestore.rules and storage.rules to my email and publishing them;
5. uploading the site to Netlify and adding its address to Firebase → Authorized domains;
6. checking that I can sign in, save, delete, and that changes show up in a second window;
7. optionally Firebase App Check with my own reCAPTCHA Enterprise Site Key;
8. with App Check, watch the metrics first and do not turn on Enforce until it is clear
   that requests from my site get through.

Use only details from my own project. Never ask me for a password, a verification code,
a secret key or a card number. When a human has to sign in or confirm something sensitive,
stop and tell me exactly what to do myself. If you are unsure, do not guess, tell me.

Before you go live

Three things worth going through while you are still just trying it out.

🔑 What goes into config.js

window.NOTHINGS_CONFIG = {
  firebase: {
    apiKey: "…",
    authDomain: "…",
    projectId: "…",
    storageBucket: "…",
    messagingSenderId: "…",
    appId: "…"
  },
  appCheckSiteKey: "",
  adminEmails: ['you@example.com']
};

These values are not a password and it is fine that everyone can see them. Your data is protected by the published rules and by signing in, not by hiding a key.

🔐 Security in short

Keep only Google sign-in enabled. With email and password anyone could create an account with your address.
The same owner email has to be in three places: js/config.js, firestore.rules and storage.rules.
Rules are published in Firebase. Uploading the site to Netlify does not get them there.
After every rules change open your site in a private window and check you cannot see anything you should not.
In Google Cloud → Billing set up a budget alert.
Download a backup now and then and keep it off your computer.

🗂️ What is in the folder

index.html          the page, the styles, the texts for search engines
navod.html          this guide
js/config.js        your settings (not shared)
js/jazyk.js         interface languages
js/core.js          Firebase, photo handling, helpers
js/security.js      cleaning pasted HTML (DOMPurify)
js/components.js    small pieces of the interface
js/gallery.js       the grid, the cards, the entry editor, pages
js/app.js           app state, syncing, backups
netlify/functions/  link previews
firestore.rules     database rules
storage.rules       storage rules

No build step, the files load as they are. The comments are in Czech. When you change something, just upload the folder to Netlify again.

Living with it

Everything you can do straight on the web, without touching a single file.

📄 Your own pages: About, Contact, anything

Sign in and open Settings → Pages. The + New page button creates another one; the content uses the same editor as your entries.

For each page you decide separately whether it shows in the top menu and whether it shows in the footer. So a page can be in the menu only, in the footer only, in both, or in neither, in which case only people you send the link to will find it.

Draft means only you can see it. Switch it to Published when you want it out in the world. A deleted page can be restored from the trash.

You can change the address (say /contact) whenever you like. The app turns it into a safe form without accents or spaces, and the old address keeps working, so links that are already out there do not break.

Every page can also have an English version: open the page, click Edit and expand “English version of the page”. Anything you leave empty stays in the original language, so you can translate just the one page that matters.

🌍 Two languages

The interface speaks Czech and English. In js/config.js you set jazyk: 'cs' or 'en', and with dvojjazycne: true a small CS / EN switch appears in the header so visitors can choose for themselves. Their choice is remembered.

Want a third language? Copy the en block in js/jazyk.js, rename it (say de), translate the right-hand side and set jazyk: 'de'. Anything you do not translate falls back to the original text, so nothing ever comes out blank.

💬 How the guestbook works

Anyone can write a message, but it only appears once you let it through. While you are signed in you see a “Waiting for approval” section above the list with Publish and Delete buttons.

Visitors never see pending messages. The sender's email is visible only to you and is not carried over into the published message.

📱 Install it like an app, on your phone and your computer

You do not have to dig it out of the browser every time. The site can be added to your home screen and then behaves like a normal app: its own icon, full screen, no address bar.

iPhone and iPad: open the site in Safari, tap the share icon (the square with an arrow) and pick Add to Home Screen.
Android: in Chrome tap the three dots at the top right and pick Add to Home screen or Install app.
Computer: in Chrome or Edge an install icon appears at the right of the address bar; in Safari on a Mac use File → Add to Dock.

It installs itself, nothing is downloaded from an app store. It is still the same site, just in a window without the browser around it.

💾 Backups, photos included

When you are signed in there is a button with a downward arrow in the header. It downloads a JSON file with every entry, trash included, and that always works.

To also get the photos as a ZIP, the browser needs permission to read them from Storage (CORS). You set that once in the Google Cloud console using Cloud Shell:

printf '[{"origin":["https://YOUR-DOMAIN"],"method":["GET","HEAD"],"responseHeader":["Content-Type"],"maxAgeSeconds":3600}]' > cors.json && gcloud storage buckets update gs://YOUR-BUCKET --cors-file=cors.json

Without it the app works exactly the same, the backup just holds text and links to photos. Firebase does not back anything up for you, so the file you download is the only copy outside Google. Do it now and then and keep it somewhere other than your computer.

Going further

Optional. The site works fine without any of it.

🛡️ Recommended: Firebase App Check

App Check makes sure requests really come from your site and not from somebody else's script. You do not need it for the first run, but it is worth having on a public site.

In Google Cloud create your own reCAPTCHA Enterprise key of type Web and add your domain to it.
In Firebase open App Check, register your web app and paste that Site Key in.
Put the same key into js/config.js as appCheckSiteKey.
Publish the site and watch the metrics for a while. Only then turn on Enforce, otherwise you can lock yourself out of your own site.

The key is tied to a domain, so every site needs its own. The key from nothings.cz is not in this package and would not work for you anyway.

🔎 Search engines, honestly

Page titles and descriptions are set in the browser, after the content loads from Firestore. Google usually renders the page and reads it, but this is not proper server-side SEO: link previews on social networks and smaller crawlers only see the default values from index.html.

To be certain, the content would have to come from a server, or the pages would have to be pre-rendered into HTML at deploy time. This project does neither and does not pretend otherwise.

What nothings does

photos (shrunk before upload), notes, links with previews, maps, video;
tags, search, collections, pinning and a trash you can restore from;
your own pages and a moderated guestbook;
a one-click backup;
installing to the home screen of a phone or a computer, like an app;
public reading, while only you can edit.

Licence

MIT, see the LICENSE file. Do what you want with it. This is a personal project offered without technical support.

Vlastní nothings krok za krokem

Než začneš: co jsou ty dvě služby

🚀 Netlify je výloha

🔥 Firebase je sklad vzadu

📦 Rozbal stažený ZIP

🔥 Založ si projekt ve Firebase

🔗 Propoj web s Firebase

🔒 Publikuj bezpečnostní pravidla

🚀 Nahraj web na Netlify

🔑 Přihlas se

Nevíš si rady? Zkus pomoc AI

Ještě než to pustíš ven

Když to běží, co s tím

Když to chceš dotáhnout

Co nothings umí

Licence

Build your own nothings, step by step

Before you start: what those two services are

🚀 Netlify is the shop window

🔥 Firebase is the storeroom out back

📦 Unzip what you downloaded

🔥 Create a Firebase project

🔗 Connect the site to Firebase

🔒 Publish the security rules

🚀 Upload the site to Netlify

🔑 Sign in

Stuck? Ask an AI

Before you go live

Living with it

Going further

What nothings does

Licence