Een testomgeving voor je website

Een testomgeving voor je website helpt je bij het inrichten van een website. Geen testomgeving op de locatie waar uiteindelijk je website te zien is. Je doet dit via een lokale testomgeving op je eigen computer of laptop. In dit artikel leg ik uit hoe je dit precies doet en wat je ervoor nodig hebt.

Laat ik als eerste beginnen met de reden waarom je juist niet moet gaan inrichten op de locatie waar je de website uiteindelijk wilt laten zien aan je bezoekers / klanten. Dat heeft te maken met de locatie. Dit is de uiteindelijke locatie en je wilt bezoekers / klanten niet een testwebsite of een niet-afgeronde website laten zien. Nee, daarom kies je ervoor te beginnen in een testomgeving.

Maak je geen zorgen, je kunt de website op een later moment altijd aanpassen, zodat alle links kloppen. Dat leg ik je uit in een volgend artikel. Laten we ons eerst concentreren op hoe je precies te werk moet gaan. Daarom is het goed om duidelijkheid te krijgen wat je ervoor nodig hebt.

Een testomgeving

Op je computer of laptop zal waarschijnlijk geen software aanwezig zijn waarmee je kunt doen alsof je een website zelf host. Het hosten van een website houdt in dat je beschikt over schijfruimte, een database en de juiste ondersteuning. Maak je gebruik van WordPress dan heb je hiervoor nodig:

• Een webserver
• Een database server

Server

Dat woord ‘server’ kan ervoor zorgen dat je misschien denkt dat je computer of laptop het allemaal niet aan zou kunnen. Uitgangspunt hierbij is dat je beschikt over een computer of laptop met voldoende schijfruimte en over voldoende geheugen. In de meeste gevallen is de standaard hoeveelheid geheugen van 8GB voldoende. Wil je echt complexe handelingen gaan uitvoeren, dan zou je kunnen overwegen om meer geheugen aan te schaffen.

‘Voldoende schijfruimte’

Wat is ‘voldoende’ schijfruimte. In de eerste plaats moet je uitgaan van hetgeen dat je geïnstalleerd wilt krijgen. Is dat WordPress dan is zijn de volgende hoeveelheden van toepassing:

• WordPress: 52MB
  Dit is de ‘kale’ installatie en is gebaseerd op de inhoud zoals je die kunt downloaden via https://wordpress.org of https://nl.wordpress.org.

• Plugins: minimaal 100MB
  Je wilt WordPress nu eenmaal uitbreiden. Dat is een gegeven. Dus ga uit van maximaal 300MB. Al is dat heel erg veel, want hoe meer plugins je installeert, hoe meer invloed dit heeft op de snelheid van je WordPress-omgeving. Een veilig aantal is dus tussen de 100 en 150MB.

• Thema: 6,46MB
  Let op, dit is het aantal MB dat van toepassing is op de map zoals die te vinden is via het ZIP/ingepakte bestand dat je gedownload hebt via de WordPress.org-website. Dit aantal kan variëren, want je hebt niet alle thema’s nodig die standaard geleverd worden door WordPress. Je kiest een eigen thema uit, maar zorgt ervoor dat je in ieder geval een standaard WordPress thema aanhoudt als back-up. Mocht een zelf-geïnstalleerd thema beschadigd raken, dan kun je altijd een beroep doen op een basis of extra thema. Ga daarom uit van een hoeveelheid schijfruimte tussen de 6 en 40MB.

• Uploads: variabel
  Anders dan bij de eerdergenoemde opties waarmee je rekening moet houden is het erg lastig om een goed getal te geven voor de hoeveelheid schijfruimte die de map uploads gaat krijgen. Sterker nog, deze map zal groeien, naarmate je verder bent gevorderd. In de uploads map staan niet alleen de afbeeldingen, maar ook eventuele video’s en muziekbestanden. Ook staan hierin de back-ups die je via plugins in WordPress maakt. Kortom, de hoeveelheid schijfruimte is variabel en van alle mappen zal deze het meeste aantal MB’s innemen. Wil je toch een streefgetal: ga uit van een hoeveelheid tussen de 800MB en 1GB. Let je erop dat je de foto’s en afbeeldingen wel verkleind?

Database

