Hugo + Netlify + Githubを試す

2021-02-07 (最終更新: 2021-02-07)

アウトプットのためのブログを構築。
色々調べた結果、Hugo + Netlify + Githubが良さげだったので試した。

環境

macOS Mojave 10.14.6
Homebrew 2.7.1
Git 2.17.1
Hugo 0.79.0
Netlify

Hugo

Githubに空のリポジトリを事前に作成済み
HugoのThemaはMainroadを使用

$ brew install hugo

$ git clone https://github.com/xxxxx/blog.git
$ cd blog/
$ hugo new site ohpher
$ cd ohpher
$ git submodule add https://github.com/vimux/mainroad

$ hugo new post/my-first-post.md
$ hugo server -D

config.toml

baseURL = "https://ohpher.com/"
title = "ohpher blog"
DefaultContentLanguage = "ja"
languageCode = "ja-JP"
paginate = "10"
theme = "mainroad"
#googleAnalytics = ""

[Params]
  subtitle = ""
  description = ""
  copyright = ""
  opengraph = true
  schema = true
  toc = true
  pager = true
  post_meta = ["date", "categories"]
  mainSections = ["post"]
  dateformat = "2006-01-02"
  highlightColor = "#1133cc"
#  customCSS = ["css/custom.css"] # Include custom CSS files
#  customJS = ["js/custom.js"] # Include custom JS files

[Params.style.vars]
#  highlightColor = "#e22d30"
#  fontFamilyPrimary = "'Open Sans', Helvetica, Arial, sans-serif"
#  fontFamilySecondary = "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"

[Params.logo]
#  image = "img/placeholder.png" # Logo image. Path relative to "static"
#  title = "Mainroad" # Logo title, otherwise will use site title
#  subtitle = "Just another site" # Logo subtitle

[Params.sidebar]
  home = "right" # Configure layout for home page
  list = "right" # Configure layout for list pages
  single = false # Configure layout for single pages
  widgets = ["search", "recent", "categories", "taglist", "social"]

[Params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  tags_counter = false # Enable counter for each tag in "Tags" widget

[Params.widgets.social]
   # Enable parts of social widget
#  facebook = "username"
#  twitter = "username"
#  instagram = "username"
#  linkedin = "username"
#  telegram = "username"
#  github = "username"
#  gitlab = "username"
#  bitbucket = "username"
#  email = "example@example.com"

[[Menus.main]]
  Name = "home"
  URL = "/"
  weight = "1"
[[Menus.main]]
  Name = "post"
  URL = "/post/"
  weight = "2"
#[[Menus.footer]]
#  Name = "プライバシーポリシー"
#  URL = "/privacy/"

Githubにpush

$ hugo -D
$ git status
$ git add .
$ git commit -m "first"
$ git status
$ git push origin

Netlify

Host on Netlify | Hugo を実施

Netlify.toml

commandの「–theme=mainroad 」がないと、デプロイに失敗するので注意

[build]
publish = "public"
command = "hugo --theme=mainroad --buildDrafts --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.79.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.79.0"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.79.0"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.79.0"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

以下も実施

お名前.comでドメイン取得
Netlifyでドメイン設定
お名前.comでNetlifyのDNS設定

これでGit Pushすれば、記事が公開されるようになりました。

ToDo

Mainroadのカスタマイズ
HTML/CSS設定

環境