HUGOで開発環境（hugo server）の判定をする

# .Hugo.Environmentで取れる。
# 初期は"development"
# 「hugo server  --environment 文字列」で指定もできる

# hugo server環境下だった変換したcssをlink hrefでリアルタイムで読む
{{- if eq .Hugo.Environment "development" }}{{- $style := resources.Get "sass/main.scss" | toCSS }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
{{else}}
# hugoコマンドで出力するときは、ローカルで変換したcssの方を読む
<style amp-custom>
    {{readFile "/assets/sass/main.css" | safeCSS}}
</style>
{{end}}

# hugo server時はreadFileで読んだファイルはリアルタイムで読み直してくれない
# この方式にすればhugo serverでプレビューしながらSCSSでコーディングができる

HUGOで開発環境（hugo server）の時だけに実行した時の判定方法です。「.Hugo.Environment」で取得できます。サンプルは、フルAMPテンプレートで、開発時はHUGOのコンパイラでSCSSをリアルタイム変換して、デプロイする時は変換済みのcssを読むというスクリプトです。

Written by

趣味でサイトやサービスを作ってます。自分で調べてたり開発した際に得た知見を投稿します。

# .Hugo.Environmentで取れる。 # 初期は"development" # 「hugo server --environment 文字列」で指定もできる # hugo server環境下だった変換したcssをlink hrefでリアルタイムで読む {{- if eq .Hugo.Environment "development" }}{{- $style := resources.Get "sass/main.scss" | toCSS }} <link rel="stylesheet" href="{{ $style.Permalink }}"> {{else}} # hugoコマンドで出力するときは、ローカルで変換したcssの方を読む <style amp-custom> {{readFile "/assets/sass/main.css" | safeCSS}} </style> {{end}} # hugo server時はreadFileで読んだファイルはリアルタイムで読み直してくれない # この方式にすればhugo serverでプレビューしながらSCSSでコーディングができる

# lastestは使うバージョンに変更可能 image: registry.gitlab.com/pages/hugo:latest variables: GIT_SUBMODULE_STRATEGY: recursive # masterブランチ以外で実行されるテストコマンド。と行ってもhugoコマンドを実行しているだけ # 記事追加でブランチを切る場合（Netlify CMSなど）は無駄にPipeline Quataを消費するからtestは削除するか、開発用のブランチを指定したほうがいい test: script: - hugo except: - master # ここで公開処理。hugoコマンドを実行して、できたpublicディレクトリを公開しているだけ pages: script: - hugo artifacts: paths: - public only: - master

Written by

GOの新着コード