General Tips for Designing

1. Pop your DevTools “out”—this is a personal preference of mine. It isn't easy to get a clear view of your design when pushed to the side and surrounded by code. You can change how DevTools are displayed by going in the top right > click the vertical dots > and selecting a different docking icon.

2. Use the Ruler tool—this can really help when trying to make sure elements line up.

   1. To enable the ruler tool, go to the Elements pane in DevTools, press shift + ? to access preferences > click the show rulers checkbox.

   2. A little trick I've learned is highlighting an element, so the rulers are displayed, then scroll vertically-only; without moving your mouse. DevTools will continue to draw rulers as you scroll to check elements beyond the viewport are lined up.

3. Maintain your own base CSS file—I personally keep a core.css file, and a non-core.css file. I know I'll use everything in core and quite a lot of things in non-core. This can help kick-start a project, and design in the browser immediately without any set-up.

Keyboard Shortcuts

A good metaphor for thinking about automation and keyboard shortcuts is using a well-known tool like Photoshop of a Word document. If you use these all day, you'll start to get used to some shortcuts. For example, Photoshop has single-key shortcuts for things like Brush tool (b), pen tool (p), Stamp tool (s), Switch colours (x). Word has things like Bold (b), Underline (u).

If you use these tools all day long, it's difficult to do without shortcuts. I feel the same way when designing in the browser—I want as many shortcuts as I can remember to get my ideas out fast.

Here are some convenient keyboard shortcuts that are baked into DevTools:

1. Incrementing—whenever you're keyboard is focused in a number field you can use the up/down arrows to increment by 1, and then combine with modifiers like shift to increment by 10, or alt to increment by 0.1. This works slightly differently in the Elements panel vs the Sources panel—the Elements panel being slightly superior since there is also the option to increment by 0.1.

   1. Incidentally, you can also use your scroll wheel to go up and down values, again using the modifier keys to change the way the numbers increment.

2. Previous/Next edit points—Use alt & - and alt & + to get to where you were editing previously, or most recently. I find this one particularly useful when working with larger CSS files (like my core.css!) where I'm editing variables at the top of the file and need to get to where I was.

3. Switching between inspecting and editing—you can use cmd + 1-9 to jump between different panels (you can also rearrange panels to whatever order you want by dragging them around).

   1. This is not turned on by default. To enable this, go to the Elements pane in DevTools, press shift + ? to access preferences > click the Enable cmd + 1-9 shortcut to switch panels checkbox.

   2. I use these shortcuts to switch between inspect mode (the Elements panel) and authoring CSS (the Sources panel).

Automating With Keyboard Maestro

There are a few different automation tools around. TextExpander is probably the most famous. I really like Keyboard Maestro (macOS only, unfortunately – apparently the closest thing on Windows is AutoHotkey). Keyboard Maestro is similar to TextExpander, but its feature set is much much larger, and it pretty much lets you automate whatever you can dream up.

Keyboard Maestro is incredibly handy when it comes to speeding up the authoring experience in DevTools, and you can get a free trial from their website if you're not sure. I have macros that deal with different aspects of authoring:

1. Text expansions that speed up typing property/value pairs, for example, I might type ptt to have Keyboard Maestro type out padding-block-start: var(--spacing-somevalue), and place my cursor in the correct position so that DevTools presents me with a list of possible variables.

2. Utilities such as deleting a line, moving lines up/down, commenting shortcuts, or maybe typing out a media query.

I've attached a sample of my macros below which may help you understand how to speed things up, before tailoring them to your needs.

If you'd like to understand a particular macro included in the attachment, hit me up on Twitter. Also, let me know if you have issues with any macros.

I'm writing this post mostly because I think there is a perceptual misunderstanding when it comes to designing in the browser—typically that it's slow and awkward.

How to “Live Design” In the Browser

These instructions are for Chrome, but the process should be very similar for any other Chromium-based browser like Microsoft Edge.

1. Open up DevTools on a local version of your site. A quick way to do this is by right-clicking anywhere on the page and selecting 'inspect'.

2. Press the keyboard shortcut shift + ? to open up the DevTools preferences.

3. Select Workspace from the left column, then select Add folder, then choose your site. At this point, I tend to dig a bit deeper and specifically select the folder where my CSS is housed since I don't want any other file results flagging up in DevTools. DevTools will ask your permission to map the folder at the top of the window; select Allow

