はじめに

ランディングページを量産したい時期がありませんか。
私にはあります。

今回は Hugo という Go 製の Static Site Generator と Bulma という Flexbox を基調とした CSS Framework をベースに netlify という高機能なホスティングサービスを使います。

今回は環境設定等の準備編となります。
実装編もあります。

実際のページはこちら

f:id:nananao_dev:20190630123327p:plain — demo landing page

環境設定

今回は量産を主軸に置くためデザインや Hugo layout で凝ったことはせず、使い回しが効くことを優先します。
また、ライセンス周りを気にしたくないので Hugo Theme は自作します。

また学習用とはいえランディングページなのでコンバージョンを考えてみます。
今回は新商品のランディングページを想定してページの View 数と Form からの問い合わせ数をコンバージョンとします。
要は Google Analytics と netlify の Forms に対応します。

Hugo

Hugo という Go 製の Static Site Generator を利用します。

gohugo.io

mac であれば brew でインストールできます。
landingpage というサイト、 lp というテーマの雛形を作成します。

$ brew install hugo 
$ hugo new site landingpage & cd landingpage
$ hugo new theme lp

Bulma

Bulma はダウンロードしローカルから利用します。

bulma.io

以下の様にassetsディレクトリの中にダウンロードしたbulma.sass と sass/ ディレクトリを置きます。

.
├── README.md
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── resources
├── static
└── themes
    └── lp
        ├── LICENSE
        ├── archetypes
        ├── assets
        │   ├── bulma-custom.scss
        │   ├── bulma.sass
        │   ├── sass/
        │   └── top.scss
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   └── partials
        │       ├── footer.html
        │       ├── head.html
        │       └── header.html
        ├── static
        │   ├── css
        │   ├── favicon
        │   ├── img
        │   │   └── logo_cat.png
        │   └── js
        │       ├── index.js
        │       ├── lodash.js
        │       ├── rellax.js
        │       ├── rellax.min.js
        │       └── underscore-min.js
        └── theme.toml

これをthemes/lp/layouts/partials/head.htmlから以下の様に読み込んでいます。

{{ $styles := resources.Get "bulma.sass" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

また、 bulma には js がないので click イベント等を拾いたい時には自身で js を書く必要がありそうです。
私はthemes/lp/static/js/index.jsに以下の様な.navbar-burgerを操作するイベントを書きました。

document.addEventListener('DOMContentLoaded', () => {
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);  
  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target;
        const $target = document.getElementById(target);
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
    
      });
    });
  }  
});

自身で定義した javascript に関してもthemes/lp/layouts/partials/head.htmlから以下の様に同様に読み込むことができます。

<script src="{{ .Site.BaseURL }}/js/index.js"></script>

rellax

rellax は要素に class 1つと attribute を与えるだけでとても簡単にパララックス効果をつけることができます。

github.com

themes/lp/layouts/partials/head.htmlから以下の様に同様に読み込むことができます。

<script src="{{ .Site.BaseURL }}/js/rellax.js"></script>

また、head.htmlではなくthemes/lp/layouts/partials/footer.html に対してnewの処理を書く必要がありました。
head.html に書くと .rellax なんて class ないよ。と怒られます。

<script>
  var rellax = new Rellax('.rellax', {
    callback: function(position) {
    }
  });
</script>

animate.css

animate.css は要素に classを与えるだけでとても簡単にアニメーション効果をつけることができます。

daneden.github.io

Scroll と合わせて viewport に入ったタイミングで動かしたいと試行錯誤しましたが、 jQuery の例しか見当たらずちょっと保留中です。
themes/lp/layouts/partials/head.htmlで CDN から読んでます。
ちゃんと動かせるようになったらローカルに持ってきます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

google Analytics

./config.toml に発行したトラッキング ID を追加します。

baseURL = "https://nananao-landing-page.netlify.com/"
languageCode = "ja"
title = "Demo landing page"
googleAnalytics = "UA-1312XXXXX-3"

開発環境hugo serveで都度カウントされたくないので themes/lp/layouts/partials/head.htmlから以下の様に読み込みます。

{{ if not .Site.IsServer }}
    {{ template "_internal/google_analytics_async.html" . }}
{{ end }}

netlify

netlify というとても高機能な hosting サービスを利用します。
netlify は Hugo を手厚くサポートしていて、git の workflow に沿って勝手に build して deploy してくれたり、Hostingと聞いておおよそ必要そうなドメインの変更や環境変数の設定から、Static Site では実現が少し難しい様な Form の作成、からユーザー管理（有料）、認証（有料）、AWS Lmbda っぽい Function まで書ける様です。
今回は Form を利用して、 Form に投稿があったら slack に通知します。
実態は csv download 機能があるので csv にしてmarketo や salesforce に入れるのでしょう。

