Setting up Statamic 2 & Wampserver 3 on Windows 10 64-bit

I’ve been on the hunt for a new CMS.

WordPress is not sufficient for what I want to achieve.

I need a blogging system; but not just any blogging system. I’m talking blog posts of up to 10,000 words with images, plenty of headings, lists and links.

WordPress could do this, but I’d need to use the ACF plugin. Don’t like it.

I ran into Processwire. Brilliant system. Instead of giving you a blogging system, Processwire allows you to create your own custom blogging system. It’s possible with WordPress, but it’s not the essence of WordPress. It’s the essence of Processwire.

The problem is, and staunch Processwire devotees will fight me on this, it’s not a writer-friendly CMS.

You want a blog up quickly? Get WordPress.

You want a website exactly the way you want it, without making the system jump through hoops? Learn HTML, CSS and PHP, install Processwire and you’ve got a monster of a system. Custom fields? That’s what makes the system. Custom content types? Baked in.

However, as much as I love the system, I couldn’t get my head around it. It’s too much. I caught some of it, but for most of it, it’s Greek.

I have great respect for Processwire. I’m envious of people who understand it. I’m not one of them though, despite having tried.

I had to decide on a course of action: learn to create a system for creating content, or create content.

I chose the latter.

So the search continued.

Had a look at Craft CMS. Great system. Similar to Processwire but more writer-friendly. You could get a website up and running in a short period of time.

Still wasn’t satisfied though. Craft CMS comes with a price tag. A free package is available, but then it’s a single person CMS. I need to add at least one more writer.

The search continued.

Came across some flat-file systems. Grav, Rocket CMS, Kirby, RazorCMS, Monstra, Anchor, Cockpit and a bunch of others. Some of them are excellent, some not.

Then I came across comments and posts about Statamic CMS.

Wow. What a system. I was sucked in. This is it.

It’s a flat file system (requires no database) with a back office, like WordPress. It’s got the custom field types (built into WordPress, but not easy to set up). It’s got collections, taxonomies, globals. Everything.

Here’s the thing though: it’s not as simple to set up as WordPress. Again, this is debatable. If you have half a developer’s brain, this stuff’ll come easy. I don’t have a single developer’s brain cell, and quite frankly, I’m fed up of developer’s talk. I want to create content.

But because the system looks so promising and the sites built on it are downright awesome, I thought I’d give it a spin on my machine.

The thing is, Statamic costs $199. You can install a free version on your local machine, but you need a license key if you want to take your site live.

Before I fork out enough cash for 11.2 KFC 21 piece buckets, I want to see what I’m starving myself for.

Should be easy to install, right? Requires no database.

Sigh…

Not so.

I ran into some trouble, so I’m sharing with you how I set Statamic 2 up on Wampserver.

For local development I’m used to loading a site into a folder inside Wampserver’s WWW folder and visiting that URL inside a browser. This usually brings up the site’s front page or an install page.

Statamic wants you to jump through some hoops. You’re gonna get your exercise, boy.

Step 1 – downloads

You’ll have to create an account to download Statamic. Do it. It’s worth your while.

Pick the Wampserver setup that’s right for you. I’m using a 64-bit system, thus I downloaded the 64-bit version of Wampserver.

Install Wampserver

Once you’ve downloaded the installer, right click on the Wampserver EXE file and choose ‘Run as administrator’. This is crucial. You must execute Wampserver as admin, else you’ll run into trouble.

Go through the whole install process. There’s a point where the system tells you that it’ll use Internet Explorer as the default browser. I chose Chrome by navigating to the ‘Program Files (x86)’ folder, then into the ‘Google’ folder, then into the ‘Chrome’ folder, then the ‘Application’ folder and then choosing chrome.exe.

You can choose another browser or leave it on IE if you wish.

It also tells you that it’ll use Notepad as the default editor. That’s fine. You can leave it as is, or choose a different coding application. I use Brackets and Atom.

After all is said and done, you should now have a wamp or wamp64 folder in your C drive. You can install it elsewhere too, but installing to C is standard.

Start Wampserver

If you allowed Wampserver to create an icon on your desktop, double click on the icon.

I’ve seen a video that claims that you need to right click on the icon and run as admin. I’ve not had to do that. I simply double click the icon and it starts Wampserver. As far as I can tell, you only need to run the Wampserver installer as admin when you install the first time.

It’ll give you some sort of message about making changes to the system. Just say yes.

Once Wampserver has started, you’ll notice a funny icon pop up in your system notification bar, bottom right.

If your install went smoothly, your icon should turn green. Let’s assume things went smoothly.

You now have a development environment running on your machine.

Where to place your website files for local development

Click on the green Wampserver icon. This gives you a bunch of links, including a link to your development directory.

In this list of links, click on ‘www directory’.

This takes you to the WWW folder, which is where you place your folders and files for development.

Traditional, old school development requires that you create a folder for your project, upload the files to that folder and navigate to the address in your browser.

For instance, if you want to create a site and call it thisismysiteandtheresnothingyoucandoaboutit.com, you create a folder inside the WWW folder called thisismysiteandtheresnothingyoucandoaboutit.com, upload your system (WordPress, for instance) into that folder and then navigate to http://localhost/thisismysiteandtheresnothingyoucandoaboutit.com.

It worked fine.

But noooooooo, this is too old school. This is so first quarter 2016. We’re in the future now. We do things futurely and keep up with the coding Joneses.

So Statamic doesn’t allow you to do it that way. You need a virtual server and a copy of George Orwell’s 1984 sitting on your coffee table.

The book is optional but recommended.

Setting up a virtual server for Statamic

Thanks to Kris Wignes for this step.

Copy Statamic to the WWW folder

You’ve downloaded the Statamic zip file. It’s sitting on your desktop. How do you get it working?

Create a folder inside the Wampserver WWW folder.

Call it whatever you wish, but append the folder with .dev.

For instance, call the folder mysite.dev.

Unzip the Statamic download.

Copy the files and folders found inside the Statamic unzipped folder into mysite.dev.

Open http://localhost/mysite.dev in your browser.

Nothing. Or an error. Or the site looks awful.

This is what Statamic looks like if not set up correctly
This is what Statamic looks like if not set up correctly.

This is expected.

Set up the virtual host

OK, click on the green Wampserver icon in your system notifications bar, bottom right of Windows.

Click on ‘Localhost’ at the top. This opens the localhost page in your browser.

Click on ‘Add a virtual host’ bottom left.

A window opens in your browser from where you can add a virtual server.

In the first box, where it says, ‘Name of the Virtual Host’, add the name of your folder. Using our example, we add to that box, mysite.dev.

In the third box, where it says, ‘Complete absolute path of the VirtualHost folder’, add the path to your folder. Using our example, this would be C:/wamp64/www/mysite.dev/. Please note that your path needs to be set according to where you’ve installed Wampserver.

Click on the ‘Start the creation of the VirtualHost (May take a while…)’ button.

This creates a virtual host for mysite.dev.

Now reset the DNS by right clicking on the green Wampserver button, then hovering over ‘Tools’, then clicking the ‘Restart DNS’ option at the top.

Navigate to http://mysite.dev/ in your browser to see whether the install worked.

This is what Statamic should look like when installed properly
This is what Statamic should look like when installed properly.

Your site is set up correctly, but you’ll notice that images aren’t showing. Clicking on a link leads to an error page too.

Create a .htaccess file

Inside the mysite.dev folder you’ll notice a file named ‘sample.htaccess’. This needs to be changed. Now, one of the Statamic guys performs some command line voodoo (Oooooohhhh, so coooooool. You know command line.) to change the sample.htaccess file in their Vimeo video showing you how to install Statamic. Note: Vimeo, not YouTube. YouTube is too ‘commercialised’ and used by the hoi polloi; the rabble; the riff raff. Yuck. Just saying ‘YouTube’ makes me cringe. Probably popular among those gruffy “Windoze” users.

It’s not necessary.

Just open a text editor like Atom or Brackets (Sublime if you’re cool and think Apple is the best thing since oranges; but this is a Windows tutorial, so you’re in the wrong place), find the file, right click on it and rename it, removing the ‘sample’ bit. The file should be named .htaccess. Do what you need to do to make it just .htaccess.

Refresh the page at http://mysite.dev.

Your site should now display correctly.

Install the Statamic control panel

Statamic comes with a gorgeous back office where you can create and control all sorts of beautiful things.

To install it, visit http://mysite.dev/installer.php.

A page appears that shows you whether your server meets all requirements. It should.

The page that appears when you install Statamic CMS
The page that appears when you install Statamic CMS.

Click on the big blue button at the bottom.

Now you’re met with a screen that asks for a License Key. If you don’t have one, click on ‘Continue in Trial Mode’.

Switch on Debug Mode.

Click on ‘Save’.

In the next screen, add your details: First name, Last name, Username, Email, Password and a Bio.

Click on ‘Save’.

The system tells you it’s taking you to the control panel.

However, this message, “Whoops, looks like something went wrong.” might greet you, and if you activated debug mode, there’s a massive error message below that starting with the text, RequestException.

Fix Statamic RequestException error

The answer to the problem can be found at this post: https://laracasts.com/discuss/channels/general-discussion/curl-error-60-ssl-certificate-problem-unable-to-get-local-issuer-certificate/replies/37017.

Download the cacert.pem file from the link in that post.

Place it somewhere you won’t forget, just in case you need it again. I placed mine inside the WWW folder in the Wampserver folder.

Click on the green Wampserver icon.

Hover over the ‘PHP’ menu item.

Right click on the php.ini link. This opens the php.ini file.

Inside this file, hold down the Ctrl button and press F. This opens the Find box.

Put this inside the search box and click search: ‘curl.cainfo =’.

Remove the semi-colon before that sliver of text. This activates this function.

After the equal sign, paste the path to the pem file. In my case, it’s ‘C:\wamp64\www\cacert.pem’.

That line should now read: ‘curl.cainfo = C:\wamp64\www\cacert.pem’.

Save and close the php.ini file.

Click on the green Wampserver button.

Click on Restart All Services.

Inside your browser, refresh the page that displayed the error message.

The Statamic dashboard should now work fine.

In conclusion

There you have it. You should be able to run Statamic through Wampserver 3 on Windows 10. It’s worth checking out this amazing CMS. It’s nimble and waxy. Definitely worth the $199 price tag.

Comment

Send this to a friend