That's kind of it! At this point when you look at the styles tab in the Elements pane, you'll see a load of green dots associated with the CSS files—this means that the file is successfully mapped.

Any changes you make in DevTools from now on will be automatically saved to disk.

NB you can also use a feature called local overrides to save HTML changes.

Advantages of This Workflow

• Preview as you type—No need to hit cmd + s to actually see live changes—DevTools updates the preview realtime.

• Inspect and edit in one sweep—Inspect, then click directly through to the line in the source. This is much easier and faster than remembering the line number, then looking it up in a text editor.

Feature Parity with Text Editors

Every developer loves their certain text editor for certain keyboard shortcuts or helpers. For CSS, however, DevTools should be a pretty comparable experience. Here are some of my favourite things.

• Context-sensitive autocomplete—DevTools will show you values that are context-sensitive, e.g. if you type dispay: it'll suggest display values.

• General autocomplete—You'll also be shown autocomplete when typing pretty much anything that is also in the same file like variables or properties.

• Keyboard shortcuts—there are some excellent shortcuts available. When in the Elements tab hit shift + ? then select shortcuts on the left to view them all. Some of my favourites are:

  • alt + up/down to increment and decrement value – You can also use the shift modifier to increase/decrease by 10.

  • cmd + p to go to another file in your mapped folder. Comparable to VS Code and Sublime Text's Go To File command.

  • cmd + shift + p to open a command. Here you can search for lots of things such as emulating print-media or a dark mode preference.

• Source Diff—If you're reading this at some time in the future this may be somewhere else, but for now, you can find this by going to the elements pane, pressing shift + ? to get to the preferences, then select Experiments and tick Source Diff

Advantages of Designing In the Browser Vs Using A More Visual tool

• Render differences—Remember that text (and even colour) renders differently in the browser vs what you may see in a graphics application.

• Version control—If you use Git designing in "code" is incredibly useful since you get a version control system built into your design.

• Design System—CSS custom properties—or CSS variables as they're commonly referred to—ensure your design system is consistent. For example, I predefine spacing values and use them consistently throughout a website. I know you could argue that something like Adobe XD could give you this, but remember—so does CSS!

There are a few ways to use Statamic—workflow and licence-wise. This video may be useful if you're checking out Statamic with a solo licence and need to pull down some changes from your production environment, or you may just want to make sure your server can push to your repo via SSH if you're setting up Statamic Pro Git integration.

Make Sure You Have Your Repository Linked to Ploi Via SSH

One “Gotcha” with Ploi is if you link to a repository using the built-in “wizard” it will link to your repository using the OAuth protocol. Oath defaults to HTTPS, which means we won't be using SSH to push changes. This causes issues when trying to push back to the repository.

To solve this, when you link a site to a repository in Ploi, instead of selecting your provider, choose “Custom”. At this point, you need to ensure that you add your Ploi sever's SSH key to your account with your provider. Ploi will show you the SSH key to add when you select “Custom”. Copy the key, and (in Bitbucket, for example) go to your Personal Settings > SSH Keys > Add Key – paste in the copied SSH key and call it something like “Ploi - Name of your server”.

Go back into your repository in Bitbucket and click the “Clone” button in the top right. This will reveal the address of your Bitbucket repository. It will look something like this:

git@bitbucket.org:jaygeorge/jaygeorge.co.uk-statamic.git

Paste this into the Repository field in Ploi, select “Install composer dependencies” as usual and then click “Install Repository”. A huge thank you to Stephen Meehan for helping me out with this gotcha.

Check The Git Status On Your Server and Commit Changes to Git

1. SSH into your machine, using a command like ssh ploi@yourserveripaddresshere

2. Make sure you're in the correct directory—with Ploi that'll probably be a command like: cd yourdomainname.com

3. git remote -v this should now show you two SSH-style addresses—one for fetch and one for pull.

4. git status to see if there are any changes to the production site that you can push up to Git.

5. Go ahead and add your changes to production e.g.

   1. git add .

   2. git commit -m "Content changes"

   3. git push

You should now be able to pull your changes down to your site locally using the git pull command.

Adding Your Computer’s SSH Key to Ploi

