ID.nl logo
Zo maak je je eigen Bitwarden-server
© Reshift Digital
Huis

Zo maak je je eigen Bitwarden-server

Wil je accountgegevens, notities en creditcardgegevens opslaan in een digitale kluis, dan is Bitwarden al jaren een van de beste opties. Wel moet je er genoegen mee nemen dat gegevens in de cloud worden bewaard. Vind je dat maar niks, dan kun je Bitwarden ook lokaal op je eigen server hosten. In dit artikel laten we zien hoe je dat veilig en relatief eenvoudig voor elkaar krijgt via Docker, een reverse proxy en de alternatieve Bitwarden-server Vaultwarden.

In dit artikel nemen we je mee in het maken van een server waarop je superveilig je wachtwoorden kunt bewaren.

  • Eerst installeren we Docker
  • Daarna stellen we Vaultwarden in
  • Vervolgens zetten we een reverse proxy op voor toegang op afstand
  • En tot slot stellen we alles in

Te lastig? Gebruik Bitwarden dan gewoon via de cloud: Alles over je wachtwoorden beheren met Bitwarden

Code downloaden In dit artikel worden wat voorbeelden van stukken code gegeven. Omdat overtikken van code erg foutgevoelig is, kun je die code beter downloaden en daarna bekijken of kopiëren. Zie het bestand code-bitwarden.txt.

Een wachtwoordbeheerder is een bijna onmisbare tool. In de digitale kluis kun je veilig al je accounts bewaren, maar ook notities en financiële gegevens van je creditcard. In principe brengt zo’n tool ook veiligheid. Je kunt bijvoorbeeld veel makkelijker heel sterke wachtwoorden gebruiken. Je hoeft maar één hoofdwachtwoord te onthouden en op individuele apparaten volstaat vaak een pincode.

Wachtwoordbeheerders bewaren al je gegevens normaliter in de cloud, met als voordeel dat je er vanaf elk apparaat bij kunt. Ook daar zijn ze natuurlijk versleuteld met het hoofdwachtwoord. Toch is het geen prettig gevoel als je leest over gestolen data, zeker als je financiële gegevens in je digitale kluis bewaart. Zo is LastPass al meerdere keren het slachtoffer van een datalek geweest. Het versleutelingsmechanisme zelf werd niet gekraakt, maar hackers hadden wel alle tijd om te proberen met brute kracht het hoofdwachtwoord te kraken – wat dan eigenlijk de laatste verdedigingslinie is.

We nemen daarom in dit artikel het heft in eigen hand. We gaan Bitwarden, een van de populairste en veiligste wachtwoordbeheerders, installeren op een lokale server achter een reverse proxy.

©Song_about_summer

De digitale kluis van je wachtwoordbeheerder staat meestal in de cloud.

Waarom zelf hosten

Het zelf hosten van Bitwarden brengt veel voordelen met zich mee, maar ook een paar nadelen. Om te beginnen zullen hackers zich eerder op de centrale servers richten van de wachtwoordbeheerders. Ze kennen niet eens de locatie van jouw Bitwarden-server, die ook nog eens verscholen gaat achter een reverse proxy. En je kunt ook nog extra maatregelen treffen om de toegang te beperken.

De alternatieve Bitwarden-server Vaultwarden (zie het gelijknamige kader) die we in dit artikel gebruiken, geeft je ook nog eens mogelijkheden waar je normaal voor moet betalen. Een nadeel is dat je uiteraard een server nodig hebt en ook verantwoordelijk bent voor de beveiliging daarvan. Je zult bijvoorbeeld het besturingssysteem en de software up-to-date moeten houden en ook voor back-ups van je digitale kluis moeten zorgen.

©tutye - stock.adobe.com

Zelfs een Raspberry Pi is voor de meeste toepassingen geschikt als server.

Vaultwarden: lichtgewicht Bitwarden-server Voor onze Bitwarden-server gebruiken we niet de officiële server maar het opensource-alternatief Vaultwarden, eerder bekend als bitwarden_rs. Je kunt het project vinden op GitHub. Het is een lichtgewicht Bitwarden-server die je eenvoudig zelf kunt hosten. De eisen zijn bescheiden in vergelijking met de officiële server. Veel mensen gebruiken zelfs een Raspberry Pi, inclusief de Zero W!

De software ondersteunt vrijwel alle mogelijkheden van Bitwarden. Je kunt uiteraard ook alle standaardtoepassingen van Bitwarden ermee gebruiken, zoals de browserextensies. Ook kun je zonder meerprijs enkele mogelijkheden gebruiken die normaal zijn voorbehouden aan betalende klanten, zoals het maken van een organisatie en bewaren van bijlagen.

Deze alternatieve en opensource Bitwarden-server kun je vinden op GitHub.

Wat heb je nodig?

