Hur man sätter upp en lokal utvecklingsmiljö

Sep 12, 2025
Hur
Set up a local development environment
(Bildkredit: Framtida)

En lokal utvecklingsmiljö gör att du kan använda din egen maskin för att köra din webbplats, istället för att använda en som tillhandahålls av a webbhotell företag. Du kan anpassa inställningen utan att oroa dig för att det kommer att påverka din levande webbplats, samt göra och testa webbplatsutveckling innan du laddar upp din webbplats. Att ta bort risk när man bygger något gör utvecklingsprocessen mycket mindre stressande.

En annan fördel med att arbeta lokalt är att du inte behöver anslutas till Internet. Om du har långsam wifi, som att arbeta i trädgården eller reser, är det inte nödvändigt att söka efter en WiFi-signal hela tiden.

Den tid som spenderades till en staging-webbplats och väntar på att din webbplats ska uppdatera verkligen lägger upp en dag med utveckling. En lokal miljö låter dig fokusera på kod och de roliga bitarna på byggnadswebbplatser.

Denna handledning förutsätter att du är på en Mac, och handledningen för att komma igång med Betjänad fokuserar på detta. För ett PC-alternativ, försök Hemman .

En grundläggande kunskap om terminal är bra, även om du borde kunna följa med, eftersom kommandona är alla ganska enkla. De är främst för att få de förutsättningskomponenter installerade och löpande.

Efter att ha avslutat den här handledningen har du konfigurerat PHP, Homebrew och Composer på din maskin, installerad Valet och lärt dig hur du ställer in lokala webbplatser.

Ladda ner filerna för denna handledning.

  • 5 sätt att påskynda dina webbplatser och appar

01. Installera homebrew

Set up a local development environment: Install Homebrew

Börja med att installera Homebrew från terminalen (Bildkredit: Sush Kelly)

Första steget här är att installera homebrew. Skriv följande kommando i din terminal. 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

02. Installera PHP

Set up a local development environment: Install PHP

Se till att din PHP är version 7 (Bildkredit: Sush Kelly)

Därefter måste vi installera / uppgradera till php7, så kolla med PHP -V. Om du behöver installera kan du skriva: 

brew install homebrew/php/php70

Om du startar om ditt terminalfönster nu och skriv PHP -v Återigen ska det visa V7 installerat.

03. Installera kompositören

Du måste ladda ner kompositören och lägg den i en katalog som är en del av din väg. 

 PHP -R "COPY ('https://getcomposer.org/installer', 'Composer-Setup.php');"
php -r "om (hash_file ( 'SHA384', 'kompositör-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') {echo 'installatörs verifierade';} else {echo 'installatörs korrupt'; unlink ( 'kompositör-setup. php ');} echo php_eol; "
PHP Composer-Setup.php
PHP -R "Unlink (" Composer-Setup.php ");"

04. Flytta till din väg

Set up a local development environment: Move to your PATH

Sätt kompositören i din väg (Bildkredit: Sush Kelly)

Flytta nu kompositören till en katalog inom din väg. När du är klar kan du kontrollera din åtkomst till den genom att skriva kompositör-v . 

 MV Composer.phar / Usr / Lokal / Bin / Kompositör

05. Kontrollera din sökväg

Om du skriver Echo $-vägen , du kommer att se vad den innehåller. Om det inte gör det, skriv sedan följande för att lägga till det. 

 Exportväg = $ Path: ~ / .composer / leverantör / bin

06. Kräver valet globalt

Nu har vi de installerade bitarna, vi kan fortsätta med att installera betjänt. Först. Låt oss kontrollera ingenting använder port 80. Skriv följande, och om det inte returnerar ingenting, är vi bra att gå. 

 Netstat -an | grep "\ .80" | Greppa lyssna

07. Installera betjänt

Vi använder kompositör för att installera betjäntpaketet för oss, och då kan vi springa Betjänad installation . 

 ComposerGlobal kräver laravel / betjänt
Betjänad installation

08. Park / Unpark kataloger

Skapa en katalog för dina utvecklingsplatser och berätta för att betjäna dem. Observera att mappar inuti detta kan nås som underdomäner. 

 # Flytta till dina projektkatalog
CD ~ / Projekt / Betjänad /
Betjänad park

09. Glöm kataloger

På ett liknande sätt att parkera, om du inte längre vill ha en mapp att servera via betjänt, använd bara det glömma kommandot inifrån i katalogen. 

 med utrymmen //
Betjänad Glöm

10. Länk / Unlink-kataloger

Du kan också länka till kataloger. Detta gör att du kan välja det namn du använder. 

 CD ~ / Projekt / Betjänad / Delprojekt /
