If you’re a front-end developer like me, I’m sure you’ve ended up in this situation before. You’ve either built a simple static site, or you’ve downloaded a nice static template, and then you’ve thought “Oh if only I could put a contact form on this” or “I just want add a payment button”. These are the kinds of questions that turn a small project into a much larger beast.
But it doesn’t have to be this way. There are lots of tools and features you can add to a static site without having to introduce PHP, Ruby, or any other form of backend development. In this article I’ve listed some resources that’ll make your site a little less static.
Yes, I realise this isn’t really a front-end resource or tool, but if you want anyone to see your site you’re going to need to put it on the web.
For static site hosting one of my two favourites is certainly GitHub Pages. GitHub Pages is designed to let people create websites to coincide with their web projects on GitHub.com. It does a great job doing this as well, so much so that people use it to host their main portfolio or personal websites on it. Take a look at the following tutorials to learn more:
- Getting to Know GitHub Pages: Static Project Pages, Fast
- Creating GitHub Pages (part of “Introduction to Git and GitHub” by Dan Wellman)
Note: If you’ve downloaded a template from Envato Market or are wanting to host sensitive material on GitHub Pages, you’re going to need to pay for a private repo. In these situations it’s important that people can’t freely download the code directly from GitHub.com
Surge plus, which offers more robust features than the free pricing plan, such as password protection and HTTPS, will (at the time of writing) set you back $13 per month.
Forms and Feedback
Formspree allows you to turn a static HTML form into a fully functioning contact form. If you want to try it out yourself I wrote an article on how to add Formspree forms to a static site.
If I needed to add a commenting system to any site I’d go straight to Disqus; it looks great and works perfectly (handling spam extremely well). Beyond that, it adds social and gamification dynamics to comments, recommending discussions, collating trends from across the web, and letting users earn points through community voting.
It even offers monetization by letting publishers tap into Disqus’ own ad platform.
On the other hand, whilst Google Forms is arguably a lesser known tool, it’s pretty good at managing feedback and collating poll data. I’d also recommend checking out the new Google Forms as they’ve updated the UI and forms to follow the new Material Design system.
Domain & Server Management
Ever since I discovered CloudFlare I’ve been using it to set up all my domains. Setting up your domain with CloudFlare unlocks loads of features that you can enable from the admin interface. Flexible SSL, site search, HTML compression and more. If you’re going to include 3rd party widgets and plugins to your static website, CloudFlare’s optimisation tools will ensure that your site performs as well as it can. Here’s a full list of the apps available.
Taking payments on a static website? Are you mad!? Well actually no, as long as you have the right SSL certificate and have everything set up in a secure manner you can take payments on a static site just as easily as any other kind.
Envato Market has hundreds of retail-themed static templates, ideal for selling things online, without being tied to a dynamic platform.
If you’re wanting to take singular payments for a product I’d highly recommend using Stripe Checkout. The design of the dialog window is top notch, making for a clean user experience, rather than directing the user to an entirely different website.
Also, because it’s tied to your Stripe account you can use their official app to track payments.
Looking for something a little more powerful? Something that can allow for multiple products, a basket and a full checkout process? No problem, Gumroad has your back with their Inline Purchases Widget.
Adding this to each product on your static site will allow the user to add multiple products to their basket and pay for them via the Gumroad payment system, which you can manage from your Gumroad account. Learn more:
There are a couple of other tools out there that you might benefit from if you’re creating a website using static pages.
If you want to add a map to your site I’d recommend Mapkit.io, which gives a relatively simple interface to create your own map embed using the Google Maps API.
Another feature you might want to add is a blog. Without using a generator like Jekyll, you can’t easily implement a blog into a static site but you could use a service that is specifically designed for blogging. Medium has become extremely popular for individuals, and companies, to blog with, and there’s actually a way to embed Medium articles on a static page.
The presentation of the embed is elegant and clean, so it shouldn’t clash with your site design.
As you can see, a static site doesn’t actually have to be static. There are plenty of powerful tools out there to bring your static templates to life, most of which are completely free to set up. All of the tools mentioned above have been built and designed with care and attention, and if you get the chance to use one of them I’d highly recommend trying them out.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post