Websites gratis hosten en bewerken op Windows met XAMPP

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. Lees meer, 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? Stel dat 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 je eigen WordPress-account!

XAMPP: een introductie

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

Hoewel het opzetten van een lokale server met behulp van 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 hersteloptie 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, creëert 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 mogelijk tussen databases en websites, waardoor gebruikers e-mails, wachtwoorden en andere gegevensinvoer kunnen testen en opslaan. We zullen dit gebruiken voor uw lokale WordPress-account.

druk de Begin knop in uw XAMPP-configuratiescherm onder acties voor zowel Apache en MySQL. Wacht tot zowel Apache als MySQL groen gemarkeerd zijn onder je modulegedeelte. Eenmaal ingeschakeld, bent u vrij om XAMPP te gebruiken.

Localhost en phpMyAdmin

Om te zorgen dat alles in goede staat verkeert, opent u een webbrowser en voert u in http: // localhost / in je adresbalk en klik op invoeren. U moet worden omgeleid naar http: // localhost / dashboard /, wat de standaard XAMPP-pagina is.

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

Laat ze voorlopig 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 XAMPP-map in de hoofdmap van uw hoofdmap (C: \ xampp standaard). 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 standaard teksteditor 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 de mijne genoemd rondrit - probeer je naam simpel te houden. Pak vervolgens de inhoud van uw zipbestand uit en pak deze uit naar deze htdocs-map.

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 keuzemogelijkheden, houden de meesten van ons vast aan de beproefde en beproefde hoofdrolspelers. Wat zijn betere alternatieven voor gebruik van hulpbronnen, snelheid en beveiliging? Lees verder . Jouw website, om zo te zeggen, zal bereikbaar zijn met behulp van de eerder genoemde localhost samen met de naam van de map met uw paginabestanden. 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 siteadres is http: // localhost / roadtrip.

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

Websites bewerken

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

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 en slaat u deze op (met behulp van de toetsenbordopdracht Ctrl + S) en vernieuw 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, met uw uitgepakte WordPress-map aanwezig in de htdoc-map in 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 verder - http: // localhost / phpmyadmin / standaard - om te beginnen.

Klik vanaf deze pagina op databases. Onder de Maak een database parameter, enter wordpress en dan raken creëren. 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 uw WordPress-map het bestand met het label wp-config-sample.php, klik met de rechtermuisknop op het bestand, selecteer Bewerk (of Openen met voor een afzonderlijke teksteditor). Notepad zou prima moeten werken.

Dit is de code waar we ons op zullen richten:

// ** MySQL-instellingen - U kunt deze informatie opvragen bij uw webhost ** // / ** De naam van de database voor WordPress * / define ('DB_NAME', 'database_name_here'); / ** MySQL database gebruikersnaam * / define ('DB_USER', 'username_here'); / ** MySQL-databasewachtwoord * / 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.

username_here - Wijzig dit in wortel. 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 verlaat. Ga vervolgens naar het volgende localhost-adres: http: // localhost / wordpress.

Ga door met de installatie, inclusief het maken van uw WordPress Gebruikersnaam en Wachtwoord. U kunt elke gewenste waarde invoeren. Als u klaar bent met het invoeren van uw waarden, klikt u op de Installeer WordPress knop om het proces te beëindigen. Zodra dat is gebeurd, meldt u zich aan bij uw lokale WordPress met de gebruikersnaam en het wachtwoord op de vorige pagina.

U 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 je 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

Ontdek meer over: Apache Server, Webontwikkeling, Webhosting, Webserver, Webmasterhulpprogramma's, Wordpress.