You'll first need to add your computer's SSH key to Ploi. You'll also need to do this if you connect via SFTP using software that uses your computer's SSH key (Forklift is an example of this).

1. Copy your computer's SSH key. You can do this by running cat ~/.ssh/id_rsa.pub if you have a key with RSA encryption, or cat ~/.ssh/id_ed25519.pub if you have a key with ED encryption

2. Open Terminal and SSH into your server by running ssh ploi@youripaddresshere, which will look something like ssh ploi@178.128.35.22. You should now be logged into your server.

Making Your SSH Key Persistent

If you're running macOS 10.12 or later (you probably are) then you'll need to do a few things to make your SSH key persistent. Create a config file in your SSH directory (the same directory where your public key is, e.g., .ssh/) and in the config file add the text:

Host *
 AddKeysToAgent yes
 UseKeychain yes
 IdentityFile ~/.ssh/id_ed25519

If you're running with the older RSA encryption then it will look like this:

Host *
 AddKeysToAgent yes
 UseKeychain yes
 IdentityFile ~/.ssh/id_rsa

Finally, run the following in Terminal:

ssh-add -K ~/.ssh/id_ed25519

Or if you're running with the older RSA encryption:

ssh-add -K ~/.ssh/id_rsa

SFTP Details

This is a sample of what your SFTP details will look like:

Protocol: SFTP
Server: 46.101.80.111 (replace this with your server's ip address)
Username: ploi
Password: this will be the 'sudo' password you were sent when Ploi installed your server
Port: 22

Once you've cloned the site into your Sites folder, it's handy to ensure that your project folder has the same name as the domain so valet can run it easily, e.g. for my site—https://jaygeorge.wip—my project folder is called jaygeorge

If you're running valet park on your Sites you should be able to boot up http://yoursitename.wip (or maybe http://yoursitename.test if you haven't changed the default TLD). You can go a step further and run your domain on HTTPS by typing valet secure yoursitename

Installing the Site with Composer

Composer needs to do its thing and install the site. Run the following commands:

1. composer update

2. composer install

At this point, you need to ensure you have an environment file since these are not committed to git by default, since every machine will have a slightly different environment. I find the easiest way to add an environment file is like this:

1. Make sure you have hidden files revealed on macOS. You can do this by using the keyboard shortcut cmd + shift + . in Finder to toggle hidden files.

2. Duplicate .env.example using cmd + d

3. Rename the newly duplicated file as just .env

Now you can run the following commands:

php artisan key:generate
php artisan optimize
php please cache:clear
php please stache:refresh

Authorising Your Computer with SSH in Bitbucket

FYI if you've decided to store your files in a Github repository instead, this process will be very similar.

1. Go ahead and set up a Bitbucket account if you don't already have one.

2. When you log in to Bitbucket, you should be in the “Repositories” dashboard. From here look in the left-hand corner where you should see your avatar. Click this and then “Personal Settings” then “SSH Keys”.

3. We now need to generate an SSH key on our machine. Open the Terminal application and paste in ssh-keygen -t ed25519 -C "your_email@example.com", substituting the email address for whatever your Bitbucket email address is.

4. Once a key pair has been generated, you'll be prompted to enter a file to save the key. Press enter to accept the default location.

5. You'll now be prompted to generate a passphrase. This is basically a password. Please make a note of whatever you type in because you'll need it later. Terminal should now inform you that a fingerprint has been generated.

6. Back in Bitbucket press the add key button

7. Give the key a label; for example, the name of the machine you've used to generate the key. In my case, I called it MacBook 2018

8. At the time of writing Bitbucket prompts you to copy the key from your machine using a command that references an older encryption method (RSA). Since we've generated a key using a newer encryption standard, an RSA copy command won't work. To be sure you get the key, you can copy it directly from the file. Go to your home directory and make sure hidden files are showing in Finder—you can toggle these on/off using the keyboard shortcut cmd + shift + .

9. You should see a .ssh directory. Inside the folder look for id_ed25519.pub. Open this in a text editor and copy the contents of this file. Paste this into the key field in Bitbucket, then press Add key.

Create a New Repository in BitBucket

