AMPStart 便利です。
https://ampstart.com/
https://github.com/ampproject/ampstart
AMP用のテンプレートをいっぱい作ってくれているのですが、
こちらのGithubを活用してALP（AMP対応のランディングページ）とかも簡単に作れます。
このプロジェクトのPostHTMLとかPostCSSの
設定が素晴らしくて、このプロジェクトの設定を
そのまま使って、普通の静的HTMLを吐き出しても
いい感じになる。しかもAMP対応。
git clone git@github.com:ampproject/ampstart.git
してきて、
Repository Layout
| Directory | Description |
|---|---|
| components/ | CSS and HTML snippets (Mustache) for AMP Start components. |
| build/ | (generated) intermediate generated files. |
| css/ | CSS assets. |
| css/ampstart-base | CSS Base AMP Start elements like buttons. |
| css/templates | CSS for AMP Start templates. |
| css/www | CSS for www.ampstart.com. |
| dist/ | (generated). |
| hl-partials/ | Partials that help generate copy pastable html for www.ampstart.com/components.html. |
| img/ | Image assets. |
| tasks/ | Gulp tasks. |
| templates/ | AMP Start template HTML. |
| www/ | www.ampstart.com |
こんな感じのフォルダ構成になっているので
git remote rm origin
レポジトリ消して（別に消さなくてもいい）
cd ampstartして
npm iとかyarnして
wwwフォルダの中のindex.htmlを編集したら
npm run build
ビルドした時に、distフォルダにアンプに対応した
（ビルド時にアンプのバリデートチェックもしてくれる）
静的なHTMLが書き出されるので
それを使っている。
一緒にtemplates,hl-partialsフォルダのテンプレート類の
HTMLやCSS、imgも書き出される。
いらない場合はtemplatesなどはフォルダごと
消してしまえば問題ない、
一部のimgやcssはgulpの設定に書いてあるのも
あって消してしまうとエラーになるので
都度、設定が必要かも
私は気にならないのでそのままやってます；
wwwフォルダのhtmlは
<!doctype html>
{{#www-index}}
<html ⚡>
{{> ../utils/amp-page-head.snip.html}}
<body>
{{> ../components/navbar/navbar.snip.html}}
<main>
<header class="www-header center">
こんな感じでmustacheとjsonを組み合わせて
書かれているので、これを活用する。
index.htmlと同階層にindex.jsonがあって
{
"www-index": {
"head-tag": {
"title": "AMP Start",
"canonical-path": "",
"extensions": [
"amp-carousel",
"amp-sidebar",
"amp-lightbox",
"amp-iframe",
"amp-selector",
"amp-analytics"
],
"css-path": "www/index/page.css",
"font-stylesheets": [
"https://fonts.googleapis.com/css?family=Inconsolata|Montserrat"
],
"favicon": {
"href": "../img/www/amp_favicon.png"
}
},
"navbar": {
"logo": {
"url": "../img/www/amp_start_logo.svg",
"width": "119",
"height": "26",
"classes": "xs-hide sm-hide",
"href": "/"
},
こんな感じでこのJsonをうまい具合にパースしてくれる。
CSSもPostcssでグローバルにBasscssを使用。
自動で圧縮してHead内にインラインで突っ込んでくれる。
本当素晴らしいっすね。
私的にはこのプロジェクトのWebpackやGulpの設定が
現時点での静的なHTMLを書き出すベストプラクティスな感が
あります。
ただ、Vuepressってのが出てきてるので、
これはなんかまた良さそうだなと思ってます。