Blog Post

This Sites Technology

by: Simon Hughes
date: Thursday, Sep 13, 2018
category: my-technology hugo zapier

Today I thought it was worth writing a quick blog post to detail the technology I used to build this site, and why. Within the industry if you want a small site that's easy to update the default answer is WordPress. I do like to be different, and challenge the obvious to ensure the best results for my clients, so I pushed myself to find a better solution.

Some Code

There are a number of issues with WordPress that mean its not perfect. In order to get a good site up and running requires a large number of plug-ins to be setup and configured, and the regular maintenance of patching security holes leaves something to be desired. And then there is the hosting, every WordPress site I have hosted suffers from performance issues at one time or another, and I can never seem to figure out why. I wanted this site to be a showcase, and slow was not going to cut it.

As my site is largely static it seemed sensible to start with the solution of raw HTML and to work from there. I want a nice easy process of adding in new content, and I dont want the site navigation defined in every page, thats a really bad solution. So what it is the right solution? I decided on using a static site generator which uses a combination of tempates to drive the look and feel, and content management through simple markup files.

Enter Hugo to the rescue.

Hugo Logo

Hugo is a neat solution complete with a huge number of templates already created, even a technical guru with no artistic skills can create a polished professional site like this one. Within a day I had the majority of the site up and running hosted on Fasthosts as static html. The site runs at an amazing speed with everything cached.

The first challenge was finding some really nice graphics to use within my blog posts and services pages. Having previously used shutterstock I decided to search for alternatives that dont require payment. After much searching I settled on Unsplash as it has thousands of royalty free images, attribution is not required, and there is zero cost. Thats a solution I can get onboard with.

So the final challenge was sorting out a nice contact me form. Since the site is running as pure HTML that rules out most of the obvious form based solutions. I created a single.html file under the layouts/contactform directory and added the following form

{{ partial "header.html" . }}

<section id="contact"> 
    <div class="container"> 
        <div class="row"> 
            <div class="col-lg-12 text-center"> 
                <h3 class="section-subheading">{{ with .Site.Params.contact.subtitle }}{{ . | markdownify }}{{ end }}</h3> 
                <br> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="col-lg-12 text-center">
                Please complete the form below and I will get back to you as soon as possible.
            </div>
        </div>
        <div class="col-md-6 col-md-offset-3 text-left"> 
            <form action="https://hooks.zapier.com/hooks/myhookid" method="POST" name="sentMessage" id="contactForm"> 
                <div class="form-group"> 
                    <input type="hidden" name="_subject" value="Form sent from page: {{ .RelPermalink }}"> </div> 
                    <div class="form-group"> 
                        <input type="text" class="form-control" placeholder="{{ with .Site.Params.contact.form.name.text }}{{ . | markdownify }}{{ end }}" name="name" required data-validation-required-message="{{ with .Site.Params.contact.form.name.warning }}{{ . | markdownify}}{{ end }}"> 
                        <p class="help-block text-danger"></p> 
                    </div> 
                    <div class="form-group"> 
                        <input type="email" class="form-control" placeholder="{{ with .Site.Params.contact.form.email.text }}{{ . | markdownify }}{{ end }}" name="email" required data-validation-required-message="{{ with .Site.Params.contact.form.email.warning }}{{ . | markdownify }}{{ end }}"> 
                        <p class="help-block text-danger"></p> 
                    </div> 
                    <div class="form-group"> 
                        <input type="tel" class="form-control" placeholder="{{ with .Site.Params.contact.form.phone.text }}{{ . | markdownify }}{{ end }}" name="phone"> 
                        <p class="help-block text-danger"></p> 
                    </div> 
                    <div class="form-group"> 
                        <textarea class="form-control" placeholder="{{ with .Site.Params.contact.form.message.text }}{{ . | markdownify }}{{ end }}" name="message" required data-validation-required-message="{{ with .Site.Params.contact.form.message.warning }}{{ . | markdownify }}{{ end }}"></textarea> 
                        <p class="help-block text-danger"></p> 
                    </div> 
                    <div class="clearfix"></div> 
                    <div class="col-lg-12 text-center"> 
                        <div id="success">{{ with .Site.Params.contact.success }}{{ . | markdownify }}{{ end }}</div> 
                        <input type="submit" value="{{ with .Site.Params.contact.buttonText }}{{ . | markdownify }}{{ end }}" class="btn btn-primary btn-xl"> 
                    </div> 
                </form> 
            </div> 
        </div> 
    </div> 
</section>
<section id="spacer">
&nbsp;
</section>

{{ partial "footer.html" . }}

Created my contact.md file with the following content

+++
date =  2018-11-03T13:54:33Z
menu = "main"
title = "Contact"
weight = 3
type = "contactform"
+++

It would have been easy to revert to type and drop in some .net code, or even some php code, but I wanted a pure HTML solution with no code. After a bit of googling I came across Zapier.

Zapier Logo

Its a really cool Software as a Service solution which has a form post entrypoint and is a simple workflow solution. Quickly I had a Zap setup and configured to take the form data and post it into my slack comunications channel, which then is alerted onto my Apple Watch instantly. Awesome.

After that a simple bit of JavaScript was required to make it all async using jQuery.

$(function() { 
    $btn = $("input, submit").not("[type=search]")
    $btn.jqBootstrapValidation({ 
        preventSubmit: true, submitError: function($form, event, errors) { }, 
        submitSuccess: function($form, e) { 
            e.preventDefault(); 
            var submitButton = $('input[type=submit]', $form); 
            $.ajax({ 
                type: 'POST', url: $form.prop('action'), 
                accept: { 
                    javascript: 'application/javascript' 
                }, data: $form.serialize(), beforeSend: function() { 
                    submitButton.prop('value', 'Please Wait...'); 
                    submitButton.prop('disabled', 'disabled'); 
                } 
            }).done(function(data) { 
                submitButton.prop('value', 'Thank you, I will get back to you shortly.'); 
                submitButton.prop('disabled', false); 
            }); 
        }, filter: function() { 
            return $(this).is(":visible"); 
        },
    }); 
});

Want any more info on this, feel free to contact me, pick up the phone or drop me an email.