In the repository dashboard in Bitbucket create a new repository. You can call the Repository whatever you like, but usually, you'll call it the name of your site. I find it useful to specify the site's technology, for example for my own site I've called it “jaygeorge-statamic”. This means if I ever switch to a different CMS in future (which I have done in the past!) I can store that as a separate repository, e.g. “jaygeorge-perch”.

I find it easier to select “no” when it asks me if I'd like to create other files—I prefer to create the repo locally and manually add these things. This is just personal preference though—you may find it easier to let Bitbucket do this for you.

Creating a Project in Git

It's now possible to clone down the repository using the Sourcetree app. This may be the simplest way to do things, but here I'll cover creating the repository locally from scratch and linking it to Bitbucket.

1. If you don't already have a project in your Sites folder go ahead and make one, e.g. create a subfolder in Sites called test

2. We now need to make sure we're in that project folder in Terminal. In Finder press cmd + c on the project folder to “copy” it. Back in Terminal type cd (with a space afterwards) and then press cmd + v to paste the directory path we've just copied. Hit enter

3. The Terminal window's top bar should now show the name of the project folder we're in.

4. Now we're going to create a Git project. To do this run git init and hit enter. Now run git add . – this command will add all your files to the repository. Now run git commit -m "Initial commit" – this command “commits” the files you've just added. The -m stands for “message”.

Adding Bitbucket as a Remote Repository

We've got our repository set up locally, and now we want to synchronise it with a host (in our case Bitbucket). Eventually, we will set up our production server to “pull” our code from Bitbucket—but that's for another day!

1. Once you've created a repository back on the Bitbucket site, it should give you a few different sample commands. We can skip a few of these since we've already created a git repository, added files, and committed. We need to add the Bitbucket repository we've created as a “remote” now. You should see the command we need to run on the Bitbucket site, in my example it was git remote add origin git@bitbucket.org:jaygeorge/test.git.

2. push up your commits to the master branch with git push -u origin master. If Terminal tells you the authenticity of the host can't be established say yes to continue. At this point, you'll be prompted to enter your passphrase that we made up earlier. Do so and hit enter (it'll be invisible so don't worry if you don't see anything while you're typing)

Once you've “pushed up” the code, at this point if you go back to Bitbucket and refresh the page you should see your commit along with its message. PS If you try to push to the repository again and get a permission denied public key message, try restarting your computer and trying again.

1. You typically need to run a set of commands after each deploy. These commands may do things like clear the cache, and recompile assets like Tailwind / minified CSS and JS using Webpack.

2. Laravel needs to be run on a folder named public rather than the wide-standard for hosts, public_html. This can be a change to resolve, especially on shared hosting where it's typically not even possible to rename the public_html folder.

Using a host that supports Laravel environments makes things a lot easier and I strongly recommend you go this route unless you love tinkering with servers and making your life more difficult.

Choosing a Host

N.B. If you decide to sign up to Ploi I would very much appreciate it if you used my referral code https://ploi.io/register?referrer=JjynFt5S8WmoZbiAZO3E

The two most popular “server management” solutions (note: not quite the same as a host—we’ll get to that later)—are:

• Laravel Forge – built by Taylor Otwell. Taylor is the creator of the Laravel Framework and so this is a solid choice.

• Ploi – Similar to Forge but more encompassing, with extra bells and whistles which make it easier to connect to repositories, and with a much nicer UI, in my opinion. Ploi also has PHPMyAdmin built-in, so if you have existing sites on other CMS's like WordPress or Perch (which I did), you can migrate them and keep everything in one place.

Whether you choose Forge or Laravel, both of these services have the same purpose – to administrate a host/server more easily. In terms of hosts, the most popular options for Statamic are Digital Ocean and Linode. Digital Ocean seems to be the favourite, and so my final recommendation would be a Statamic setup of using Ploi to manage a Digital Ocean server.

Publishing a Statamic Site using Ploi

Let's start from scratch with a free Ploi trial—we'll go from signing up to a trial to getting a Statamic site live. p.s. if you decide you like Ploi and want to help a man out, please use my referral code: https://ploi.io/register?referrer=JjynFt5S8WmoZbiAZO3E

1. Sign up to a free trial on ploi.io

2. Add a Git Provider – In the Dashboard click the “Link Git Provider” button, where you'll be prompted to link to your GitHub, BitBucket, or GitLab accounts. If you're a little unsure on Git, my Working With Git video may help you.

