Creëer in drie stappen een eigen ontwikkelomgeving voor je nieuwe website!

Je wilt graag een nieuwe website opbouwen voor je domein, maar wenst dat je huidige website in de tussentijd wel online blijft staan. In dit geval is het hebben van een ontwikkelomgeving, op een plek naast je bestaande website, zeer handig. Hoe pak je dat aan? In dit artikel leg ik je uit, hoe je een eigen ontwikkelomgeving kunt creëren, afschermen en daarna live kunt zetten op je eigen webhostingpakket.

Bouw een eigen ontwikkelomgeving voor je website!

Een ontwikkelomgeving is ideaal om, naast je huidige website, een nieuw CMS zoals WordPress te proberen. Het geef je ook de gelegenheid om rustig aanpassingen te testen, zonder dat het gelijk gevolgen heeft voor je hoofdwebsite. Graag loods ik je er in drie stappen doorheen:

Stap 1: creëer je ontwikkelomgeving

De gemakkelijkste methode om een nieuwe ontwikkelomgeving online te zetten, is door je gewenste CMS te installeren via Installatron. In dit artikel ga ik uit van een WordPress-installatie, maar deze stappen kunnen ook worden doorlopen als je bijvoorbeeld een ontwikkelomgeving wenst voor Drupal, Joomla of één van de vele andere systemen die in Installatron beschikbaar zijn.

Wanneer je de installatiehandleiding volgt, dien je als aanvullende stap bij het derde punt aan te geven dat je gebruik wenst te maken van een aangepaste map. In dit geval installeer ik de omgeving in de map ‘ontwikkelomgeving’ door bij ‘Directory’ ‘ontwikkelomgeving’ in te vullen.

Bouw een eigen ontwikkelomgeving voor je website: bepaal de locatie

Nadat de WordPress-installatie is voltooid, kun je het via http://www.jedomeinnaam.nl/ontwikkelomgeving benaderen. Je hoofdwebsite is nog gewoon via http://www.jedomeinnaam.nl te bereiken.

Stap 2: scherm je ontwikkelomgeving af

Het afschermen van een ontwikkelomgeving is zeer gewenst. Zo weet je zeker dat deze omgeving door niemand anders valt te benaderen. Hierdoor kun je bijvoorbeeld de lancering van een nieuwe website geheimhouden tot de dag dat je dit voor je bezoekers groots aankondigt.

In deze stap zal ik beschrijven, hoe je met wachtwoordbescherming je ontwikkelingsomgeving kunt afschermen. Door dit in te stellen, toont er zich een extra loginscherm in je browser, wanneer iemand de ontwikkelomgeving wenst te benaderen.

Om de wachtwoordbescherming aan te maken, ga je in DirectAdmin van je pakket naar de ‘File Manager’ (te vinden onder de categorie ‘Your Account’). Je dient hier door te bladeren naar de /public_html/-map waarin je de bestanden van je website ziet staan.

Bouw een eigen ontwikkelomgeving voor je website: de public_html/-map opzoeken

Bij de map die je wenst af te schermen, druk je nu op ‘Protect’. In dit voorbeeld scherm ik mijn map ‘ontwikkelomgeving’ dus af door bij die map op ‘Protect’ te klikken.

Bouw een eigen ontwikkelomgeving voor je website: het instellen van wachtwoordbescherming

Nu kom je in een scherm waar je kunt aangeven dat je de map wenst te beveiligen. De volgende velden dien je daarbij in te vullen:

  • Protected Directory Prompt: hier kan je een extra tekst neerzetten die dan bij het loginscherm zal worden getoond.
  • Set/Update User: hier vul je de gewenste gebruikersnaam in.
  • and Password: vul hier het gewenste wachtwoord in.
  • Re-Enter Password: vul nogmaals hetzelfde wachtwoord in.

Het is belangrijk is dat je ‘Protection Enabled’ aanklikt om de map daadwerkelijk af te schermen. Klik, nadat je alle velden hebt ingevuld en ‘Protection Enabled’ hebt aangevinkt, op ‘Save’.

Bouw een eigen ontwikkelomgeving voor je website: het aanmaken van de wachtwoordbescherming

Nadat je jouw ontwikkelomgeving hebt afgeschermd, kun je ermee aan de slag. Nu is dus het moment aangebroken om de website naar eigen wens op te bouwen en te testen.

Tip!
Maak met caching je nieuwe website nog sneller. Houd het dan bij één cachingplugin, zodat je website zo optimaal mogelijk blijft werken.

Stap 3: Lanceer je nieuwe website

Je kunt je ontwikkelomgeving natuurlijk puur voor testen blijven gebruiken. Echter, je kunt ook vanuit de ontwikkelomgeving opgebouwde website lanceren. Erg handig wanneer de testwebsite af is en je graag wilt dat http://www.jedomeinnaam.nl deze website laat zien.

