Static site generators are the best way to produce a simple, secure, super fast website. But the generators themselves aren’t all that simple, and it can be tedious to choose one of the many, learn it, and get started. Here’s a quick way to roll your own with nothing but the basic skills you might have learned as a webmaster in 1999. What are we trying to do here? You want to have a great choice of themes, look-and-feel, customisability… be able to have some kind of templating system, so you can change things in oneplace and they take effect across the website. easily find people who can work on it have a choice of hosting, and not be locked-in to a particular vendor not worry about security, patching PHP, servers, Russian hackers Ladies and gentlemen, I give you…. PHP. What? I know, we just said we didn’t want to run PHP. But we’re going to run it on a server. We’re going to use it to build a static website, that can then be deployed anywhere you like (HostGator, S3, Netlify, your friend’s spare server… doesn’t matter). not Here’s how. Basic setup All you need are basic, common web design tools; PHP and a webserver. Most systems already come with those, but the setups vary between OS versions, so here’s a quick, simple guide that should work on a Mac without messing with your OS config. Follow along and you’ll be up and running in minutes. If you’re on a Linux machine you’ve already got PHP and Apache set up sensibly; have a look at the docs for those and you can bypass this section and just use them. You need , the Mac open source package manager — if you have it, skip this step. Homebrew If not, pop open a Terminal and paste in /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" Now use Homebrew to install what we need: brew tap homebrew/services; brew tap homebrew/dupes brew install php72 --with-fpm --without-apache; php -v; php-fpm -v brew services start php brew install caddy mkdir -p $HOME/Sites cat > /usr/local/etc/Caddyfile << EOFlocalhost:2015root $HOME/Sites fastcgi / 127.0.0.1:9000 php {ext .htmlindex index.htmlsplit .html}log /usr/local/var/log/caddy.logerrors /usr/local/var/log/caddy_errors.logEOFbrew services restart caddy That gives us PHP, and (a quick-n-easy webserver that’ll work with minimal configuration). You’ll put your HTML files in the directory in your home dir. Caddy Sites Now we need a website. Create your site Page 1 I’m going start with a minimal, plain HTML template so you can see what I’m doing. In the real world I’d grab a Bootstrap template from or somewhere similar and spend some time tweaking the styles. Templated Open your favourite text editor, and edit the file ~/Sites/index.html Make it look like this: <html><head><title>My first site</title></head><body> <header> <h1>Welcome to Page 1</h1> </header> <p>Some paragraph text with <a href="page2.html">a link to a second page</a></p> <footer>Copyright me, 2018</footer> </body></html> Save it. Open a web browser to and you should see your lovely new web page. http://localhost:2015 Page 2 Copy to and edit it. Change the tag to be “Welcome to Page 2”, save, refresh your browser and click the link — you should see “Welcome to Page 2”. index.html page2.html h1 a link to a second page Now, evidently, if you were to make a change to, say, the , then you’d have to make it in both files to retain consistency. title Let’s fix that by adding some templating. Change so it looks like the following (add the bits at the second, and third-last lines) index.html <?php … ?> <html><?php include '_head.html' ?><body> <header><h1>Welcome to Page 1</h1></header> <p>Some paragraph text with <a href="page2.html">a link to a second page</a></p> <?php include '_footer.html' ?> </body></html> Make the same changes to . page2.html Now create a new file, in your editor, and paste in: _head.html <head><title>My first statically generated site</title></head> And put the following in _footer.html: <footer>Copyright you, 2018</footer> Refresh your browser, and let’s see what you’ve got (note the dynamically replaced footer message!): “Build” Okay, so now we have a nineteen-nineties level PHP website, but with templating, running locally in PHP behind a webserver. “That’s not a static site!”, I hear you shout. Here’s the magic. Back in the Terminal… mkdir distcd distwget -r http://localhost:2015 Have a look at the contents of the directory. dist That’s your static site! Yes — it seems incredibly simple — but it works. No compile, no build, no fancy packaging. Just the basics. Deploy Copy the files in to your host of choice. dist Like before, I’ll use , but Amazon S3 or would be just as good. Netlify <insert $3/month hosting company here> First make sure you’ve got a (free) Netlify hosting account — if you haven’t already. you can get one here https://www.netlify.com/docs/manual-deploys/ Once you’re logged in, you can make it live using drag-and-drop; simply drag the whole directory you unzipped into the Netlify “Deploy” box in your browser. Watch the video if you get stuck! Once that’s done, open the auto-generated URL they give you, to see your site live on the internet! Taking it further One other thing that can be tricky about static sites is, well, they’re static. It’s tough to build in dynamic functionality like e-commerce when all you have is HTML. That’s where comes in [shameless plug for my company]. It’s a lightweight, pop-up shopping cart that works brilliantly on static sites. If you need to sell products (including digital downloads), take deposits, donations or one-time payments, check it out. It’s free to start — commission only, so if you don’t sell anything you don’t pay anything. Trolley Have a look at for how to plug Trolley into your brand-new static site and use it to take money from customers. my previous blog post
