Websites gratis hosten en bewerken op Windows met XAMPP

U wilt een website bouwen. De overhead kan duur zijn. Wat als je gewoon webontwikkeling wilt leren, zonder rommel? Laat ons u tonen hoe u gratis een lokale website hosten.

U wilt een website bouwen.  De overhead kan duur zijn.  Wat als je gewoon webontwikkeling wilt leren, zonder rommel?  Laat ons u tonen hoe u gratis een lokale website hosten.
Advertentie

U wilt een website bouwen 10 manieren om een ​​kleine en eenvoudige website te maken zonder de overkill 10 manieren om een ​​kleine en eenvoudige website te maken zonder de overkill WordPress kan een overkill zijn. Zoals deze andere uitstekende services bewijzen, is WordPress niet het enige en het einde van het maken van websites. Als u eenvoudigere oplossingen wilt, is er een verscheidenheid om uit te kiezen. Meer lezen, maar weet niet waar te beginnen?

Het lijkt erop dat de typische trainingssite voor webontwikkeling ook de duurste is: koop een domein, host-server, WordPress-account, thema, enzovoort. Maar wat als je geen eigenaar van een klein bedrijf bent of een merk probeert te bouwen? Wat als je gewoon probeert om webontwikkeling te leren, zonder rommel?

Lees verder voor meer informatie over het hosten van uw eigen website Hoe u een door uzelf gehost WordPress-blog voor projectmanagement gebruikt Hoe u een door uzelf gehost WordPress-blog voor projectbeheer kunt gebruiken Lees meer, dat u helemaal zelf of met vooraf gemaakte sjablonen kunt maken, op uw computer en gratis. Oh, dat omvat ook het hosten van uw eigen WordPress-account!

XAMPP: een introductie

Bitnami's XAMPP is "een Apache-distributie met PHP en Perl." Voor onze doeleinden hoeven we alleen maar te begrijpen dat XAMPP een gratis, eenvoudig programma is waarmee gebruikers websites op hun pc kunnen hosten.

Hoewel het opzetten van een lokale server met XAMPP enigszins technisch is, is het proces ook vrij eenvoudig en ongecompliceerd. Zodra alles is ingesteld, zult u merken dat het beheren en bewerken van websites een koud kunstje is.

Dan is er de kwestie van snelle en volledige controle. Door XAMPP te gebruiken om websites te maken en te bewerken, kunt u zo veel of zo weinig van een website veranderen als u wilt. Dat gezegd hebbende, met grote macht komt grote verantwoordelijkheid. U bent ook vatbaarder voor het verliezen van uw sites, vooral als u geen back-ups maakt. De Ultieme Windows 10-gids voor gegevensback-up De ultieme Windows 10-gids voor gegevensback-ups We hebben elke back-up-, herstel-, herstel- en reparatieoptie samengevat die we konden vinden op Windows 10. Gebruik onze eenvoudige tips en wanhoop nooit meer over verloren gegevens! Lees verder .

Als u echter een echt starterscursus-project in web dev wilt, dan is XAMPP iets voor u. Dat omvat alle projecten met betrekking tot HTML, CSS, Javascript en nog veel meer!

Installatie van XAMPP

Ga naar de XAMPP-website en download het pakket. Volg het standaard instellingsproces. Nadat je XAMPP hebt gedownload, wordt je XAMPP-configuratiescherm automatisch geopend. Als dat niet het geval is, kunt u het XAMPP-programma op dezelfde manier vinden als bij een ander programma (via Zoeken in het menu Start).

In uw XAMPP-configuratieschermvenster ziet u een eenvoudige lay-out waarvan XAMPP-processen worden uitgevoerd. Voor onze doeleinden zullen we ons concentreren op de eerste twee opties: Apache en MySQL.

Apache - De belangrijkste crux van XAMPP, de Apache-optie maakt een Apache-server op uw pc. Op deze manier kunt u websites op uw pc uitvoeren en bewerken via webbrowsers, net zoals een website. Behalve natuurlijk, deze website draait op uw pc, in tegenstelling tot een server die verbonden is met internet.

MySQL - SQL maakt communicatie tussen databases en websites mogelijk, waardoor gebruikers e-mails, wachtwoorden en andere gegevensinvoer kunnen testen en opslaan. We zullen dit gebruiken voor uw lokale WordPress-account.