3. Link to a Server Provider – Select your Server Provider. In my case, I'm using Digital Ocean.

   1. In Digital Ocean go to “API” in the bottom of the left column.

   2. Select “Generate a new Token”, call it something like “Ploi”.

   3. Copy the token using the little “copy” link.

   4. Go back to Ploi and paste the token in the “API Key” field. Label it something like “Digital Ocean” and click “Add Provider”.

4. Create a Server – In the Dashboard click the “Create Server” button. Select your server provider and then in the “Details” section use the Credentials dropdown to select the account you just created. Fill the in the details here. If you're just starting out the lowest server plan should be fine. You'll want to make sure you select a Server Region that's closest to your main customer base. When you're done click the “Create Server” button. Ploi will now use Digital Ocean's API to create a server for you on their platform. This might take a bit of time – go and get a cuppa tea—you deserve it! it took 20 minutes for the progress bar to reach 100% for me.

At this point you'll be e-mailed server details. Save these somewhere safe (you'll need them!). I would personally then delete the e-mail for security reasons.

Recommended Ploi Settings

• Click your avatar in the top right > Profile – set up TwoFactor Authentication here.

• Settings > Theme mode – change this to Dark mode if you're a fan.

• I'd recommend you use ImageMagick to process images rather than GD, which produces better quality image processing. For more information on that see my post about getting ImageMagick working locally. To enable ImageMagick in Ploi, go to Servers > PHP > Manage Extensions and check Imagick

Creating a Site

1. In the Ploi dashboard > left hand menu > Servers > select your server – add a domain you'd like to link here e.g. yourdomain.com and click Add Site.

2. Once the site has been created, click it, and select “Git Install Repository”, choose your provider and select your repository. Make sure you select “Install composer dependencies”, and then click Install Repository.

3. At this point you'll be prompted to add some recommended script commands, ignore this – I'll give you some recommendations instead. Click “Ignore suggestions”

Once you can see the Deploy script, add these lines below where it says “echo "🚀 Application deployed!"”

npm install
npm run production

php artisan optimize
php please cache:clear
php please stache:refresh

php artisan route:cache
php artisan view:clear

The full deploy script should now look something like this (bear in mind your site directory will be different and your php version might be different).

cd /home/ploi/yourdomain.com
git pull origin master
composer install --no-interaction --prefer-dist --optimize-autoloader
echo "" | sudo -S service php7.4-fpm reload

echo "🚀 Application deployed!"

npm install
npm run production

php artisan optimize
php please cache:clear
php please stache:refresh

php artisan route:cache
php artisan view:clear

When you've finished editing the deploy script click “Save”

Click the “Edit Environment” button in the top right:

• Change the APP_URL to https://yourdomain.com (rather than plain ol’ http).

• Change the APP_ENV to production

Then in the top right click “Deploy Now”. Once you've successfully deployed your repository you can remove the npm install line.

Pointing your DNS to Ploi

In your domain registrar's DNS records, you should have the following three lines:

