Home / hugoでサイト制作に使える必要なものを自分用にまとめる

hugoでサイト制作に使える必要なものを自分用にまとめる

2021.02.26

2021.05.30

# Hugo

# Site

# Blog

Contens

Scoop(Win)でインストール
choco(Win)でインストール
hugoのメモリスト
開発環境について
感想

静的サイトジェネレータHUGOを使用するための環境作りを備忘録も兼ねて、まとめています。

Scoop(Win)でインストール

メリット
- shell だけで完結、コマンド打つだけ簡単
参考

shell（管理者権限なし可能）起動、パスを通す

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

scoop インストール
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

hugo インストール
scoop install hugo-extended

choco(Win)でインストール

chocoシェルでインスト

Set-ExecutionPolicy Bypass -Scope Process

The Package Manager chocolatey

choco install hugo -confirm

choco install hugo-extended -confirm

hugoのメモリスト

hugo でのサイト制作をする中で、よくハマっていたものを簡単にまとめていきます。これからも増えていくと思います。わかってしまえば速いんですが、わかるまでストレスマックスやったりするので忘れないためにも書いておく。こうゆうのは忘れた頃にやってくるからね。

簡単な凡ミスって意外にネットで調べてもわからないことが多く、てゆーのも当然なんですけど原因がわからないと解決まで導けない。ほんとパソコンの電源ケーブル刺さってないですよレベルだったりもするし。

また、静的サイトジェネレータ hugo はイジるときはイジるけど、落ち着いたらイジらなくなるので、久しぶりに触ると忘れてることが多い。

画像の取り扱いについて

大文字小文字を正しく統一すること。拡張子も含めて。
- 画像が表示されない理由の一つ
フォルダパスのミス
- フォルダ階層を正しく把握すること
- 相対パスと絶対パスにも注意が必要
- よくわからないgo言語は、できるなら自分のわかる簡単な記述へ変更
- 他テーマから引っ張ってきたよくわからんものに注意
テーマのimagasフォルダとサイト自体のimagesフォルダ
./を使う場面といらない場面
同一フォルダ内で記事と画像を管理する場合
- ![](01.JPG) でよい
- Paramで記述する時、 ./01.jpg でよい

その他

ビルドの時に、記事の配置場所を間違える
- 結果、URLがおかしくなる
ミライの日付の記事は表示されない。表示するコマンドあり
staticに置いたファイルは、そのまま出力される
- favicon,logo,htaccess

コードメモ

{{ .Site.BaseURL }}
{{ .Site.Title }}
{{ .Summary }}
{{ .Permalink }}
{{ .Content }}
{{ .LinkTitle }}
{{ .Date.Format "2006-01-02" }}
{{ template "_internal/pagination.html" . }}
{{ hugo.Generator }}
{{ now.Format "2006" }}
{{ .WordCount }}

{{ range (first 5 .Site.RegularPages) }}{{ end }}
{{ range (.Paginator 6 ).Pages }}{{ end }}
{{ range (.GetTerms "tags") }}{{ end }}

{{ if .Params.thumbnail }}{{.Params.thumbnail}}{{ else }}{{ end }}
{{ if gt (len .TableOfContents) 20 }}{{ .TableOfContents }}{{ end }}

{{ with .OutputFormats.Get "rss" -}}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}

{{ with .NextInSection }}{{ else }}{{ end }}
{{ with .PrevInSection }}{{ else }}{{ end }}

{{ range $termName, $entries := .Site.Taxonomies.tags }}
  /tags/{{ $termName }}
  {{ $termName }}
  {{ $entries.Count }}
{{ end }}

{{ with .Site.Params.author }}
  {{ with .thumbnail }}
    {{ . }}
  {{ end }}
  {{ .name }}
  {{ .description | safeHTML }}
{{ else }}
{{ end }}

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}{{ . }}{{ end }}
{{ end }}

{{if .IsHome}}{{else}}{{ end }}

{{ define "1111" }}{{ end }}
{{ template "1111" }}

{{ range first 3 (where .Site.RegularPages "Section" "aaa" ) }}{{ end }}

ダミー文章生成
Lorem

