Starting point for AMP pages generated with create-amp-page and using @formanta/sass for styling. Directly deploy with netlify cms as git managed static site generator!
npm i
npm start
# or
npm run build
npm run tasks
npm run clean
# serve `build` with `server.js`
# for checking build version at port :3030
npm run serve
Open localhost:4488 for your local page preview and change something in src/*
!
Provides a basic file structure and uses the gulp build tasks of create-amp-page, with additionally: markdown and netlify cms.
- uses
.scss
files - page data as
.json
and.md
with frontmatter - twig templates and pages
- pages by template files in
src/html/pages
- pages with folders of frontmatter / collections
- using page filename for
- frontmatter files resolution
- links generation (e.g. canonical)
- use custom data, functions, filters and more
- pages by template files in
- media optimizing for png, jpg, gif, svg
- markdown to HTML generation, preinstalled markdown-it plugins for extended syntax
- basic Twig template for AMP or none AMP pages
ampEnabled = true
as template variable enables the needed AMP parts- HTML for AMP scripts
- inline CSS parts for AMP, also where the CSS is injected by gulp task
amp
attribute athtml
tag
- AMP Optimizer and removing unused CSS for production
- Headless Netlify CMS for site generation supported
- uses also frontmatter
- git repository management and netlify CI/CD
- identity management by netlify, github and more
- easily removable when not wanted:
- delete
public/admin
folder and remove the netlify cms part insrc/html/_base.twig
blockfoot_js
- delete
- supports easy addition of ESNext and React, see feature/esnext
build
dist folder after runningnpm run build
or whilenpm run start
public
with general files in root likemanifest.json
public/admin
config and setup files for netlify cmssrc/api
may be used as mock apisrc/data
contains the page frontmatter and datasrc/html
is the base for all twig templatessrc/html/pages
will be build to individual HTML pagessrc/media
may contain imagessrc/styles/main.scss
is the style sheet
This starter repository supports one click deployment on netlify, in your netlify project the identity handling must be setup - and you are ready! The template files, scripts and content schemas are already configured.
Setup identity management and adjust the email templates:
- Setup netlify project
- In netlify project, under identity: click
enable identity
- Click on
Settings & Usage
- Scroll to
Registration preferences
and change toInvite only
- Optional, recommended: add external providers with default config like GitHub
- Scroll to
Git Gateway
and enable it - Now the general identity handling is working
- In netlify project, under identity: click
- Change email template paths in netlify, read why below
Invitation template
to:/email/invitation.html
Confirmation template
to:/email/confirmation.html
Recovery template
to:/email/recovery.html
Email change template
to:/email/email-change.html
- Invite yourself in the project's identity management
- Ready to login under
https://<your-page-name>.netlify.app/admin/
, your page is published athttps://<your-page-name>.netlify.app/
- Check
netlify.toml
for deployment settings like basic auth, edit the CMS content schema inpublic/admin/config.yml
This is an AMP boilerplate and can't use netlifys custom JS login redirect-handling, the login would be buggy: after accepting the invite you will be directed to /
, this triggers the login correctly (JWT exchange) when the identity widget is loaded, but you will not be redirected to /admin/
again. To solve this, the email templates must be changed and /admin/
added between domain and #
before the tokens, the templates at src/email/
are already adjusted. For ampEnabled=false
the identity widget will be loaded by default in frontend, you may remove it in src/html/_base.twig
. The email templates are copied to build/email
as netlify needs normal HTTP access.
Take a look at the authentication documentation for netlify cms, check how to configure the cms and checkout the default widgets.
This starter will contain more and more ready to use AMP components and their CMS definitions when needed.
Universal Twig functions, used within templates, are included in create-amp-page
, check out the function docs
Displays an img
or amp-img
tag using ampEnabled
, layout
defaults to 'responsive'. Set's width and height using getImage
fn, adds sha1 cachebuster.
todo: srcset and image resizing support
{% embed 'blocks/image.twig' with {
src: '/media/img-01.png',
alt: 'A blog hero image',
classes: 'mb2',
layout: 'responsive',
} %}
{% endembed %}
This is not really AMP compatible, or harder to develop e.g. SSL for local amp-script
debugging, max 150KB of total script sizes. Suites non-AMP pages perfectly. Use with AMP when you know what you do!
beta: webpack and babel config with
wrap
onampCreator
In feature/esnext
a modern webpack & babel buildsetup is preconfigured.
Start coding in ES6+, Typescript and React, use babel plugins and more.
Embed or reference (src
) the produced asset files directly.
Check the file level differences between feature/esnext and master starter template. Will be documented here when finalized as easy reproducible steps.
Render your React directly at the build process, clean and rich HTML for SEO and client side speedup!
alpha: it works, but features need optimizing / coworking-with-twig, like resizing used images
template structure must be adjusted before using snap, as every dynamic thing must be rendered with react and not through twig or react-snap uses a different twig template for each page (seems to be hard)
Enabled in the feature/esnext
branch, using react-snap for "server side react rendering" and fixing react-snap#493 through the custom /copy.js
, adding the HTML cleaning and optimizing tasks again.
Commands:
# use `snap-build` now instead of `build`
npm run snap-build
This project is free software distributed under the MIT License.
See: LICENSE.
By committing your code/creating a pull request to this repository you agree to release the code under the MIT License attached to the repository.