A starter site template to kickstart a middleman website with AMP pages tailwindcss and content from DatoCMS.
Require NodeJS, npm (>=3), Ruby and RubyGems First install dev dependencies
npm install
bundle install
Copy the .env.example file and rename it .env (populate with your DatoCMS API Key)
If you want the system to build the base example homepage fields on your dato cms admin you can install ruby gem 'dato' and execute the dato_init.rb file
gem install dato
ruby dato_init.rb
Use middleman server command, Gulp will be running as an external pipeline for asset recompilation and live reload (use localhost:3000 instead of middleman port)
bundle exec middleman server
Use middleman normal build method ;)
bundle exec middleman build
The amp components are managed as a simple array set in the currrent page metadata. You can add components from any template/layout/partial with the helper add_component(name). If you want for example to create a carousel gallery with lightbox from a dato modular block content for example:
<%
add_component("carousel")
add_component("image-lightbox")
%>
<amp-carousel
height="250"
layout="fixed-height"
type="carousel">
<% block.gallery.each_with_index do | image, index | %>
<amp-img on="tap:lightbox<%= block.id %>" src="<%= image.url(w: 1200, h: 1000, fit: :crop, fm: :jpg) %>"
role="button"
tabindex="<%= index %>"
width="300"
height="250"
alt="a sample image"></amp-img>
<% end %>
</amp-carousel>
<amp-image-lightbox id="lightbox<%= block.id %>" layout="nodisplay"></amp-image-lightbox>
The js components amp-carousel and amp-image-lightbox will be added in the head of the site only once even if the partial is called multiple times on the page.
The easiest way to deplay your website is to follow DatoCMS documentation with Netlify: https://www.datocms.com/docs/deployment/netlify/
In step 2 in addition to DATO_API_TOKEN don't forget to also add other env variable regarding dmat:
SITE_URL(ex: https://www.yoursite.com)SITE_ENV(production or staging)GA_ACCOUNT(Google Analytics Tracking ID ex: UA-XXXXX-X)