# Länk underprojektkatalogen för att göra den tillgänglig vid hyperlänk "http://subproject.dev" \ hhttp: //subproject.dev
Betjänad länk delprojekt

11. Dela din webbplats med världen

Du kan dela din lokala DEV-URL till omvärlden. I katalogen av ditt projekt, skriv betervantel Och det kommer att skapa en webbadress du kan använda.

12. Använda en databas

Du måste installera din databas med val - för WordPress, vi kan fortsätta och installera MySQL. 

 Brew Install MySQL

13. Välj ett databasverktyg

Med en databasuppsättning är ett verktyg för att importera och exportera data användbart, eftersom vi inte har phpmyadmin eller liknande med betjänt som det är så lätt.

14. Ladda ner Sequel Pro

Set up a local development environment: Download Sequel Pro

Sequel Pro är ett enkelt databasverktyg (Bildkredit: Sequel Pro)

Vi använder Sequel Pro, eftersom det erbjuder ett enkelt gränssnitt. Du kan Ladda ner det här .

15. Anslut databasen

Använda standardinställningarna från MySQL, lägg till följande uppgifter och testa din anslutning. 

 Värd: 127.0.0.1
Användarnamn: Root
Lösenord: (lämna tomt)

16. Ställ in en WordPress-webbplats

Set up a local development environment: Set up a WordPress site

Installera WordPress-kärnan i din Valet-katalog (Bildkredit: Sush Kelly)

Med allt som nu är på plats, skapa en WordPress-webbplats. Skapa en ny mapp i din Valet-katalog och installera Wordpress-kärnan.

17. Lägg till en databas

Set up a local development environment: Add a database

Skapa en databas i Sequel Pro (Bildkredit: Sush Kelly)

I Sequel Pro skapar du en ny databas med samma namn som den mapp du skapade. Uppdatera wp-config fil som passar.

18. Test Det fungerar allt

Set up a local development environment: Test it's all working

Gå till webbläsaren och kontrollera att det fungerar (Bildkredit: Sush Kelly)

Nu om du öppnar din webbläsare och navigerar till (din mapp) .Test Du bör se WordPress Install-skärmen. Följ detta igenom som vanligt.

19. Ta det vidare

Betjänad är inte bara för att köra WordPress Installs On, det skapades faktiskt ursprungligen för Laravel Development. Oavsett om du bygger något skräddarsydd i PHP eller använder en ram, kan du enkelt skapa en ny webbplats genom att skapa en ny katalog för den i din rotmapp.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Bildkredit: Framtida)

Bli med oss ​​den 26 september för Generera CSS , en skräddarsydd konferens för webbdesigners till dig av Creative Bloq, Net och Web Designer. Spara 50 kr med en tidig fågelbiljett när du bokar före den 15 augusti 2019.

Den här artikeln publicerades ursprungligen i utgåva 287 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 287 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

  • 40 briljanta wordpress tutorials
  • De bästa Wordpress-värdtjänsterna 2019
  • 4 olika sätt att skapa en hemsida mockup

Hur - Mest populära artiklar

Förstå Unity Asset Import Pipeline

Hur Sep 12, 2025

Enighet är en av världens mest populära spelmotorer, ansvarig för att driva hundratusentals spel runt om i världen på över..

Rita en Bad-Ass Geisha

Hur Sep 12, 2025

På denna Geisha-illustration ville jag fånga en grungy, mörk, urban vibe, laced med eleganta traditionella japanska element. J..

Konceptdesigntips för konstnärer

Hur Sep 12, 2025

Sida 1 av 2: Sida 1 Sida 1 Sida 2 Den huvudsakliga uppgiften för e..

Hur man bygger komplexa layouter med CSS

Hur Sep 12, 2025

Layout för webben har alltid varit begränsad, det har verkligen aldrig varit något som verkligen är dedikerat till att göra ..

Mode flexibla layouter med CSS-nät

Hur Sep 12, 2025

CSS-nätet är perfekt för att skapa tvåaxiga layouter av rader och kolumner. Syntaxen är enkel och gör sidlayout en bris. La..

Kom igång med WebGL med tre.js

Hur Sep 12, 2025

Webgl , som är allmänt stödd på alla moderna webbläsare, gör att du kan arbeta med hårdvaruaccelerat 3D-grafik..

12 tips för realistisk 3D-belysning

Hur Sep 12, 2025

Belysning är grundläggande i någon 3d konst Projekt du arbetar på. På den mest grundläggande nivån är det ..

Skapa kvalitet Digitala kopior av din konst

Hur Sep 12, 2025

Konst handlar inte bara om att skapa, det handlar också om att dela. När du har gjort ett vackert arbete är du stolt över, det är bara naturligt att du vill att andra ska se det också. ..

Kategorier