Als laatste dan de database. Deze database bevat niet alleen de opties voor je website, maar ook de artikelen, pagina’s, gebruikers en nog veel meer zaken. De database zal dus naarmate de tijd voortgaat groter worden. Vergelijk het met de uploads-map. Daarom is het lastig om hier een aantal MB’s aan te verbinden. Een database waarmee je begint zal vanzelfsprekend minder groot zijn dan een database die al enige tijd in gebruik is. Ga ervan uit dat je tot maximaal 2GB aan schijfruimte kwijt kunt zijn aan deze database.

Is de database overigens erg groot, dan zouden daarvoor ook andere redenen kunnen zijn. Bijvoorbeeld tabellen die groot worden en dit niet hoeven te zijn. Denk bijvoorbeeld aan tabellen waarin gegevens weggeschreven worden over in- en uitloggen. Het is daarom goed om van tijd tot tijd een database te controleren en waar nodig de gegevens op te schonen.

Welke opties?

De vraag is vervolgens welke software je installeert. Dat is afhankelijk van het besturingssysteem dat je gebruikt. De volgende software is gratis of beperkt beschikbaar voor verschillende besturingssystemen:

• Xampp
  Beschikbaar voor Windows, MacOS en Linux.
  
• Laragon
  Beschikbaar voor Windows.
  
• Mamp
  Beschikbaar voor Windows en MacOS.
  

Natuurlijk weet ik dat er nog tal van oplossingen beschikbaar zijn. Ik wil je alleen niet te veel informatie geven. Dan bestaat het risico dat je geen goede keuze kunt maken.

Oorspronkelijk gelanceerd als ApacheFriends. Inmiddels kennen we deze oplossing als Xampp. Beschikbaar voor Windows, MacOS en Linux. Het gaat hier om een 64-bits versie.

Het voordeel aan Xampp is dat je via het platform Bitnami allerlei toevoegingen kunt downloaden. Bijvoorbeeld een optie waarmee je snel WordPress installeert.

Xampp kent wel een sterke leercurve en is daarom misschien niet geschikt voor iedereen.

Xampp is te downloaden via: https://www.apachefriends.org/index.html

Laragon

Toen ik voor het eerst Laragon ging gebruiken was het doel simpel: Xampp vereiste dat ik telkens weer een hele installatie doorliep voorafgaande aan WordPress. Ik had geen zin om iedere keer weer dezelfde stappen te doorlopen. Laragon stelde me in staat om gemakkelijk een WordPress installatie uit te voeren, waarbij de database al voor mij werd aangemaakt.

Laragon is er (helaas) alleen voor Windows. Dat is een grote beperking. Linux- en MacOS-gebruikers kunnen dus niet profiteren van dit platform. Gebruik je wel Windows, dan merk je dat het allemaal erg eenvoudig is.

Een voordeel is dat je gebruik kunt maken van de opties voor het snel aanmaken van een WordPress website en dat je deze kunt benaderen via een eigen domein. Dit domein krijgt standaard de toevoeging.test. Dat is niet alles, want Laragon biedt zelfs mogelijkheden aan om gebruik te maken van SSL. Dit is handig wanneer je bijvoorbeeld WooCommerce installeert en er vervolgens geen foutmelding over een ontbrekend SSL-certificaat verschijnt.

Wel is het zo dat in sommige browsers nog steeds de melding verschijnt dat er iets aan de hand is met het SSL-certificaat. In Mozilla Firefox en Google Chrome doet dit probleem zich niet voor. Dat geldt ook voor de browsers Opera en Edge (Chromium versie).

Laragon is te downloaden via: https://laragon.org.

Mamp

Eigenlijk twijfelde ik of Mamp ook in het lijstje moest komen te staan. Op een Mac had ik er weinig problemen mee. Op een Windows computer is dat anders. De applicatie blijft vaak ‘hangen.’ Dit zorgt voor frustratie.

Mamp is een alternatief wanneer je geen gebruik kunt maken van de eerdergenoemde opties. Er is een betaalde versie en een gratis versie beschikbaar.

Mamp is te downloaden via: https://mamp.info.

Ik kies voor Laragon

Vanaf dit moment beperk ik me tot Laragon. Wat mij betreft het beste alternatief. Mocht je een betere suggestie hebben, dan hoor ik dit graag van je!