{{ with resources.Get "sass/main.scss" | toCSS }}
{{ replace .Content `@charset "UTF-8";` "" | safeCSS }}
{{ end }}
{{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

作業スペースでテストするための環境を用意すると、自分的には色々なコードやテンプレートをテストできて便利。テンプレートかPartialどっちでも適当に作成してサーバーテスト時のみ動くようにすれば、ごちゃちうていてもビルド時に書き出しはないので使い勝手がよくて基本使ってます。もっといい何かがあれば試してみたいと思います。

{{ partial “xxxx” . }}
{{ template “xxxx” }}

{{ if .Site.IsServer }}{{ partial "1-test.html" . }}{{ end }}

-----<body>------
{{ partial "1-test.html" . }}
<div class="border-bottom border-5 border-warning fs-6" style="height: 15rem;">
  <h6>サーバーテスト領域</h6>
</div>

config

<!-- trueにすると、日中韓の言語で文字カウントとかが正しく動作する -->
hasCJKLanguage = "true"

<!-- robotstxtの生成 /layouts/robots.txt にテンプレートを作成可能 -->
enableRobotsTXT = "true"

<!-- Pygments によるコードハイライト -->
pygmentsCodeFences = "true"

# セクション名の複数形を防ぐ
pluralizeListTitles = false

disableKinds = ["category","categorys"]

[params.author]
  thumbnail = ""
  name = ""
  description = ""

[permalinks]
    posts = "/:sections/:year/:month:day/:slug/"
    posts = "/:year/:month:/:day/:filename/"
    posts = "/:categorys/:year/:month:/:day/"
    posts = "/:section/:year/:month/:filename"
    posts = "/:section/:filename"

Archetype

draft: "true"
title: ""
date: ""
lastmod: ""
tags:
- 
categories:
- 
toc: "true"
thumbnail: ".jpg"

開発環境について

FTP ツール

接続設定で初期フォルダの設定をしておく
動作確認後
- アップロード時の削除確認ダイアログのチェック外す
- ホスト設定、
  - 転送エラー時の処理、すべて後で上書き
  - 最大同時接続MAX
設定が固まったら設定ファイルを書き出して、他デバイスでも簡単に復元できるようにする。
- クラウドストレージ
「FFFTP」定番FTPクライアントソフト - 窓の杜

自動化設定をショートカットファイルの編集で作成する。-f による確認メッセージの非表示は使わない。ワンクリック増えるが、最終確認を残しておく。ローカルファイルの場所やバックアップの関係でずれたりフォルダが思った場所になかった場合でも、自動で最後まで処理を実行してしまうと、手間がかかってしまう。また、静的ファイルのアップロードなので別のファイルのアップロードや、削除などが行われてしまうと公開ファイルなので一時的に閲覧不能なったりするため、最終確認は残す。なので、2クリックでアップロードが完了する。

"C:\Program Files\ffftp\ffftp.exe" -s "任意のホスト名" -m -q

-s + 任意のホスト名
-m ：ミラーリングアップロード
-f ：確認メッセージの非表示
-q ： FFFTPの終了

VScode

vscodeでコマンドラインを利用するとき、上下で直近に利用したコマンドが表示される
基本vscodeからhugoのコマンドも実行していく

VScode おすすめ拡張機能

よく使うhugoコマンド

hugo
new draft/0101_post/index.md
server
-w
-D
–ignoreCache
–cleanDestinationDir
–minify

hugo server -w --ignoreCache
hugo server -D -w --ignoreCache
hugo new draft/210101_post/index.md
hugo --cleanDestinationDir --minify

bootstrap

Chromeの開発ツールで気になる部分を確認
- ツール内でCSSのチェックマークのオン・オフで確認できるところは確認
- margin,padding,画像は要注意
- bootstrapはcontainer,row,colの構成に注意
betaや最新バージョンにいちよう注意

感想

間違ってるけど、なぜか動いてる。とか、もっと望ましい書き方があるとか、あるのかもしれない。基本的には、自分の頭が追いつかない意味不明なものは使うのは控えています。理解できる範囲で用法用量を守って運用してる感じ。HUGOはいくらでも難しくできて手の混んだことができちゃうので、常にシンプルさを忘れずにやっていきたい。

最後まで閲覧有難うございました。他の記事もよろしくお願い致します。