How to build a new static website in 2h with Middleman

Entirely from scratch, almost for free, and fully under your control.

Static websites have the advantage over using a framework like Rails (or Django in Python) that you they only consist of static pages with HTML, CSS, and JavaScript. There is no backend server or database. So instead of paying $20-30 for hosting on a platform like Heroku or AWS Elastic Beanstalk, you can host these pages very cheaply on a service like AWS S3. Since there are no requests to the backend server, pages are also loading much faster. Together with a Content Delivery Network (CDN) which serves the site from a location physically close to the visitor, speed is much improved.

However, the awesomeness comes with downsides: Since there are no server and no database, you cannot easily store data, have a login area or execute requests. Serverless frameworks which have sprung up recently are mitigating these drawbacks, and I plan to use them for a simple contact form and signup form.

The stack I use is namecheap for domains, middleman for building the page, AWS S3 for cheap hosting, and Cloudflare as CDN (Content Delivery Network). There are literally thousands of other setups that would work equally well but as an "old" rubyist I'm most comfortable with this.

I am grateful for all of the hundreds of developers who created Open Source Software and shared their knowledge before. Almost everything on this page I found somewhere else and slightly adapted it to my needs. The main benefit should not be the original code, but collecting it all in one place in a structured manner. Lastly, I will most likely be its heaviest user, looking the steps up for each new website.

Create a new static website with middleman from scratch

Create a new static website with middleman

Set up self-hosted git via Dropbox sync

This one may be controversial, but since I am working alone on my projects, I like keep version control local.

Set-up-self-hosted-git-via-Dropbox-sync

Set up bootstrap and add basic theme

Coming soon :)

Get domain and set up Cloudflare DNS

Get-domain-and-set-up-Cloudflare-DNS

Deploy middleman static website to AWS S3 bucket, set up IAM user and sync with AWS cli

IMPORTANT: never save any secret, password or API key as everything synched to AWS S3 is public

Deploy-middleman-static-website-to-AWS-S3-set-up-IAM-sync-AWS-cli

Enforce https/ssl and redirect www to root domain with Cloudflare

Enforce-https-ssl-and-redirect-www-to-root-domain-with-Cloudflare

Send and receive emails for your new domain for free with Gmail and mailgun

Send and receive emails for your new domain for free with Gmail and mailgun

Add Google Analytics

Add-Google-Analytics-to-Middleman-static-website

Improve on-page Search Engine optimization (SEO)

Improve on-page Search Engine optimization (SEO)

Add "contact us" form to Middleman Static Website with AWS lambda / serverless

Add "contact us" form to Middleman Static Website with AWS lambda / serverless

Add signup form with AWS lambda / serverless

Coming soon :)

Enable visitor comments on your Middleman static website with disqus

Enable visitor comments on your Middleman static website with Disqus

Add adsense for basic monetization

Coming soon :)

Add blog for project updates

Coming soon :)

Add static data for slightly dynamic pages

Coming soon :)

Display RSS feed on static website

Coming soon :)

Batch resize and optimize images automatically with ruby script and tinypng/tinify API

Batch resize and optimize images automatically with ruby script and tinypng/tinify API

Create logo and favicon

Coming soon :)

Add simple tests to check links are working

Syntax highlighting for code snippets on a middleman static website

Syntax highlighting for code snippets on a middleman static website

comments powered by Disqus