Build and host low-cost landing pages
Almost every startup starts the same; with a landing page. However, many of the no-code solutions for landing pages are either expensive or don’t offer the level of customization one may need. We will go over how to use Middleman + AWS to create and host your landing page!
By following this tutorial you will be able to create a website such as the one below.
In order to follow this tutorial a few things will be assumed:
- You have Middleman installed as per the instructions here.
- You have a website template (HTML, CSS, JS, etc) that you want to use.
- You have an AWS S3 Bucket + AWS Cloudfront setup for website hosting the same way as the setup below:
Step 1: Set up folder and file structure
Set up the following folder structure.
│ └── deploy.sh
| ├── images/
| ├── stylesheets/
│ └── index.js
There are three files that should be created as shown below:
buildspec.yml will be used by AWS Codebuild to build the website.
config.rb file is used by Middleman to configure its behavior. This sample file configures a few desired behaviors:
directory_indexeswill make it so the website paths do not end in
asset_hashwill ensure that every build generates uniquely named assets so that the CDN cache does not need to be invalidated on new builds.
Gemfile will specify the gems you will be using including the extensions to Middleman such as the
livereload which makes debugging easier by automatically reloading the website after changes to files.
Step 2: Move CSS, JS, and Image Files to Correct Directories
You should place all your asset files as follows:
- Styling files (CSS, SCSS, etc) in the
stylesheetsfolder. The bulk of your styles should be in a file called
site.css(or other appropriate extensions). However, you can rename it if desired.
- Move all your images to the
Step 3: Create Your HTML Files
We will be creating two HTML files.
index.html file will be where most of your website HTML will reside. The file below is from the Middleman demo project. Note the portion inside
--- at the top. This syntax allows you to declare variables that you can then use in your layout files.
layout.erb will wrap around your
index.html.erb (and other) HTML files. It will be responsible for importing your JS and CSS. This file can also be useful for exposing a header and footer that should be present on all pages of your website.
Step 4: Build
You can now run
bundle exec middleman build. This will create a new folder with all your compiled assets ready to deploy!
However, it would be best to set up an automated deployment so updated your website becomes seamless.
Assuming the steps here were followed. We will make two changes to Codepipeline so that it builds Middleman prior to deploying to S3.
Step 1: Add a Build Stage
Add a build stage to the pipeline in between the
deploy stages. It should be configured as shown below.
Click the “Create Project” button on the menu above. It will bring you to the CodeBuild creation form. Fill it out as below.