Downloaden

Via www.laragon.org kun je het installatiebestand downloaden. Vervolgens installeer je dit programma.

Na installatie

Na de installatie zorg je ervoor dat Laragon automatisch gestart wordt tijdens het starten van Windows. Hiervoor open je de instellingen van Laragon. Dit doe je via Menu – Voorkeuren.

Er verschijnt een nieuw venster:

Zorg ervoor dat de bovenste drie opties geactiveerd zijn.

E-mails versturen via Laragon

Het is mogelijk om e-mails te versturen via Laragon. Hiervoor heb je een GMail-adres of een Google Workspace adres nodig. Het instellen doe je via het tabblad Mail verstuurder.

Wanneer je uiteindelijk kiest voor een plugin in WordPress die de e-mails zal gaan versturen, heb je deze optie overigens niet nodig. Wat je wel nodig hebt, dat is een SSL-certificaat.

Installatie / Activatie SSL

Ben je klaar met de installatie, dan zorg je er als eerste voor dat het groene slotje geactiveerd is. Hiermee beschikt iedere website over een SSL-certificaat. Al stelt Laragon dit zelf niet in. Tijdens de installatie zal altijd gekozen worden voor een HTTP-versie van de website. Met wat eenvoudige stappen wijzig je dit overigens.

Via de optie Menu kies je voor Apache en vervolgens voor SSL. Hierna klik je op Activeer. Is dit gedaan dan kies je voor de optie Voeg laragon.crt aan de Trust Store toe.

Apache wordt opnieuw gestart en de optie SSL is voorzien van een groen slotje. Hierna kun je een nieuwe website aanmaken.

Nieuwe website aanmaken

Via Menu kun je een nieuwe website aanmaken. Hiervoor gebruik je de optie Snel aanmaken website – WordPress.

Als eerste geef je de website een naam. Je hoeft geen domeinextensie toe te voegen, want deze zal altijd eindigen op .test.

In dit voorbeeld is de domeinnaam dus testwebsite.

Na het installeren van WordPress zal er een aanpassing gedaan worden aan het hosts-bestand in Windows. Dit bestand is een beveiligd bestand. Daarom kan het voorkomen dat een bewerking ervan door antivirusprogrammatuur wordt geblokkeerd. Is dit het geval, dan volg je de instructies hieronder op.

Handmatig aanpassen hosts-bestand

Het bestand hosts (inderdaad, zonder bestandsextensie) is te vinden in de map C:\Windows\System32\drivers\etc. Dit bestand hier aanpassen is helaas niet mogelijk. Je kopieert dit bestand dus naar het bureaublad. Hierna kun je het bestand bewerken via Notepad of Notepad++

Mocht er nog geen verwijzing staan naar de nieuw aangemaakte website, dan voer je deze in. In mijn voorbeeld is dit dus 127.0.0.1  testwebsite.test en 127.0.0.1  www.testwebsite.test.

Staat de vermelding er al, haal dan wat tekst weg en voeg dezelfde tekst weer toe en sla het bestand daarna op.

Ben je klaar? Dan kopieer je het bestand naar de map C:\Windows\System32\drivers\etc. Het kladblok van Windows (Notepad) zal er altijd een TXT-bestand van maken. Dit is dus niet de bedoeling. Voordat je het bestand opslaat, kies je er daarom voor op te slaan als ‘alle bestanden.’ Dit voorkomt dat er een extra .txt toegevoegd wordt aan het bestand.

Overschrijf het bestaande bestand. Ga hierna terug naar Laragon en kies voor Herladen achter de vermelding van Apache.

Controleer vervolgens of je de nieuwe locatie kunt benaderen.

Andere computer

Werk je op meer dan een computer of samen met een collega? Dan kies je ervoor om op de andere computer het hosts-bestand ook aan te passen. Zorg ervoor dat je in plaats van 127.0.0.1 dan het adres van de computer kiest waarop Laragon is geïnstalleerd. Dit zorgt ervoor dat je vanaf een andere werkplek ook de nieuwe testwebsite aan kunt passen.

Let op: dit werkt alleen wanneer de andere computer deel uitmaakt van hetzelfde netwerk. Is dit niet het geval, dan zal je op de router waarmee een internetverbinding gemaakt wordt een aanpassing moeten doorvoeren. Dit leg ik verder niet uit, want dit kan een beveiligingsrisico met zich meebrengen.