1. An A record for * with a value of your server’s IP address (which you can find in the top left of Ploi once you're in a server or its sites)

2. An A record for @ with a value of your server’s IP address

3. A cname record for www with a value of yourdomain.com

Setting up an SSL Certificate for your Domain with Ploi

Once you've gone into your site in Ploi > left hand menu > SSL – accept the defaults here and click “Add certificate”. At this point Ploi will check with the DNS to connect. if you've correctly pointed your DNS to ploi this should work.

Automatically Deploying

When you push to your installed branch, Ploi will run the deploy script for you.

A final thing to consider is whether you'd like to automatically deploy your site when you push up to Git. You may want to be careful with this if you're handling a big client but otherwise, this is a big productivity boost. Once you've gone into your site in Ploi > left hand menu > Repository – scroll down to the Quick deploy heading and click “Enable Quick Deploy”. Another possible workflow is if you set up a staging site on Ploi and automatically deploy to that.

Quick Deploy Not Showing

I've run into a problem previously where "Quick Deploy" wasn't visible in the "Repository" section. I believe this happens when you initially add the repository using the "Custom" option rather than the built-in BitBucket/GitHub integration.

It's still possible to enable quick deploy though. To get around this, in Ploi > left hand menu > Repository – scroll down to the Repository section, and change "Custom" to "BitBucket" or "GitHub". Make sure the repository name is in the format "username/repo_name", for example "jaygeorge/london-local". The repository URL field should already automatically be in the correct format from when it was previously saved as "Custom", e.g. "git@bitbucket.org/jaygeorge/london-local.git"

Once you've turned Quick Deploy on, if you like you can switch back to "Custom" and Ploi should continue to quick-deploy.

In this post, part 3, we'll cover installing Statamic and setting up a site. The best way to do this is to install a couple of starter kits. I recommend you first install a plain ol’ Statamic installation so you can start building things from scratch and then secondly install a starter “kit”, which is a pre-made website which we can copy and learn from.

To start, go to the Installation page in the docs: https://statamic.dev/installation. There are two different ways to install Statamic using Composer. The recommended way is to install the Statamic CLI (Command Line Interface)—this adds a “helper” layer on top of Composer, so it's the preferred way to go. Run the command:

composer global require statamic/cli

After this dependency is installed, try running:

statamic new somesitename

If You Get the Error: command not found: statamic

This is an issue with your $PATH not having the global .composer/vendor/bin directory in it (source). Try the following:

1. Run sudo nano /etc/paths

2. Use your down arrow key to go to the bottom of the list and add a new line called /Users/your-username-here/.composer/vendor/bin

3. Exit nano by pressing ctrl + x and say yes to save

4. Close the Terminal window and open a new one

5. Try the command again: statamic new somesitename

Use the Wizard to Install A Starter Site and Starter Kit

Once you've got the interactive wizard going, first make sure you're in your Sites directory in Terminal, then run statamic new starter. When the wizard asks you “Which Starter kit would you like to install from?” type 0 to select the first option and install a Statamic starter site.

When the script runs don't worry about any “package abandoned” yellow warnings—this is more of a soft concern for the Statamic developer team to address in future Statamic releases.

Rerun the wizard; `statamic new kit`. When the wizard asks you “Which Starter kit would you like to install from?” choose a kit, e.g. type 3.

Make Sure You Have Your Domains Set Up

At this point, if you're using valet park to “park” your Sites directory, you should be able to go to the relevant domain e.g. http://starter.wip or the default TLD of http://starter.test

I'd still recommend you secure the site by typing the command valet secure yoursitename. It takes 2 seconds and a) gets rid of the ugly red padlock, and b) bear in mind your live site will be HTTPS, so it gets us one step closer to your production environment with minimum effort.

Once you've secured your domains you should be able to go to:

• https://starter.wip

• https://nameofyourkit.wip

Create A User to Gain Access to the Control Panel

You'll first need to create a user to access the control panel. You can do this by:

• First, make sure you are in your starter site directory, e.g. run the command cd /Users/yourhomedirectoryhere/Sites/starter

• Run php please make:user (documentation)

• Go through the wizard questions

Now you should be able to go to the control panel e.g. https://starter.wip/cp. You can now repeat the process for your second site…

• First, make sure you are in your starter kit site directory, e.g. run the command cd /Users/yourhomedirectoryhere/Sites/nameofyourkit

• Run php please make:user

• Go through the wizard questions

You can read more about Valet on its documentation site, but the main thing we want to use is the park command. To start using Valet make sure you're in your Sites directory in Terminal, and then run valet park. Once you've done this once, any directory you add to your Sites folder (including a Statamic directory) will automatically be mapped as http://directoryname.test

Valet Preferences

There are a couple of preferences I recommend you add. Firstly if you don't like the .test tld that Valet defaults to, you can change this by running something like valet tld wip – which would change the TLD to .wip e.g. http://nameofyoursite.wip. I recommend .wip because macOS can run into issues if you use .local and secondly, wip is one of Statamic's recognised “developer” domains.

Secondly, if you'd like to run your local site over HTTPS you can run valet secure nameofyourdomain. Bear in mind, unlike the park command, you'll need to secure every directory you create. Thankfully though Valet will remember secured sites whenever it starts up.

Running Valet

Valet will start up whenever you log into macOS, so you don't need to worry about manually typing valet start every time. It is worth bearing in mind that you'll want to stop valet if you'd like to access a site running on MAMP. I wrote an article on using MAMP and Valet on the same system here.

There are a growing number of official videos detailing how to get started, which you can find here. I made these videos to document a few gotchas, and since I had recently clean-installed macOS Big Sur, there are fewer variables, and I should run into similar problems that you do.

Do You Need to Do It This Way?

I'll be using a specific setup with Statamic, but you can indeed use something more basic. If you're used to running your local environment through MAMP, you can get Statamic running through that too.

BUT—I've nagged the Statamic community for the last 6 months, and the set-up I'll show you is either the easiest way to run Statamic or the most recommended. So if you'd like to make your life easier in the long-run, then follow me.

Using Laravel’s Valet as a Minimalist Developer Environment

Valet is in some ways comparable to MAMP—which is one of the most popular GUIs (Graphical User Interface) for running a development environment locally on macOS.

What we are getting with Valet is NGINX (a webserver), and PHP (a programming language). These two things are needed to run Statamic, but they're also handy for HTML prototyping, which means Valet is still really handy to keep around.

What If You Already Have MAMP Installed?

MAMP and Valet can conflict if they're running at the same time. I believe this is due to them both trying to write domains to host files simultaneously. I've written some basic instructions here on how to deal with this. Basically, you need to make sure they're not running at the same time.

Installing Valet Step 1 – Installing Homebrew

Homebrew is a package manager for macOS. Let's install it.

1. Go to https://brew.sh/

2. Click the little clipboard button next to the command to copy it to your clipboard.

3. Open the Terminal application. Paste in the command you've just copied.

4. Press “return” when prompted to go ahead and install Homebrew

Homebrew will take a bit of time to install if you haven't already got Xcode installed (Xcode is a macOS application made by Apple that's used by software developers).

