SECRET OF CSS

Create a Static Website With Middleman and Deloy It on AWS | by Paulo Carvalho | Jul, 2022


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:

  1. You have Middleman installed as per the instructions here.
  2. You have a website template (HTML, CSS, JS, etc) that you want to use.
  3. 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.

my-website/
├── data/
│ └── deploy.sh
├── source/
| ├── images/
| ├── javascripts/
| ├── stylesheets/
│ └── index.js
├── .gitignore
├── buildspec.yml
├── config.rb
└── Gemfile

There are three files that should be created as shown below:

The buildspec.yml will be used by AWS Codebuild to build the website.

The config.rb file is used by Middleman to configure its behavior. This sample file configures a few desired behaviors:

  1. directory_indexes will make it so the website paths do not end in .html.
  2. asset_hash will ensure that every build generates uniquely named assets so that the CDN cache does not need to be invalidated on new builds.
  3. minify_css and minify_javascript will reduce the size of your CSS and JS files.

The 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:

  1. Javascript files in the javascripts folder. It is Middleman convention to have a file called site.js for your site-wide JavaScript. However, you can rename it if desired.
  2. Styling files (CSS, SCSS, etc) in the stylesheets folder. The bulk of your styles should be in a file called site.css (or other appropriate extensions). However, you can rename it if desired.
  3. Move all your images to the images folder.

Step 3: Create Your HTML Files

We will be creating two HTML files.

The 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.

The 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 source and deploy stages. It should be configured as shown below.

1*Dnyp 3Oo6saTOWzeZD3Abw

Click the “Create Project” button on the menu above. It will bring you to the CodeBuild creation form. Fill it out as below.

1*1gQfRjgCVhh95dJLbpNFBQ
1*o 8LDCM1NHH15GtbqbAb8A
1*yyOmk Cp59DL0



News Credit

%d bloggers like this: