Bagaimana cara mengatur lingkungan pengembangan lokal

Sep 11, 2025
Bagaimana caranya
Set up a local development environment
(Kredit Gambar: Masa Depan)

Lingkungan Pengembangan Lokal memungkinkan Anda untuk menggunakan mesin Anda sendiri untuk menjalankan situs web Anda, alih-alih menggunakan yang disediakan oleh a hosting web. perusahaan. Anda dapat menyesuaikan pengaturan tanpa khawatir bahwa itu akan mempengaruhi situs langsung Anda, serta membuat dan menguji pengembangan situs sebelum mengunggah situs Anda. Mengambil risiko ketika membangun sesuatu membuat proses pengembangan jauh lebih sedikit stres.

Manfaat lain dari bekerja secara lokal adalah Anda tidak harus terhubung ke Internet. Jika Anda memiliki WiFi yang lambat, suka bekerja di kebun atau bepergian, tidak perlu mencari sinyal WiFi sepanjang waktu.

Waktu yang dihabiskan FTPING ke situs pementasan dan menunggu situs Anda untuk menyegarkan benar-benar menambah hari pengembangan. Lingkungan lokal akan memungkinkan Anda fokus pada kode dan bit menyenangkan membangun situs web.

Tutorial ini mengasumsikan Anda berada di Mac, dan tutorial untuk memulai dengan Valet berfokus pada ini. Untuk alternatif PC, coba Homestead. .

Pengetahuan dasar terminal baik, meskipun Anda harus dapat mengikuti, karena perintahnya semua cukup sederhana. Mereka terutama untuk memasang komponen prasyarat dan berjalan.

Setelah menyelesaikan tutorial ini, Anda akan mengatur PHP, Homebrew dan Composer pada mesin Anda, memasang valet dan belajar cara mengatur situs lokal.

Unduh file untuk tutorial ini.

  • 5 Cara untuk Mempercepat Situs Web dan Aplikasi Anda

01. Instal Homebrew.

Set up a local development environment: Install Homebrew

Mulailah dengan menginstal homebrew dari terminal (Kredit Gambar: Sush Kelly)

Langkah pertama di sini adalah menginstal homebrew. Ketikkan perintah berikut di terminal Anda. 

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

02. Instal PHP.

Set up a local development environment: Install PHP

Pastikan PHP Anda adalah versi 7 (Kredit Gambar: Sush Kelly)

Selanjutnya kita perlu menginstal / memutakhirkan ke php7, jadi periksa menggunakan php -v. Jika Anda perlu menginstal, Anda dapat mengetik: 

brew install homebrew/php/php70

Jika Anda me-restart jendela terminal Anda sekarang dan ketik PHP -v. Sekali lagi, itu harus menunjukkan V7 yang diinstal.

03. Instal komposer

Anda harus mengunduh komposer, dan kemudian memasukkannya ke direktori yang merupakan bagian dari jalur Anda. 

 PHP -R "Salin ('https://getcompose.org/installer', 'komposer-setup.php');"
php r "jika (hash_file ( 'SHA384', 'komposer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') {echo 'Installer diverifikasi';} else {echo 'Installer korup'; unlink ( 'komposer-setup. php ');} echo php_eol; "
PHP Composer-Setup.php
PHP -R "tautan tautan ('komposer-setup.php');"

04. Pindah ke jalan Anda

Set up a local development environment: Move to your PATH

Masukkan komposer di jalan Anda (Kredit Gambar: Sush Kelly)

Sekarang pindahkan komposer ke direktori di dalam jalur Anda. Setelah selesai, Anda dapat memeriksa akses Anda dengan mengetik komposer-v. . 

 MV Composer.phar / usr / Local / Bin / komposer

05. Periksa jalan Anda

Jika Anda mengetik. echo $ path. , Anda akan melihat apa yang dikandungnya. Jika tidak, maka ketikkan yang berikut untuk menambahkannya. 

 Path Ekspor = $ PATH: ~ / .COMPOSER / VENDOR / BIN

06. Membutuhkan Valet secara global

Sekarang kami memiliki potongan-potongan yang dipasang, kita bisa melanjutkan dengan menginstal Valet. Pertama. Mari kita periksa tidak ada yang menggunakan port 80. Ketikkan yang berikut, dan jika tidak mengembalikan apa pun, kita baik-baik saja. 

 netstat -an | grep "\ .80" | grep mendengarkan

07. Instal Valet.

Kami menggunakan komposer untuk menginstal paket valet untuk kami, dan kemudian kami dapat menjalankan Instalasi Valet . 

 ComposerGlobal membutuhkan Laravel / Valet
Instalasi Valet

08. Park / Direktori Unpark

Buat direktori untuk situs pengembangan Anda dan beri tahu Valet untuk melayani mereka. Perhatikan bahwa folder di dalam ini dapat diakses sebagai sub domain. 

 # Pindah ke direktori proyek Anda
CD ~ / proyek / valet /
Park Valet

09. Lupakan direktori.

Dengan cara yang sama untuk parkir, jika Anda tidak lagi menginginkan folder untuk melayani melalui valet, gunakan saja perintah lupa dari dalam direktori. 

 dengan spasi //
Valet lupa

10. Tautan / tautan direktori

Anda juga dapat menautkan ke direktori. Ini memungkinkan Anda memilih nama yang Anda gunakan. 

 CD ~ / proyek / valet / subproyek /