WordPress installatie

Nadat Laragon klaar is met het installeren van de bestanden en het aanmaken van de database moet je de installatie van WordPress nog verder afronden. Dit is een mooi moment om te zien hoe makkelijk de installatie van WordPress eigenlijk is.

Open de nieuwe locatie. In dit voorbeeld is dat dus testwebsite.test. Het maakt voor nu niet uit of de website getoond wordt met of zonder SSL-certificaat. Dat is pas van belang wanneer we verder gaan in WordPress.

Als eerste kies je de juiste taal. Zoek in de lijst naar bijvoorbeeld Nederlands. Wil je meer dan een taal gebruiken, dan bepaal je op dit moment welke taal de belangrijkste taal is.

In het volgende venster vul je de website titel in. Ook voer je een eerste gebruiker op. Hiervoor maak je gebruik van een ‘echt’ e-mailadres. Vergeet in dit geval even de extensie.test. Is dit venster voorzien van de juiste informatie, dan is de optie WordPress installeren beschikbaar.

Inloggen

Hierna log je in. Als eerste kies je ervoor om een nieuwe gebruiker met beheerdersrechten aan te maken. Daarmee log je vervolgens in en je haalt de gebruiker die je tijdens de installatie hebt aangemaakt weg (verwijderen). Dit doe je omdat je niet wilt dat er een gebruiker bestaat met het database ID 1. Dit is een mogelijk risico. Iedereen die kwaad in de zin heeft kan met dit gebruikers ID toegang krijgen tot een website, wanneer je onvoldoende beveiligingsopties hebt gekozen of geïnstalleerd. Hierover lees je meer in dit artikel dat ik eerder schreef over de installatie van WordPress.

SSL-activeren voor deze website

Je hebt nu gemerkt dat de website nog niet voorzien is van een SSL-certificaat. Met andere woorden, de website wordt aangeroepen via het HTTP-protocol. Dus niet via het HTTPS-protocol. Dat is wel noodzakelijk wanneer je bijvoorbeeld gebruik wilt maken van WooCommerce. Daarom volg je de volgende stappen op, zodat je kunt beschikken over een HTTPS-website in je testomgeving.

Open het Laragon-venster en kies als eerste voor Menu – WWW – Snel onderzoeken. Hierna selecteer je de map die overeenkomt met de aangemaakte website. Die map wordt vervolgens geopend in de Windows Verkenner. Zoek hierin het bestand wp-config.php op. Verwar dit bestand niet met wp-config-sample.php. In dit bestand bevinden zich de volgende regels:

Het gaat om de regels:

if ( !defined('WP_CLI') ) {
    define( 'WP_SITEURL', $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] );
    define( 'WP_HOME',    $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] );
}

Deze regels verwijder je. Heb je dit gedaan, dan kies je voor opslaan. Het bestand kun je hierna afsluiten. Je keert terug naar WordPress (wp-admin) en kiest voor Instellingen.

Je past nu de gegevens aan achter de velden WordPress adres (URL) en Site adres (URL). Wanneer je de wijziging hebt doorgevoerd in WP-config.php dan merk je dat deze velden niet langer beschermd / beveiligd zijn. Je past de gegevens aan van http naar https. Dit zorgt ervoor dat je opnieuw moet inloggen. Vanaf dit moment roep je de website aan via https://…..

Gefeliciteerd!

Inderdaad: gefeliciteerd! Je hebt nu een website aangemaakt in een testomgeving. Hierna kun je de website inrichten en uiteindelijk verplaatsen naar de omgeving waar je deze aan je bezoekers / klanten wilt laten zien.

De vraag is alleen: hoe zorg je ervoor dat je de website kunt exporteren van deze testlocatie naar de juiste locatie? Dat leg ik je uit in een volgend artikel!

Kom je er niet uit?

Kom je er niet uit? Of is dit misschien te veel voor je? Geen zorgen. Wist je dat ik onder de naam De Goede Huisvader Web Services iets voor je kan betekenen op dit gebied? Kijk snel op goedehuisvader.com voor meer informatie!

Afbeelding bovenaan deze pagina: Unsplash.