[jekyll × Github Pages - Tips] 本番環境にだけ出力したいタグを設定する方法

1533 ワード
Jekyll githubpages Jekyll テキストリンク

jekyll × Github Pages を使う時のTips

jekyll を使って、ポートフォリオを作成し、
GitHub Pages上で公開した時の備忘録です

本番環境にだけ出力したいタグを設定する方法

GoogleAnalyticvsなどのような、開発時には読み込みたくないタグの記載方法です

HTMLへの記載方法

  {% if jekyll.environment == "production" %}
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-00000000-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-00000000-1');
  </script>
  {% endif %}

本番環境に反映するコマンド／手順

$ JEKYLL_ENV=production bundle exec jekyll build
  • 上記コマンドを実行することで、GoogleAnalyticsタグが出力されますので、出力確認を行う
  • git commit & git push を実行する
  • GitHubPagesを確認する

ローカル環境で動作確認するコマンド

$ bundle exec jekyll serve
  • 上記コマンドを実行した場合は、GoogleAnalyticsタグが出力されません。