Druk op de Start- knop in uw XAMPP-configuratiescherm onder Acties voor zowel Apache als MySQL. Wacht tot zowel Apache als MySQL groen gemarkeerd zijn onder je modulegedeelte. Eenmaal ingeschakeld, bent u vrij om XAMPP te gebruiken.

xampp-configuratiescherm

Localhost en phpMyAdmin

Om ervoor te zorgen dat alles in werkende staat is, opent u een webbrowser, typt u http: // localhost / in uw adresbalk en drukt u op Enter . U moet worden omgeleid naar http: // localhost / dashboard /, de standaard XAMPP-pagina.

xampp standaard webpagina

Klik vervolgens op de phpMyAdmin- knop in het bovenste navigatiemenu. Je wordt doorgestuurd naar je standaard phpMyAdmin-pagina.

phpmyadmin

Laat deze voor nu alleen, maar als beide werken, ben je klaar om websites te gaan maken!

Websites maken met XAMPP

Nu komt het leuke gedeelte. Ga naar de map XAMPP die zich in de hoofdmap van uw hoofdmap bevindt (standaard C: \ xampp ). Ga dan naar htdocs . Dit wordt de belangrijkste repository van de website die u zult gebruiken om websites te bekijken.

Voordat we een website maken en bewerken, hebt u een teksteditor nodig. Hoewel u een standaardteksteditor zoals Kladblok kunt gebruiken, is het meestal het beste om een ​​externe editor te downloaden die speciaal is gemaakt voor code en markup 11 Sublime-teksttips voor productiviteit en een snellere workflow 11 Sublieme tekentips voor productiviteit en een snellere werkstroom Sublieme tekst is een veelzijdige teksteditor en een gouden standaard voor veel programmeurs. Onze tips zijn gericht op efficiënte codering, maar algemene gebruikers zullen de sneltoetsen op het toetsenbord waarderen. Lees verder . Sublime Text is een van de beste in de buurt, dus ga naar hun website en download de software om aan de slag te gaan.

Nu kunt u beginnen met het downloaden en installeren van websites in XAMPP. Ik zal de Roadtrip-sjabloon gebruiken, maar u kunt elke sjabloon gebruiken die u wilt. Download het zipbestand van de website en bewaar het op een locatie die u nog zult onthouden. Maak vervolgens een map in de map htdocs van XAMPP voor uw website. Ik heb mijn roadtrip genoemd - probeer je naam simpel te houden. Pak vervolgens de inhoud van uw zipbestand uit en pak deze uit naar deze htdocs-map.

uitpakken naar roadtrip

Nadat u de bestanden hebt uitgepakt, gaat u naar de repository van uw website in htdocs om te controleren of ze correct zijn geëxtraheerd.

Tot slot gaat u naar uw webpagina in uw webbrowser De beste webbrowser voor Windows De beste webbrowser voor Windows Wat is uw standaardwebbrowser? Hoewel we verwend zijn met keuzes, houden de meesten van ons vast aan de beproefde grote spelers. Wat zijn betere alternatieven voor gebruik van hulpbronnen, snelheid en beveiliging? Lees verder . Uw website is om zo te zeggen bereikbaar via de eerder genoemde localhost, samen met de naam van de map die uw paginabestanden bevat. Dit komt omdat websites in essentie bestanden zijn die zich in mappen bevinden, allemaal onder een enkele domein- of root-naam. Je leert het al!

Onze eerder gemaakte map kreeg de naam roadtrip, dus het volledige adres van de site is http: // localhost / roadtrip .

routetemplate

Je bent klaar! Nu kunt u beginnen met het lokaal bewerken van de website.

Websites bewerken

Open Sublime-tekst. Ga naar Bestand en selecteer Map openen . Zoek en selecteer uw webmap in de XAMPP-map. U kunt nu meerdere pagina's van dezelfde website bewerken in uw Sublime Text-editor.

sublieme tekst

Sublime Text biedt ook een geweldige interface voor u om elk bestand en elke map van uw website te bekijken. Als u wijzigingen op uw website wilt aanbrengen, bewerkt u de code van uw website, slaat u deze op (via de toetsenbordopdracht Ctrl + S ) en vernieuwt u uw website in de browser.

Het proces is eenvoudig en direct: bewerk de webpagina en controleer of uw code werkt. Naarmate je vordert in je webontwikkeling, probeer je ingewikkelder functies in te voegen in je webpagina. Ongeacht het vaardigheidsniveau, het basisformaat om pagina's te bewerken blijft echter hetzelfde.

Gebruik WordPress met XAMPP

