6/21(月)・6/22(火)はAmazonプライムデー!商品一覧へ

【Hugo】Netlify CMSを用いたブログの作成方法

hugo-netlify-cms-settings

WordPressを用いないブログを作成したかったので、静的サイトジェネレーターのHugoでブログを作成してみました。

その設定方法の備忘録。

目次

テンプレートを用いて、サイト構築

下記のサイトから、ワンクリック(Hugoを選択、GitHubのアカウント連動が必要)でサイト構築(KALDIの仮サイトができる)します。

途中パスワードも登録すれば、記事投稿画面(CMS)もアクセスできます。(ちなみに投稿画面、スマホでは投稿しずらいです^^;)

Hugoのテンプレートを選択

下記のテンプレートから好きなテーマを選択してダウンロード

今回は「hello-friend」というテーマを選択(見た目はいいのですが、コードの修正もそれなりにしたのであまりおすすめしません)

ローカルサーバーにテンプレートを表示

基本的なやり方は下記の記事を参考

  • site>themes>hugo-theme-hello-friend-custome(テーマフォルダは少しリネーム”hugo-theme-hello-friend-custome”)にダウンロードしたテーマを格納(git使うときに邪魔なので入っている.gitフォルダは削除すること
  • bin>hugo.exeも最新にしておく

バッチの作成

いちいちコマンドプロンプトで打ちたくないので作成

d:
cd D:Blogmy-methodsite
D:my-methodbinhugo serve
pause

カスタマイズ

ファビコンの設定

  • sitestaticimgに表示したファビコン画像を格納
  • head.htmlに下記のコードを挿入

<link rel="shortcut icon" href="/img/favicon.ico">

ブログタイトルの>記号と赤いカーソルの削除

logo.htmlで下記のコードをコメントアウト

著者の記述の削除

list.html/single.htmlで下記のコードをコメントアウト

<!-- <span class="post-author">Written by {{ .Params.Author }}</span>-->

日付と著者のつなぎ目の記号を削除

staticassetsstyle.cssを開いて下記の記述を変更

.post-date:after{{content: none;}

タグのページを作成

タグ一覧のページを作成したいのでlayouts_defaultterms.htmlに下記のコードを挿入

※*{{ define “main” }}{{ end }}で挟まないと、CSSがうまく反映されないので注意!*


### タグのページを作成 <img src="https://www.cg-method.com/wp-content/uploads/2018/12/Screenshot_2018_1215_05.png" class="size-full alignnone wp-image-3115" alt="" width="805" height="481"> タグ一覧のページを作成したいのでlayouts_defaultterms.htmlに下記のコードを挿入 ※*{{ define "main" }}{{ end }}で挟まないと、CSSがうまく反映されないので注意!*
{{ define "main" }}
{{ .Title }}
{{- $plural := .Data.Plural }}
{{- range $index, $term := .Data.Terms.Alphabetical }}
{{ $term.Name }} ({{ $term.Count }})
{{- end }}

config.tomlの設定

baseurlはちゃんと記述しないとサイトが表示されないので必ず記述すること

baseurl = "https://www.my-method.jp/"
languageCode = "jp"
title = "MYメソッド"
theme = "hugo-theme-hello-friend-custome"
copyright = "©2018 MY-METHOD"
canonifyurls = true
paginate = 10

[indexes]
tag = "tags"

[params]
googleAnalytics = "UA-xxxxxxxxx-x"
subtitle = "Life Optimize"

[params.logo]
logoText = "MYメソッド"

[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "/about"
[[menu.main]]
identifier = "tags"
name = "Tags"
url = "/tags"

アナリティクスの設定

analytics.html ▶ google_analytics.htmlに名称を変更し、コードも修正

{{ with .Site.Params.googleAnalytics }}
{{ end }}

baseof.htmlのコードを修正

{{ partial "google_analytics.html" . }}

アナリティクスがカウントされているか確認

独自ドメイン+SSL対応

  • お名前.comからドメインの取得
  • DNS関連機能設定からDNSレコード設定を利用するで下記の設定に

ホスト名:www.ドメイン.jp
TYPE:CNAME
TTL:3600
VALUE:www.ドメイン.jp

もう一つTYPE Aも登録するとSSL化でエラーがでるので、CNAMEだけにする!

  • NetlifyからDomain management>Domains>Custom domain>ドメインの登録
  • 続いてNameserversのURL(4つ)も設定
  • Domain management>Domains>HTTPS>SSL/TLS certificate>Verify DNS configrationでLet’s Encypt certificateをクリック、しばらく待てば自動でSSLが有効になります

まとめ

いろいろ苦戦したのですが、なんとかHugo+Netlifyでブログをだいたい構築!

  • マークダウンで記述できる(記事投稿画面もあり)
  • Netlifyでサーバー代が無料
  • 高速表示(記事がほとんど無いのであれですが、今の所PageSpeed Insightsでモバイル9点 / PC100点と高速)
  • 独自ドメインやHttpsも設定簡単(アナリティクスは苦戦しましたが…)
  • 構成するデータはシンプルなので、なれたらカスタマイズ簡単(Wordpressの様にデーターベースが必要無い!)

と良い点も多いのです。

こっちのブログはCGは関係ない、生活の最適化としての備忘録として来年から書く予定です。

※ついでに静的サイトもいろいろ勉強するつもり。

静的サイトジェネレーターでのサイト作成方法

すいみん

メンテしやすい超高速表示サイトが作成できます。

【Hugo】静的サイトジェネレーターでのサイト作成方法

目次
閉じる