www.netlify.com

設定としてはGithubのアカウントを連携するだけで始められます。
private repository も連携できるようです。素敵。

netlify Forms

netlify を利用することで Static Site にも関わらずとても簡単に Form を作ることができます。
別途 javascript を読み込む必要はなく form タグに data-netlify="true" を指定するだけのようです。
あとは form とそれぞれの input に netlify Forms が識別する name を指定して submit ボタンを置くだけです。
bulma のような css framework と相性良いですね。

<form name="contact" method="POST" data-netlify="true">
  <div class="field">
    <label class="label">お名前</label>
    <div class="control has-icons-left">
      <input class="input is-medium" name="name" type="text" placeholder="お名前" required>
      <span class="icon is-small is-left">
        <i class="fas fa-user"></i>
      </span>
    </div>
  </div>

  <button type="submit" class="button is-primary is-large is-fullwidth">Submit</button>
</form>

netlify forms で受け取ったデータは勝手に保存されています。
また、notifications として mail, slack ,webhooks が設定できるようです。
私は slack の incommig webhooks を設定しています。

料金表を見ると無料枠でも Submissions per month = 100 なのでよほど人気商品でない限り無料枠で収まりそうです。

netlify cms

基本的に手元の PC で修正することで必要十分ではありますが、非エンジニアの方々が軽微な修正を行いたい時に git は少し辛い時があります。
ランディングページという性質上、非エンジニアの方々への考慮しておいた方が良いと思っています。

netlify cms というオープンソースの Static Site Generator 専用の GUI エディターがあります。

www.netlifycms.org

github と連動した壮大な markdown editor なのですが、 Github 認証連携であったり、ドラッグ&ドロップだけで Save draft = ブランチを作成してcommit → Edit draft = commit して draftブランチを作成しpull request → Approve and publish draft = marge してブランチ削除 までやってくれます。

wordpress と比較すると netlify cms 自体には編集者、投稿者、Admin といった Role の設定は存在しませんが、Githubの Read / Writeの設定を行うことで、権限管理を実現する設計思想になっているようです。

これについても設定はとても簡単です。
./static/admin/index.html に以下をコピペします。

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

次に ./static/admin/config.yml を設定していきます。

backend:
  name: github
  repo: {githubのレポジトリ}
  branch: master
media_folder: "static/img"
public_folder: "public"
publish_mode: editorial_workflow # これを指定しないと workflow が利用できない
collections:
  - name: "tops" # netlify cms URLを指定、contentディレクトリ配下のディレクトリ名（セクション名）と同じで良いはず
    label: "tops" # netlify cms上での表記を指定
    folder: "content/tops" # contentディレクトリ配下のディレクトリ名（セクション名）
    create: true # 新しいファイルの作成を許可するか
    # slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # ファイル名のフォーマットを指定できる。今回はコメントアウト。
    fields: # 各フィールドのラベル、markdownのヘッダ（Front Matter）の key 、編集するためのウィジェット、必須項目であるか。を指定。
      - {label: "Title", name: "title", widget: "string", required: true}
      - {label: "Subtitle", name: "subtitle", widget: "string", required: true}
      - {label: "Description", name: "description", widget: "string"}
      - {label: "Image", name: "image", widget: "image"}
      - {label: "Weight", name: "weight", widget: "number", required: true}

次に Github の設定を行います。
https://github.com/settings/developers で OAuth Apps を作成します。

f:id:nananao_dev:20190630120454p:plain — GitHub

Application name には任意の名前、 Homepage URL には netlify で利用するURL 、Authorization callback URL には https://api.netlify.com/auth/done を指定します。

f:id:nananao_dev:20190630120829p:plain — github settings

Register application をクリックすると Client ID と Client Secret が払い出されます。
これを netlify の settings/access#oauth に登録します。

f:id:nananao_dev:20190630121118p:plain — netlify install app

これで準備完了です。
あとは hugo serve であれば http://localhost:1313/admin 、netlify に上げた後であれば https:// {YOUR DOMAIN} /admin で Github の認証が走ります。

ログインできれば以下のように UI から記事の設定が可能になります。
_index.md といったセクションファイルが見えてしまうことが少し気になります。特定のファイルを除外する方法は見つかりませんでした。

f:id:nananao_dev:20190630121532p:plain — netlify cms

まとめ

以上で Hugo & bulam & rellax & animate.css を netlify + netlify cms でホスティングしたランディングページを作成する準備ができました。
実装についてはHugo & bulam & rellax & animate.css を netlify + netlify cms でホスティングしたランディングページを作成する実装編で書きます。

nao blog

Hugo, bulam, rellax, animate.css を netlify + netlify cms でホスティングしたランディングページを作成する（準備編）