Installing Valet Step 2 – Installing Composer

Composer is similar to a package manager but more specifically it's used to manage ‘dependencies’. We'll need it to install Valet, and conveniently we'll also need it to install Statamic.

1. Download Composer here – https://getcomposer.org/download

2. Similar to Homebrew, copy the command and paste it into Terminal, then hit enter.

3. You may need to log out and back in again at this point.

To use Composer globally you need to move it. Run this command:

sudo mv composer.phar /usr/local/bin/composer

Installing Valet Step 3 – Installing Valet with Composer

Now that Composer is installed we can use it to install Valet. Run this command to add Valet as a dependency:

composer global require laravel/valet

Once it's added as a dependency we can install it with this command:

valet install

At this point, if you get a “command not found” error, run this command:

test -d ~/.composer && bash ~/.composer/vendor/bin/valet install || bash ~/.config/composer/vendor/bin/valet install

Once this command has finished running you should see a “Valet installed successfully!” message.

Testing That Valet is Working OK

• Make sure you have a “Sites” folder in your home directory.

• Create a subfolder within “Sites” and call it whatever your domain will be. For example, if I want to run “jaygeorge.co.uk” then I would name my subfolder “jaygeorge”

• Add a new file in the subfolder and call it “index.php”

In index.php try to ‘echo’ out some text by adding the following command:

<?php echo 'hello world'; ?>

• Go back to Finder and use “cmd + c” while highlighting the subfolder (in my case jaygeorge).

• Type “cd ” in Terminal then use “cmd + v” in Terminal to paste in your path. This will make sure that Terminal is in the right directory

Now use the command:

valet link

This will effectively create a domain name for that folder. You can now type:

valet links

This will show you the new link you created.

Copy the link that Valet has just created e.g. “http://jaygeorge.co.uk” and test it out. You should see “hello world” in your browser, which confirms that Valet has created the domain, and PHP is running.

Getting Valet Running Over SSL

In Terminal run the command:

valet secure yourdomainnamehere

For example, “valet secure jaygeorge”. Valet should restart its webserver and issue a domain certificate.

If you refresh your domain you should be redirected to https://yourdomainname

Changing Valet’s TLD

By default Valet will run everything domain as domainname.test. If you're fine with that then feel free to skip this step. I personally like ‘.wip’ – it makes the site feel less like a laboratory and more like a project.

At this point, it's useful to bear in mind that “.local” my have some issues since it's traditionally reserved for Apple's Bonjour protocol. It's also useful to think about how Statamic decides whether you are running your site locally or not.

Changing Valet's TLD to wip is as simple as running:

valet domain wip