読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

Go言語の静的サイトジェネレータHugoを使ってサイトを作成する

Go言語 Hugo

前回ではHugoでテーマを導入してサイトのトップ画面を作成するところまで進めました。

今回は公開できるレベルまでサイトを作り込んでいこうと思います。

とりあえず記事を投稿してみましたがサムネイルがなく殺風景です。記事に対応する画像を貼る様にします。

画像などの静的ファイルを配置する

Hugoでは静的ファイルはホームディレクトリ以下のstatic内に配置する必要があります。

ここに画像ファイルを格納するためのimgディレクトリを配置してみましょう。

特に理由はありませんがRMSの画像を利用することにします。

f:id:mochizuki_p:20170227223856p:plain

次に記事に移動します。

テーマにもよりますが記事のサムネイルを指定するにはimageにstaticフォルダからの相対位置で画像ファイルを指定します。

+++
image = "/img/hello_world.jpg"
date = "2017-02-26T17:39:47+09:00"
title = "hello world"

+++

# Hello World

Hello World

これで記事に画像が関連付けられたはずです。

試しに確認してみましょう。

f:id:mochizuki_p:20170227223748p:plain

固定ページを作成する

サイトの概要や著作権表記など、固定ページを作成することも可能です。そのためには

  1. content以下に固定ページ用のディレクトリを作成する
  2. 1で作成したディレクトリ内にindex.mdを作成して内容を編集する。
  3. config.tomlで作成したディレクトリを登録する。

試しにサイトの概要を説明する固定ページとしてaboutを設置してみようと思います。 


mkdir about
touch index.md

index.mdの内容は

++++

title = "About us"
date = "2017-02-27T12:04:48.782Z"

+++

About us



config.tomlを編集

config.tomlにこの固定ページを登録します。

テーマごとに指定された値を登録するために [param]というブロックを配置します。

この中にインデントを下げて params.navlinksを作成します。 ここにname=“About"でナビゲーションを作成してcontent内のディレクトリを指定します。

ついでにSNSのアカウントも表示することにしましょう。 あなたのSNSのアカウントをここに指定しておくとサイトの下部にリンクが表示されます

[param]

  [[params.navlinks]]
  name = "About"
  url = "about/"

  [params.social]

  facebook      = "https://www.facebook.com/example"
  twitter       = "https://www.twitter.com/example"

これで再びサイトを生成

見てみると

f:id:mochizuki_p:20170227223811p:plain

この様に各固定ぺージへのリンクが入ったナビゲーションが作成されました。

そして各ページの下部にはSNSへのリンクが表示されています。

静的サイトはどこに配置されているのか?

Hugoは静的サイトジェネレータです、各ページごとにHTMLファイルが作成され、それに付随した画像などのメディアファイル、CSSやJSがひとまとめになったディレクトリが生成されます。これをApacheなどのサーバーで配信する様にすればWebサイトの出来上がりです。

静的サイトを生成するには

hugo

生成されたWebサイトのデータはpublicディレクトリ内に配置されます。このディレクトリの中身を丸ごとWebサーバーにアップすれば完了です。

生成されたWebサイト

public
├── about
│   ├── index.html
│   └── index.xml
├── categories
│   └── photography
│       ├── index.html
│       └── index.xml
├── contact
│   ├── contact
│   │   └── index.html
│   └── index.xml
├── css
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── custom.css
│   ├── font-awesome.min.css
│   ├── fonts
│   │   ├── FontAwesome.otf
│   │   ├── fontawesome-webfont.eot
│   │   ├── fontawesome-webfont.svg
│   │   ├── fontawesome-webfont.ttf
│   │   ├── fontawesome-webfont.woff
│   │   └── fontawesome-webfont.woff2
│   ├── helper.css
│   ├── owl.carousel.css
│   ├── owl.theme.css
│   ├── owl.transitions.css
│   ├── style.blue.css
│   ├── style.default.css
│   ├── style.green.css
│   ├── style.pink.css
│   ├── style.red.css
│   ├── style.sea.css
│   └── style.violet.css
├── img
│   ├── hello_world.jpg
│   └── rms.png
├── index.html
├── index.xml
├── js
│   ├── bootstrap.min.js
│   ├── ekko-lightbox.js
│   ├── front.js
│   ├── imagesloaded.pkgd.min.js
│   ├── jquery.cookie.js
│   ├── jquery.min.js
│   ├── jquery.scrollTo.min.js
│   ├── main.js
│   ├── masonry.pkgd.min.js
│   └── owl.carousel.min.js
├── post
│   ├── hello-world
│   │   └── index.html
│   ├── index.xml
│   └── rms
│       └── index.html
├── scss
│   └── main.scss
└── sitemap.xml

続く