Vaultwarden is geschreven in Rust, een programmeertaal die snel aan populariteit wint en wordt geroemd om zijn snelheid en veiligheid. We hebben er in dit artikel weinig mee te maken, omdat we alles gaan installeren via Docker. Maar het betekent wel dat een relatief licht systeem volstaat. Je kunt bijvoorbeeld een eenvoudige server met Ubuntu gebruiken, maar ook alle uitvoeringen van de Raspberry Pi zijn geschikt. Verder zou je een NAS van Synology of QNAP kunnen gebruiken die Docker ondersteunt.

We zorgen er ook direct voor dat Bitwarden toegankelijk is van buitenaf via een reverse proxy. We kiezen daarbij voor een installatie van Nginx Proxy Manager via Docker, maar er zijn ook alternatieven mogelijk, zoals Caddy of Traefik. En ook binnen het Toepassingsportaal op een Synology-NAS kun je een reverse proxy instellen.

We installeren alles binnen Docker, wat vaak ook werkt op een Synology-NAS.

Domein en portforwarding

Om onze Bitwarden-server op afstand te kunnen benaderen, gaan we een subdomein gebruiken en enkele regels voor portforwarding instellen in de router. Hiervoor verwijs je het A-record van een subdomein naar het ip-adres van je internetverbinding thuis. Als je geen vast ip-adres hebt, zou je met dynamische DNS kunnen werken, zoals Duck DNS of No-IP.

In je router moet je het verkeer naar de poorten 80 en 443 doorsturen naar de reverse proxy. Aan de kant van de reverse proxy gaan we ook voor veilige https-toegang zorgen met een echt ssl-certificaat van Let’s Encrypt. Hiervoor zijn nauwelijks extra configuratiestappen nodig.

We sturen verkeer voor het subdomein door naar ons thuisnetwerk.

Installatie Docker

In dit artikel gaan we zowel Vaultwarden als de reverse proxy opzetten via Docker. Instructies voor de installatie van Docker voor verschillende besturingssystemen zijn wijd verspreid op internet. Wij hebben Docker onder Ubuntu 22.04 geïnstalleerd aan de hand van deze instructies.

Tegenwoordig wordt ook Docker Compose standaard geïnstalleerd. Dat gaan we in dit artikel gebruiken. Het zorgt ervoor dat je containers via een script kunt configureren. Bij een NAS van Synology of QNAP kun je containers via de webinterface beheren. Een standaard Docker-installatie kun je overigens ook uitbreiden met een webinterface, door bijvoorbeeld Portainer (ook via een Docker-container) te installeren.

Heb je Home Assistant? Dan kun je Vaultwarden eventueel via een community-add-on installeren. De vereiste repository wordt tegenwoordig standaard toegevoegd en geactiveerd.

Binnen Home Assistant kun je de add-on voor Vaultwarden installeren.

Docker-container

Om Vaultwarden te installeren, heb je uiteraard het juiste Docker-image nodig. Wij kiezen het standaardimage (vaultwarden/server). Datzelfde image ondersteunt het gebruik van SQLite, MySQL of PostgreSQL als database. Voorheen waren er verschillende images voor elk type database. Het advies is doorgaans om de standaardoptie SQLite te gebruiken, omdat deze het meest gebruikt en getest is. Verder worden meerdere architecturen ondersteund, waardoor je de container zowel op een x86-systeem als een ARM-systeem (zoals een Raspberry Pi) kunt opzetten.

We gebruiken de officiële container voor Vaultwarden.

Docker Compose-script

Op ons Ubuntu-systeem beginnen we met het maken van een map voor Vaultwarden en de bijbehorende data. We maken deze onder onze thuisfolder met de opdracht:

mkdir -p ~/docker/vaultwarden/data

Ga met de volgende opdracht naar de map voor Vaultwarden:

cd ~/docker/vaultwarden

En maak daarin het onderstaande script aan met:

nano docker-compose.yml

Het script bevat:

De code kun je overnemen vanuit .

Vooral de opties onder environment zijn persoonlijk. Dit zijn de zogenoemde omgevingsvariabelen. Als je een reverse proxy gaat gebruiken, vul dan achter DOMAIN het https-adres in dat je voor Bitwarden gaat gebruiken. Op de host (het systeem waarop we Vaultwarden installeren) gebruiken we poort 8080, die we koppelen aan poort 80 binnen de container.

Voor websockets gebruiken we (aan beide kanten) poort 3012. Met deze opdracht (in dezelfde map als het bestand docker-compose.yml) kun je Vaultwarden starten:

docker compose up -d

Wil je Vaultwarden stoppen, bijvoorbeeld om aanpassingen te maken aan de configuratie, stop dan eerst de container met:

docker compose down

Na het aanpassen van de configuratie start je de toepassing weer.

Met deze configuratie starten we onze container via Docker Compose.

Toegang configureren