# Tautkan direktori subproyek untuk membuatnya dapat diakses di hyperlink "http://subproject.dev" \ hhttp: //subproject.dev
Subproyek Link Valet

11. Bagikan situs Anda dengan dunia

Anda dapat berbagi URL dev lokal Anda ke dunia luar. Dalam direktori proyek Anda, ketik pangsa valet Dan itu akan membuat URL yang dapat Anda gunakan.

12. Menggunakan database

Anda harus menginstal database pilihan Anda - untuk WordPress, kami dapat melanjutkan dan menginstal MySQL. 

 Brew Install MySQL

13. Pilih alat basis data

Dengan pengaturan basis data, alat untuk mengimpor dan mengekspor data berguna, karena kami tidak memiliki phpmyadmin atau mirip dengan valet karena sangat ringan.

14. Unduh Sequel Pro

Set up a local development environment: Download Sequel Pro

Sekuel Pro adalah alat basis data langsung (Kredit Gambar: Sequel Pro)

Kami menggunakan Sequel Pro, karena menawarkan antarmuka sederhana. Kamu bisa Unduh di sini .

15. Hubungkan basis data

Menggunakan pengaturan default dari MySQL, tambahkan detail berikut dan uji koneksi Anda. 

 Host: 127.0.0.1
Nama pengguna: ROOT.
Kata Sandi: (biarkan kosong)

16. Siapkan situs WordPress

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

Instal inti WordPress di direktori valet Anda (Kredit Gambar: Sush Kelly)

Dengan segalanya sekarang, atur situs WordPress. Buat folder baru di dalam direktori valet Anda dan instal WordPress Core.

17. Tambahkan database

Set up a local development environment: Add a database

Buat database di Sequel Pro (Kredit Gambar: Sush Kelly)

Dalam sekuel pro, buat basis data baru dengan nama yang sama dengan folder yang Anda buat. Perbarui WP-CONFIG. file yang sesuai.

18. Tes semuanya berfungsi

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

Menuju ke browser dan periksa itu berfungsi (Kredit Gambar: Sush Kelly)

Sekarang jika Anda membuka browser Anda, dan navigasikan ke (folder Anda) .test Anda harus melihat layar instalasi WordPress. Ikuti ini melalui normal.

19. Membawanya Lebih Lanjut

Valet tidak hanya untuk menjalankan WordPress Installs, sebenarnya awalnya dibuat untuk pengembangan LARAVEL. Apakah Anda membangun sesuatu yang dipesan lebih dahulu di PHP atau menggunakan kerangka kerja, Anda dapat dengan mudah membuat situs baru dengan membuat direktori baru untuk itu di folder root Anda.

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

(Kredit Gambar: Masa Depan)

Bergabunglah dengan kami pada 26 September untuk Hasilkan CSS. , konferensi yang dipesan lebih dahulu untuk desainer web yang dibawa kepada Anda oleh Kreatif Bloq, Net dan Desainer Web. Hemat £ 50 dengan tiket burung awal saat Anda memesan sebelum 15 Agustus 2019.

Artikel ini awalnya diterbitkan dalam edisi 287 dari Majalah Desain Web Kreatif Desainer web . Beli masalah 287 di sini atau berlangganan desainer web di sini .

Artikel terkait:

  • 40 tutorial WordPress yang brilian
  • Layanan hosting WordPress terbaik pada tahun 2019
  • 4 cara berbeda untuk membuat mockup situs web

Bagaimana caranya - Artikel Terpopuler

Desainer Afinitas: Cara Menggunakan Efek dan Gaya

Bagaimana caranya Sep 11, 2025

(Kredit Gambar: Serif) Dengan alat vektor dan raster digabungkan, Perancang afinitas adalah alternatif..

Buat perspektif di Adobe Illustrator

Bagaimana caranya Sep 11, 2025

Halaman 1 dari 2: Menggunakan Grid Perspektif di Illustrator: Langkah-langkah 01-09 ..

Tambahkan animasi UI ke situs Anda

Bagaimana caranya Sep 11, 2025

Kebanyakan orang melihat antarmuka pengguna setiap hari, apakah itu di dalam aplikasi seluler atau di situs web, jadi penting unt..

Aturan Tipografi Web Responsif

Bagaimana caranya Sep 11, 2025

Tipografi Web responsif sangat sulit - Anda harus memiliki daging desain dan pengetahuan teknis. Namun bagaimanapun rumitnya, salah, salah bukanlah pilihan, karena tipografi adalah landasan d..

mensimulasikan transformasi pengendara hantu

Bagaimana caranya Sep 11, 2025

Halaman 1 dari 2: Halaman 1 Halaman 1 Ha..

Cara merancang sampul buku yang sempurna

Bagaimana caranya Sep 11, 2025

Publishing sendiri menyumbang 22 persen dari pasar ebook Inggris dan terus tumbuh, makna penulis semakin berkaitan langsung denga..

kekuatan Flexbox yang luar biasa

Bagaimana caranya Sep 11, 2025

Flexbox, atau tata letak kotak fleksibel, adalah modul tata letak CSS yang kuat yang memberikan perancang web dan pengembang cara..

Boost d3.js grafik dengan gradien SVG

Bagaimana caranya Sep 11, 2025

Nadieh Bremer akan berada di Hasilkan London. pada bulan September, di mana dia akan menu..

Kategori