Als u geen raw-code wilt bewerken of liever een meer vertrouwd contentmanagementsysteem (CMS) wilt gebruiken, biedt WordPress zijn fantastische webontwerpresource ook in een gemakkelijk te gebruiken ZIP-bestand! Om WordPress op XAMPP te installeren, ga je naar de WordPress-website en download je de officiële applicatie.

Gebruik dezelfde indeling om een ​​website te maken zoals u eerder deed, waarbij uw uitgepakte WordPress-map aanwezig was in de htdoc-map binnen de map wordpress . Behoud de mapnaam voor de duidelijkheid.

PhpMyAdmin gebruiken

Aangezien WordPress vereist dat u aanmeldingsgegevens maakt, moet u een vermelding in uw PHP-directory voor de webpagina maken. Ga naar uw phpMyAdmin-pagina Uw blog instellen met Wordpress: de ultieme gids Uw blog instellen met Wordpress: de ultieme gids Wilt u uw eigen blog starten, maar weet u niet waar u moet beginnen? Je moet echt kijken naar Wordpress, het eenvoudigste en krachtigste blogplatform dat vandaag beschikbaar is. Lees meer - http: // localhost / phpmyadmin / standaard - om aan de slag te gaan.

Klik vanaf deze pagina op Databases . Voer onder de parameter Create database, wordpress in en druk op Create . U zou een popup moeten zien die vertelt dat de database is aangemaakt. Sluit vervolgens dit browservenster en voer uw WordPress-map in de XAMPP htdocs-map in. Deze map moet de inhoud van uw uitgepakte WordPress-bestanden bevatten.

Login configureren

We moeten de eigenlijke WordPress-website configureren, zodat u kunt inloggen en de site kunt gebruiken. Dit gebeurt via het belangrijkste PHP-configuratiebestand van WordPress. Zoek in je WordPress-map het bestand met het label wp-config-sample.php, klik met de rechtermuisknop op het bestand en selecteer Bewerken (of Openen met voor een afzonderlijke teksteditor). Notepad zou prima moeten werken.

Dit is de code waar we ons op zullen richten:

// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', ' database_name_here '); /** MySQL database username */ define('DB_USER', ' username_here '); /** MySQL database password */ define('DB_PASSWORD', ' password_here '); 

U moet drie wijzigingen aanbrengen in de bovenstaande code binnen het aanhalingsteken.

database_name_here - Wijzig deze parameter in wordpress . De website gebruikt dan de eerder gemaakte database in phpMyAdmin die als zodanig is gelabeld.

gebruikersnaam_here - Wijzig dit in root . De root-gebruikersnaam heeft standaard de juiste beheerdersrechten, dus het wordt toegestaan ​​via phpMyAdmin. Andere gebruikersnamen zullen niet werken tenzij ze de juiste rechten hebben.

password_here - Verander dit in een gemakkelijk herkenbaar wachtwoord. Als u liever geen wachtwoord gebruikt, verwijdert u de parameter.

Sla dit bestand op als wp-config.php - in tegenstelling tot de vorige wp-config-sample.php - en sluit af. Ga vervolgens naar het volgende localhost-adres: http: // localhost / wordpress .

Ga verder met de installatie, inclusief het aanmaken van uw WordPress- gebruikersnaam en -wachtwoord . U kunt elke gewenste waarde invoeren. Nadat u uw waarden hebt ingevoerd, klikt u op de knop WordPress installeren om het proces te voltooien. Zodra dat is gebeurd, meldt u zich aan bij uw lokale WordPress met de gebruikersnaam en het wachtwoord op de vorige pagina.

localhost wordpress

Je bent klaar! Nu kunt u de inhoud van uw hart besteden aan het bewerken, wijzigen en maken van webpagina's, zowel vanaf nul als via WordPress, offline en gratis. De beste WordPress-plugins De beste WordPress-plugins Lees meer!

Webontwikkeling begint met een enkele pagina

Vroeger was je net begonnen aan je webontwikkelingsreis. U hebt nu een lokale server op uw pc gemaakt waarmee u in een bevlieging webpagina's kunt maken, wijzigen en aanpassen. Het beste van alles is dat u de volledige controle heeft. Het enige dat overblijft is om te beginnen met uw experimenten, dus ga aan de slag!

Welke software gebruik je voor webontwikkeling? Heb je advies voor aanstormende ontwikkelaars? Laat het ons weten in de comments hieronder!

Afbeeldingscredits: Dmitry Tishchenko / Shutterstock

In this article