Met bovenstaande configuratie kan iedereen via de web vault (de pagina die je ziet als je naar http://ipadres:8080 gaat) inloggen met een account, maar ook gewoon een nieuw account registreren. Wil je niet dat iedereen zomaar een nieuw account kan maken? Verander dan (eventueel op een later moment) de optie SIGNUPS_ALLOWED van true naar false.

Overigens kun je dat ook prima vanaf het begin doen als je nog geen account hebt. Er is namelijk een speciale beheerdersomgeving waar je gebruikers kunt bekijken of verwijderen, maar ook kunt uitnodigen om te registreren, zelfs als je die optie hebt uitgezet.

Je komt in deze omgeving als je /admin achter het adres zet. Om de omgeving te activeren, moet je een tekststring achter ADMIN_TOKEN invullen. Diezelfde tekststring moet je invullen om daadwerkelijk toegang te krijgen. Je kunt zelf een tekststring bedenken of je genereert een willekeurige met de opdracht:

openssl rand -base64 48
Via een speciale admin-omgeving wijzig je de opties.

SMTP-configuratie

Bij sommige acties zal Vaultwarden een e-mail willen versturen. Denk aan bepaalde meldingen, maar ook verzoeken zoals het bevestigen van een e-mailadres. Daarom is het handig om via omgevingsvariabelen de correcte instellingen voor SMTP op te geven. Je kunt bijvoorbeeld die van je internetprovider gebruiken. Voor bijvoorbeeld KPN kun je de omgevingsvariabelen in het bestand docker-compose.yml aanvullen met onderstaande regels. Daarbij kun je bij SMTP_FROM overigens zelf een afzender invullen. Op de admin-pagina vind je op het tabblad Settings een handige optie om je SMTP-instellingen te testen. Het is overigens niet handig om de configuratie daar aan te passen (zie kader ‘Configuratie Vaultwarden’).

De code kun je overnemen vanuit .
Via de beheeromgeving verstuur je een testmail.

Configuratie Vaultwarden In deze masterclass gebruiken we omgevingsvariabelen voor de configuratie van Vaultwarden. Eventueel kun je de configuratie ook veranderen en opslaan via de admin-pagina (/admin) van Vaultwarden. Dat raden we in principe af om praktische redenen: de veranderingen op de admin-pagina worden namelijk in een bestand (config.json) vastgelegd en ze hebben daarna voorrang boven de omgevingsvariabelen. Dat is in sommige situaties verwarrend.

Server te lastig, cloud onveilig?

Schrijf ze dan zelf op!

Verbinden op afstand

Je kunt Bitwarden ook onderweg gebruiken, bijvoorbeeld op een smartphone of tablet. Dit vereist wel dat je het account thuis via je lokale netwerk aanmaakt en ook steeds thuis gegevens synchroniseert. Wil je onderweg ook een nieuw apparaat toegang kunnen geven tot Bitwarden of gegevens synchroniseren, dan zul je voor toegang op afstand moeten zorgen. Daar zijn verschillende mogelijkheden voor.

Een populaire optie is het opzetten van een VPN-verbinding naar je thuisnetwerk met bijvoorbeeld Wireguard of OpenVPN. Maar in dit artikel gaan we een reverse proxy gebruiken. We kiezen daarbij voor Nginx Proxy Manager. Ook dit geeft een goede bescherming en de drempel voor toegang is lager. Je kunt de reverse proxy natuurlijk ook heel handig voor andere toepassingen op je netwerk gebruiken!

Voor toegang op afstand gaan we Nginx Proxy Manager gebruiken.

Installatie reverse proxy

Nginx Proxy Manager installeer je net als Vaultwarden eenvoudig via Docker, eventueel op hetzelfde systeem. Het maakt (uiteraard) op de achtergrond gebruik van de webserver Nginx als reverse proxy en maakt desgevraagd gratis ssl-certificaten van Let’s Encrypt aan, zodat directe toegang via https mogelijk is.

Via een handige webinterface voeg je vervolgens verbindingen voor de proxyserver toe, waaronder die van Vaultwarden. Zorg dat je (zoals eerder aangegeven) in je router de poorten 80 en 443 doorstuurt naar de server waarop je Nginx Proxy Manager hebt geïnstalleerd. We maken op dat systeem een nieuwe map met een eigen bestand docker-compose.yml, met daarin de volgende inhoud:

De code kun je overnemen vanuit .

Ook deze Docker-container start je weer met deze opdracht (in dezelfde map als het bestand docker-compose.yml):

docker compose up -d
Voor de reverse proxy volstaat deze bescheiden configuratie.

Bitwarden toevoegen

Heb je Nginx Proxy Manager gestart, dan zie je op het adres http://ipadres:81 de webinterface. De eerste keer moet je inloggen met admin@example.com en het wachtwoord changeme. Direct wordt gevraagd om je gegevens en het wachtwoord aan te passen. Hierna kun je de Vaultwarden-server toevoegen. Ga daarvoor naar Hosts / Proxy Hosts en kies Add Proxy Host. Vul bij Domain Names de domeinnaam in (bijvoorbeeld bitwarden.domein.nl) en druk op Enter.

Daaronder geef je aan hoe de toepassing op je netwerk wordt benaderd. Bij Scheme kies je http, bij Forward Hostname / IP vul je het ip-adres van de Vaultwarden-server in en bij Forward Port het poortnummer (8080). Zet een vinkje bij Websockets Support, Vaultwarden maakt hier gebruik van. Vink optioneel ook Block Common Exploits aan voor wat extra bescherming.

Op het tabblad Custom locations voeg je twee locaties toe voor websocket-ondersteuning: /notifications/hub met bij Scheme de waarde http, bij Forward Hostname / IP het ip-adres van de Vaultwarden-server en bij Forward Port het poortnummer 3012. Voeg via Add location de tweede locatie /notifications/hub/negotiate toe met dezelfde gegevens, maar nu poortnummer 8080.

Op het tabblad SSL kies je onder SSL Certificate de optie Request a new SSL Certificate. Zet een vinkje bij Force SSL en bij HTTP/2 Support. Vink ook aan dat je akkoord gaat met de gebruiksvoorwaarden van Let’s Encrypt. Klik dan op Save. Hiermee is je reverse proxy actief!

We voegen onze Bitwarden-server toe aan Nginx Proxy Manager.

Werking websockets controleren Vaultwarden gebruikt websockets om gegevens te synchroniseren tussen clients. Het activeren kan soms een uitdaging zijn. Je kunt de werking eenvoudig controleren als je de web vault opent in Chrome en dan de console in de gaten houdt. Dat is een onderdeel van de tools voor ontwikkelaars; je komt daar met de toetscombinatie Ctrl+Shift+I.

Je ziet hier na het inloggen direct een bevestiging dat de websocket is verbonden en als het goed is gegaan zie je geen foutmeldingen. Op mobiele apparaten zijn websockets overigens niet genoeg en zul je gegevens zelf (eventueel handmatig) moeten synchroniseren, omdat Vaultwarden geen pushnotificaties ondersteunt, in tegenstelling tot de officiële Bitwarden.

Digitale kluis maken

Je kunt in het vervolg de web vault via je domein benaderen, zoals https://bitwarden.domein.nl. Maak hier als eerste een nieuw account aan met uiteraard een sterk hoofdwachtwoord. Daarna kun je direct inloggen met deze gegevens. Via een knop stuur je een bericht waarmee je jouw e-mailadres bevestigt.

Gebruik je reeds de officiële Bitwarden en wil je overstappen naar Vaultwarden? Dan exporteer je de gegevens vanuit Bitwarden als JSON-bestand. Binnen Vaultwarden importeer je het bestand daarna op het tabblad Hulpmiddelen. Via het icoontje rechtsboven kun je onder Accountinstellingen de optie voor tweestapsverificatie aanzetten en ook andere beveiligingsopties configureren.

Via de browser hebben we toegang tot de digitale kluis met onze gegevens.

Tweestapsverificatie Zoals veel wachtwoordbeheerders kunnen Bitwarden en Vaultwarden niet alleen inloggegevens bewaren, maar ook inlogcodes genereren voor tweestapsverificatie. Daartoe moet wel de sleutel die wordt gedeeld bij het inschakelen van tweestapsverificatie worden opgeslagen in je digitale kluis. Dat is de kluis waar óók je wachtwoorden in staan. We raden je daarom altijd aan om tweestapsverificatie niet met je wachtwoordbeheerder af te handelen. Beter kun je een andere app gebruiken, zoals Google Authenticator of Aegis Authenticator. Als je digitale kluis wordt gekraakt, zorg je er in ieder geval voor dat hackers alsnog aan de poort worden tegengehouden, omdat ze niet de gegevens hebben om voorbij de tweede verificatiestap te komen.

▼ Volgende artikel
Onthulling Steam Machine-prijs en -releasedatum uitgesteld vanwege geheugentekort
Huis

Onthulling Steam Machine-prijs en -releasedatum uitgesteld vanwege geheugentekort

Valve heeft laten weten dat het eigenlijk al de bedoeling was dat we de prijs en releasedatum van de vorig jaar aangekondigde Steam Machine zouden weten. De bekendmaking van deze details is echter uitgesteld door het aanhoudende tekort van geheugen en opslag.

Dat liet het bedrijf weten in een blogpost. Daarin praat het bedrijf niet alleen over de Steam Machine - het aankomende apparaat van Valve waarmee pc-games op televisie gespeeld kunnen worden - maar ook de nieuwe Steam Controller en vr-headset Steam Frame.

"Toen we deze producten in november aankondigden, gingen we ervan uit dat we de specifieke prijzen en lanceringsdata nu wel al hadden kunnen delen", zo stelt Valve. "Maar de tekorten op het gebied van geheugen- en opslagcomponenten waar onze hele bedrijfstak mee kampt, zijn sindsdien behoorlijk toegenomen.  De beperkte beschikbaarheid en oplopende prijzen van deze cruciale onderdelen hebben ons ertoe gedwongen om onze plannen voor vraagprijs en levering bij te stellen (vooral voor de Steam Machine en Steam Frame)."

Valve laat weten dat het nog altijd de bedoeling is dat alle drie de producten ergens in de eerste helft van dit jaar verschijnen. "Er moet echter nog wel wat werk worden verzet voordat we de definitieve prijzen en lanceringsdata kunnen vastleggen, zeker gezien het feit dat de factoren die hierop van invloed zijn heel snel kunnen veranderen. We houden jullie zoveel mogelijk op de hoogte terwijl we proberen die plannen zo snel mogelijk rond te krijgen."

Stijgende RAM-prijzen

De aanhoudende tekorten en alsmaar stijgende prijzen voor geheugen zijn dus de oorzaak van het feit dat we de prijs en releasedatum van de Steam Machine nog niet weten. Prijzen van RAM (Random Access Memory) stijgen alsmaar doordat er massaal RAM nodig is om het alsmaar populairder wordende AI werkende te houden, en daardoor zijn er ook steeds minder componenten beschikbaar om de RAM te produceren. Onlangs gingen er al geruchten dat dit ook voor intern uitstel van de PlayStation 6 kan leiden.

Over de Steam Machine

De Steam Machine is een kubusvormig apparaat dat Steam-games af kan spelen. Het apparaat kan op televisie of een monitor aangesloten worden. In de Steam Machine zit een 'semi-custom' AMD-videokaart. In combinatie met FSR-upscalingtechniek is het in principe mogelijk om games in een resolutie van 4k en met zestig frames per seconde te spelen, zo wordt ook in de nieuwe blogpost benadrukt.

SteamOS dient als besturingssysteem, al wordt dit wel aangepast om het op een groter scherm bruikbaar te maken. Er zullen twee varianten van de Steam Machine beschikbaar komen: één met 2 TB aan opslag en één met 512 GB aan opslag. Tot slot kan ook de voorkant van de Steam Machine verwisseld worden om het apparaat een ander uiterlijk te geven.

View post on X
Nieuw op ID: het complete plaatje

Misschien valt het je op dat er vanaf nu ook berichten over games, films en series op onze site verschijnen. Dat is een bewuste stap. Wij geloven dat technologie niet stopt bij hardware; het gaat uiteindelijk om wat je ermee beleeft. Daarom combineren we onze expertise in tech nu met het laatste nieuws over entertainment. Dat doen we met de gezichten die mensen kennen van Power Unlimited, dé experts op het gebied van gaming en streaming. Zo helpen we je niet alleen aan de beste tv, smartphone of laptop, maar vertellen we je ook direct wat je erop moet kijken of spelen. Je vindt hier dus voortaan de ideale mix van hardware én content.

▼ Volgende artikel
Bouw in een handomdraai je eigen website: aan de slag met Google Sites
© ER | ID.nl
Huis

Bouw in een handomdraai je eigen website: aan de slag met Google Sites

Wil je snel een moderne website zonder ingewikkelde code en geavanceerde CMS-instellingen? Google Sites is verrassend veelzijdig! Je bedenkt een geschikte titel, voegt pagina’s toe en publiceert tot slot de volledige website met één klik. Lees hoe je binnen enkele uren een volwaardige website bouwt en vervolgens beheert.

We laten in dit artikel stapsgewijs zien hoe Google Sites werkt. Na afloop heb je voor jouw hobbyproject, vereniging of eetclubje een mooie website gebouwd. Technische kennis is niet nodig en ook heb je geen krachtige hardware nodig.

Site openen

Voor Google Sites is een Google-account vereist. Heb je dat nog niet, dan kun je jezelf gratis registreren. Ga in dat geval met een willekeurige browser naar www.kwikr.nl/gglac en doorloop via Account maken het aanmeldproces.

Je start eenvoudig met een nieuwe website. Ga naar https://sites.google.com en log zo nodig in met jouw Google-account. Er zijn diverse sjablonen beschikbaar. Daarmee kun je bijvoorbeeld vlot een portfolio, helppagina of fotogalerij optuigen. Wie zijn of haar website liever zelf wil vormgeven, begint het beste vanaf nul. Klik op Lege site om het ontwerpvenster te openen.

Misschien heb je al een onderwerp voor jouw website bedacht. Klik linksboven op Geef de naam van de site op en typ een relevante naam. Bedenk ook alvast een paginatitel. Zo krijgt de beginpagina van je website alvast wat smoel.

Begin je met een sjabloon of een lege site?

Korte rondleiding

Voordat je daadwerkelijk begint met 'bouwen' is het nuttig om even de indeling van Google Sites te verkennen. Rechts zie je drie vaste tabbladen voor het creëren van je site. Gebruik het onderdeel Invoegen om allerlei contentblokken op de pagina te plaatsen, zoals tekstvakken, afbeeldingen en knoppen. Met het onderdeel Pagina’s bepaal je de structuur van de website, terwijl je met Thema’s het uiterlijk aanpast.

Tijdens het ontwerpen wil je tussentijds wellicht zien hoe de website er aan de voorkant uitziet. Klik dan rechtsboven in de knoppenbalk op Voorbeeld (pictogram met laptop en smartphone). Gebruik de opties rechtsonder en zie hoe de pagina schaalt op een smartphone, tablet en desktop. Je klikt linksboven op het pijltje om weer terug te keren naar het ontwerpvenster.

Een pluspunt is dat Google Sites automatisch het concept opslaat. Behalve jijzelf ziet niemand de inhoud van de website. Pas wanneer je klaar bent om live te gaan, kun je de boel publiceren.

Gebruik de onderdelen Invoegen, Pagina’s en Thema’s om de website in te richten.

Openingsbeeld

Met het toevoegen van een openingsbeeld en een logo krijgt je website wat meer persoonlijkheid. Zweef met de muisaanwijzer boven het blok met de paginatitel en klik op Afbeelding / Uploaden. Selecteer nu een foto op je pc of laptop en kies Openen. Het gekozen beeld verschijnt direct op je website. In plaats van een lokaal opgeslagen afbeelding kun je ook beeld van een online bron selecteren, zoals Google Afbeeldingen, Foto’s of Drive. Klik in dat geval op Afbeelding / Selecteren.

Elke serieuze website heeft een eigen logo. Dat voeg je makkelijk toe. Zweef met de cursor linksboven de naam van de website en kies Logo toevoegen. Klik onder Logo op Uploaden en selecteer de gewenste afbeelding op je computer. Bevestig met Openen. Je voegt eventueel een alternatieve tekst aan het logo toe. Op die manier weten mensen met een visuele beperking wat het logo inhoudt.

Je kunt in hetzelfde menu ook een zogeheten favicon toevoegen. Dit kleine pictogram verschijnt in het tabblad van de browser. Nuttig voor de herkenbaarheid van jouw website. Klik rechtsboven op het kruisje om de instellingen te sluiten.

Plaats met enkele muisklikken een logo op de website.

Titel en broodtekst

Wie weet wil je jouw website vullen met interessante artikelen en mooie foto’s. We beginnen met het toevoegen van tekst. Ga in het rechterdeelvenster naar Invoegen en kies Tekstvak. Klik achter Normale tekst op het kleine pijltje en kies Titel, Kop of Subkop. Je typt vervolgens de tekst. Gebruik de opties in de werkbalk om onder andere het lettertype en de grootte te wijzigen. Verder verander je eventueel de kleur en voeg je desgewenst een emoticon toe.

Klik achter de zojuist getypte titel en druk op Enter. Je kunt nu naar hartenlust een artikel tikken. Maak belangrijke woorden bijvoorbeeld vet of onderstreep een opvallende zin. Daarnaast voeg je ook makkelijk een opsomming met nummers of opsommingstekens toe. Je maakt de openingspagina op die manier aantrekkelijk voor jouw toekomstige bezoekers.

Boven het tekstvak verschijnt een werkbalk met uiteenlopende opmaakfuncties.

Foto’s toevoegen

Een website met voornamelijk tekst is natuurlijk saai. Voeg daarom ook leuke foto’s toe. Ga naar Invoegen en klik daarna op Afbeeldingen / Uploaden. Je bladert op de computer naar de fotomap. Selecteer één of meer afbeeldingen en bevestig met Openen. Het beeld verschijnt meteen op de website. Je sleept de foto met ingedrukte muisknop eenvoudig naar de beoogde plek. Plaats op die manier bijvoorbeeld drie kiekjes naast elkaar.

Bepaal zelf of je een kleine of grote foto op de website wilt publiceren. Klik eerst op een afbeelding om deze te selecteren. Je past het formaat simpel aan. Doe dat door de blauwe bolletjes te slepen. Als je slechts een gedeelte van de afbeelding wilt gebruiken, maak je een uitsnede. Klik in de werkbalk boven het geselecteerde beeld op het pictogram Afbeelding bijsnijden. Alles wat binnen het fotokader valt, is op de website te zien. Gebruik zo nodig de schuifregelaar om in te zoomen. Sluit de bewerking via het vinkje.

Je kunt ook nog een bijschrift onder de afbeelding plaatsen. Selecteer een foto en klik in de werkbalk op het pictogram met de drie puntjes. Via Bijschrift toevoegen verschijnt er onder de afbeelding een tekstkader. Typ nu een relevante zin.

Google Sites ondersteunt alle gangbare fotoformaten.

Diavoorstelling

Wil je een heleboel foto’s laten zien? Wanneer je tientallen kiekjes aan een pagina toevoegt, wordt het al gauw een rommeltje. Google Sites bevat hiervoor een slimme oplossing. Creëer met een zogeheten afbeeldingscarrousel een soort diavoorstelling van jouw favoriete foto’s.

Ga in het rechterdeelvenster naar het onderdeel Invoegen en scrol zo nodig een stukje omlaag. Kies Afbeeldingscarrousel en klik op Afbeelding toevoegen. Wijs nu via het plusteken en Afbeelding uploaden twee of meer foto’s aan. Zodra je op Openen klikt, verschijnen ze in het overzicht. Wijzig desgewenst de volgorde door een kiekje met ingedrukte muisknop te verplaatsen.

Je kunt nog wat opties van de diavoorstelling wijzigen. Klik rechtsboven op het pictogram van het tandwiel om de instellingen te openen. Beslis of je de diavoorstelling automatisch wilt starten. Je kunt hierbij de snelheid van de presentatie aanpassen. Kies tussen Snel, Medium, Traag en Erg traag. Geef ook aan in hoeverre je bijschriften wilt weergeven. In dat geval voeg je bij elk beeld een tekst toe. Zweef hiervoor boven de foto en klik op de spraakballon. Je kiest nu Bijschrift toevoegen, waarna je de tekst typt. Via Invoegen verschijnt de afbeeldingscarrousel op de webpagina.

Publiceer fraaie afbeeldingen in een diavoorstelling op jouw website.

Contentblok

In de voorgaande tips heb je artikelen en beelden als afzonderlijke blokken aan de website toegevoegd. Het is natuurlijk mooier wanneer tekst en beeld vloeiender in elkaar overlopen. Dat regel je met zogenoemde contentblokken.

Navigeer in het rechterdeelvenster naar het onderdeel Invoegen. Merk op dat er zes verschillende contentblokken beschikbaar zijn. Kies bijvoorbeeld voor een afbeelding met aan de rechterkant een alinea. Hierbij staan tekst en beeld dus naast elkaar. Je kunt als alternatief ook drie plaatjes tonen met daaronder evenzoveel bijpassende teksten. In dat geval kies je voor een lay-out met drie kolommen.

Heb je een geschikt contentblok op het oog? Sleep dat dan met ingedrukte muisknop naar jouw website. De inhoud is nog leeg. Het staat je vrij om een verse foto te selecteren en nieuwe tekst te typen. Bovendien kun je ook een bestaand tekst- en beeldblok naar het contentblok slepen.

Met contentblokken krijgt de webpagina een heel andere indeling.

Overige tekstopties

Google Sites heeft nog meer bruikbare tekstopties in huis. Wil je bijvoorbeeld veel informatie compact presenteren, kies dan bij het onderdeel Invoegen voor Samenvouwbare groep. Typ hierbij eerst een korte kopregel en tik een uitgebreidere uitleg in het hoofdtekstvak. Dit is het gedeelte dat kan ‘uitklappen’.

Voor lange pagina’s is een automatisch gegenereerde inhoudsopgave een goede toevoeging. Als je op Inhoudsopgave klikt, verschijnen alle koppen van de bewuste pagina onder elkaar. Klikt de bezoeker op een kop, dan navigeert diegene direct naar de bijbehorende tekst. Wanneer je op een later moment een kop verandert, wijzigt de inhoudsopgave vanzelf mee.

Met een inhoudsopgave krijgt de webpagina meer structuur.

YouTube-video

Op YouTube is er over bijna ieder onderwerp wel een filmpje te vinden. Je kunt zo’n video desgewenst op je website publiceren. Dit noem je ook wel het embedden van een video. Overigens hoeft deze content niet per se van jezelf te zijn. Je kunt namelijk elk YouTube-filmpje aan jouw website toevoegen.

Ga naar het onderdeel Invoegen en kies YouTube. Mogelijk dien je hiervoor wel een eindje omlaag te scrollen. Je zoekt vanuit Google Sites rechtstreeks op YouTube. Typ één of meerdere trefwoorden en probeer interessant videomateriaal te vinden. Overigens plak je net zo makkelijk een link van een YouTube-video in het invoerveld. Klik op een geschikte video en bevestig rechtsonder met Invoegen.

Het filmpje verschijnt op de webpagina. Aan jou de taak om een geschikte plek te kiezen. Je kunt het videokader naar eigen inzicht verslepen. Pas verder ook de afmetingen van het filmpje aan. Dat werkt op soortgelijke wijze als je eerder met foto’s hebt gedaan. Versleep dus de blauwe bolletjes.

Zoek rechtstreeks in de enorme catalogus van YouTube naar interessante video’s.

Plattegrond

Soms is het nuttig om een plattegrond op de website te plaatsen. Wellicht wil je bijvoorbeeld een routebeschrijving naar een specifiek adres toevoegen. Dankzij een verhelderend kaartje weet de bezoeker precies waar hij of zij terechtkan.

Klik in het onderdeel Invoegen op Kaart. Er komt een nieuw Google Maps-venster tevoorschijn. Zoek naar de locatie waarvan je een plattegrond wilt toevoegen. Je kunt bijvoorbeeld op de naam van een bedrijf of straat zoeken. Google Maps plaatst een rood markeringsteken op het kaartje, maar dat kun je naar eigen inzicht verplaatsen. Tevreden? Publiceer deze plattegrond dan met Selecteren op de webpagina.

Kies welke plattegrond van Google Maps je wilt toevoegen.

Extra webpagina’s

Tot dusver hebben we alleen de beginpagina onder handen genomen. Een website bestaat meestal uit meerdere webpagina’s. Die kun je makkelijk toevoegen. Open in het rechterdeelvenster het onderdeel Pagina’s. Je ziet hier als het goed is de homepage al staan. Zweef met de muisaanwijzer boven het plusteken en kies Nieuwe pagina. Bedenk een relevante naam, waarna je via Klaar deze pagina daadwerkelijk aan de website toevoegt.

Er verschijnt nu een leeg ontwerpvenster. Alleen diverse vaste elementen zijn van de beginpagina overgenomen, zoals de websitetitel, het openingsbeeld en het logo. De paginatitel is al voor je ingevuld, maar die kun je eenvoudig wijzigen. Merk op dat er rechtsboven een menu zichtbaar is. Bezoekers kunnen zo tussen verschillende pagina’s van jouw website navigeren. Vul iedere nieuwe pagina onder meer met tekst-, beeld- en contentblokken zoals je in eerdere tips hebt geleerd.

Voeg aan de website zoveel pagina’s toe als je maar wilt.

Submenu’s

Als je flink wat webpagina’s hebt toegevoegd, wordt het al gauw onoverzichtelijk. Je lost dit euvel op door submenu’s te gebruiken. Klik achter de naam van een pagina op het pictogram met de drie puntjes en kies Subpagina toevoegen. Je geeft deze pagina een naam en bevestigt met Klaar. Merk op dat de subpagina onder de hoofdpagina wordt weergegeven. Bovendien verschijnt er in het navigatiemenu van jouw website nu een pijltje met onderliggende pagina’s. Zorg zo voor een logische navigatiestructuur.

Als je een uitgebreide website maakt, ligt het gebruik van subpagina’s voor de hand.

Thema wijzigen

Met een thema wijzig je in één keer de opmaak van jouw website, zoals het lettertype en de kleuren. Google Sites heeft van zichzelf enkele standaardthema’s in huis. Klik in het rechterdeelvenster op het onderdeel Thema’s en kies onder Gemaakt door Google een van de suggesties. Het uiterlijk wijzigt meteen. Bij ieder thema kun je een kleurtje en letterstijl kiezen.

Je kunt ook zelf een nieuw thema creëren. Daarmee heb je meer invloed op de vormgeving van jouw website. Klik in de rechterbalk onder Custom op het plusteken. Geef het nieuwe thema een naam. Je kunt eventueel een logo en bannerafbeelding (openingsbeeld) toevoegen. Wanneer je dat in een eerdere tip al hebt gedaan, laat je deze opties leeg. Klik op Volgende. Je selecteert een mooi kleurenpalet en klikt wederom op Volgende. Kies nu voor de titels en hoofdtekst een prettig lettertype. Sluit via Thema maken het venster.

De naam van je nieuwe thema verschijnt in het rechterdeelvenster. Je kunt nu allerlei details aanpassen. Klik maar eens op Kleuren en verander de vormgeving van de achtergrond, titels en hoofdtekst. In de overige opties wijzig je onder andere de regelafstand, sitebreedte en positie van het navigatiemenu. Er is zéér veel mogelijk!

Geef jouw website met een (standaard)thema een andere huisstijl.

Publiceren

Ben je helemaal tevreden over jouw website? Hoog tijd om het openbaar te maken! Klik rechtsboven op de blauwe knop Publiceren. Het (gratis) domein begint altijd met https://sites.google.com/view/. Het einde van deze url kun je zelf verzinnen. In ons voorbeeld is de volledige link https://sites.google.com/view/curacao-tips.

Is de websitenaam al bezet, dan geeft Google Sites dat netjes aan. Bedenk in dat geval iets anders. Overigens zijn er ook mogelijkheden om een eigen domeinnaam te koppelen, maar daar zijn kosten aan verbonden. Je dient de beoogde url dan eerst bij een geschikte domeinprovider te kopen. Klik tot slot op Publiceren. Bezoekers kunnen nu je gepubliceerde website bewonderen.

Bepaal onder welk webadres je de website wilt publiceren.