3.1 Het weghalen van de wachtwoordbescherming

Belangrijk is dat je eerst weer het wachtwoord van je ontwikkelomgeving afhaalt. Je gaat hiervoor in DirectAdmin naar ‘Password Protected Directories’, te vinden onder de categorie ‘Your Account’. Daar klik op je op de map die je hebt afgeschermd. Haal het vinkje bij ‘Protection Enabled’ weg en klik op ‘Save’.

Bouw een eigen ontwikkelomgeving voor je website: de ingestelde wachtwoordbescherming weghalen

3.2 Het verplaatsen van je hoofdwebsite

Nu je de beveiliging hebt weggehaald, kun je de installatie verplaatsen. In dit voorbeeld is het zo dat de hoofdwebsite rechtstreeks in de map /public_html/ staat en de nieuwe website in de map /public_html/ontwikkelomgeving/. Wat je hierbij dus wilt, is de website in de map /public_html/ontwikkelomgeving/ naar de map /public_html/ verplaatsen.

Je kunt de bestanden via een FTP-programma, zoals FileZilla, verplaatsen. In dit geval kiezen we ervoor om de ‘File Manager’ in DirectAdmin te gebruiken. De stappen zijn dan als volgt:

  • Klik in DirectAdmin op ‘File Manager’, te vinden onder de categorie ‘Your Account’, klik daarna op de map /public_html/ (de map met een rode pijl erin die naar rechts wijst.
  • Maak een nieuwe map aan met de naam ‘oud’. Je kunt dit realiseren door onderaan bij ‘Create New Folder’ de waarde ‘oud’ in te typen en dan op ‘Create’ te klikken.
  • Selecteer alle bestanden in de /public_html/-map. Dit doe je door rechts bovenaan op ‘Select’ te klikken.
  • Haal het vinkje bij de map weg waar je nieuwe website in staat. In dit voorbeeld haal ik dus het vinkje weg bij de map ‘ontwikkelomgeving’.
  • Klik vervolgens onderaan op ‘Add to Clipboard’ om te bestanden te kunnen verplaatsen.
  • Klik daarna op de map ‘oud’ die je iets eerder in dit proces hebt aangemaakt. Wanneer je in die map bent, klik je onderdaan op ‘Move Clipboard Files Here’ om de bestanden uit de /public_html/-map daar naartoe te verplaatsen.

3.3 Het verplaatsen van je ontwikkelwebsite

Je vorige hoofdwebsite heb je nu naar de submap /oud/ verplaatst. De volgende stap is om de ontwikkelwebsite naar de /public_html/-map te verplaatsen zodat dit nu de hoofdwebsite wordt.

  • Ga naar de map /public_html/ontwikkelomgeving/ en klik onderaan op ‘Empty Clipboard’. Klik daarna weer rechts bovenaan op ‘Select’ om alle bestanden te selecteren. Daarna klik je op ‘Add to Clipboard’.
  • Ga weer terug naar de /public_html/-map en klik onderaan op ‘Move Clipboard Files Here’. Zo zet je de website-bestanden van je nieuwe website rechtstreeks in de /public_html/-map.
  • Wat nog resteert, is het aanpassen van de URL in de WordPress-installatie. Daar staat namelijk nu als site-URL http://www.jedomeinnaam.nl/ontwikkelomgeving waar je graag wilt dat dit nu http://www.jedomeinnaam.nl/ wordt. Hoe je in WordPress de URL verandert, wordt hier stapsgewijs toegelicht.

De situatie is nu zo dat je oude website in de map /public_html/oud/ staat, de nieuwe website in map /public_html/ en geen website in de map /public_html/ontwikkelomgeving/.

Vanuit beveiligingsoogpunt is het nu waard om te overwegen wat je met de bestanden in de map /oud/ doet. Je kunt die map bijvoorbeeld naar je PC verplaatsen of van je pakket verwijderen, wanneer je die bestanden niet meer nodig hebt. Je wilt hierbij namelijk niet dat er een map op je pakket staat die een gedateerde installatie bevat en zo een beveiligingslek vormt.

Dankzij testen een succesvolle website!

Door een ontwikkelomgeving te hebben naast je bestaande website, kun je dus rustig nieuwe situaties testen zonder dat bezoekers hier iets van merken. Hierdoor kun je extra aandacht schenken aan je website, wat uiteindelijk zal leiden tot meer tevreden bezoekers.

Zit je er ook aan te denken om een website op te zetten, maar heb je nog geen webhostingpakket? Check hier onze Slim-, Plus- en Pro-pakketten, zodat je snel aan de slag kunt!

Bestel je webhostingpakket →

P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Rechts bovenin via RSS, e-mail, het liken op Facebook, het +1’en op Google+ of het volgen op Twitter.

Deel Deel Deel Deel

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *