Ubuntu19.10にhugoをインストールしてテンプレートを適応する

Ubuntu19.10にhugoをインストールしてテンプレートを適応する

Ubuntuに 静的サイトジェネレータであるhugoのインストール手順です。現時点ではsnapの方に最新版があったので、そちらからインストールしてます。今回はminmalというテンプレートを適応してみます。

環境

  • OS  Ubuntu19.10

静的サイトジェネレータとは

DBをもたずにMarkdownなどのテキストファイルで記述されたファイルにより、HTML/css/javascriptを生成しWEBページの制作が行える。テンプレートの利用なども可能で、DBを利用しないため高速化が期待できる

snapとaptのhugoのバージョン確認

snapとapt両方のパッケージでバージョンを確認

## snapで確認
snap info hugo

<出力結果>
name:      hugo
summary:   A Fast and Flexible Static Site Generator built with love by bep, spf13 and friends in Go.
publisher: Hugo Authors
contact:   https://discourse.gohugo.io/
license:   Apache-2.0
description: |
  Hugo is a static HTML and CSS website generator written in Go. It is
  optimized for speed, easy use and configurability. Hugo takes a directory
  with content and templates and renders them into a full HTML website.
snap-id: t6YzDBM3com27avINGL5OD6ZKKG654ez
channels:
  stable:             0.59.1     2019-10-31 (6007) 29MB -
  candidate:          ↑                                 
  beta:               ↑                                 
  edge:               0.60.0-DEV 2019-11-14 (6199) 29MB -
  extended/stable:    0.59.1     2019-10-31 (6009) 30MB -
  extended/candidate: ↑                                 
  extended/beta:      ↑                                 
  extended/edge:      0.60.0-DEV 2019-11-14 (6198) 30MB -
## aptで確認
apt search hugo

<出力結果>
ソート中... 完了
全文検索... 完了  
game-data-packager/eoan,eoan 63 all
  Installer for game data files

gargoyle-free/eoan 2011.1b-1 amd64
  graphical player for Interactive Fiction games

golang-github-bep-go-tocss-dev/eoan,eoan 0.6.0-1 all
  simple-to-use LibSass Go API

golang-github-gohugoio-hugo-dev/eoan,eoan 0.57.2-1 all
  Go source code and library of Hugo the static website generator

golang-github-spf13-cast-dev/eoan,eoan 1.3.0-1 all
  Safe and easy casting from one type to another in Go

hugo/eoan 0.57.2-1 amd64
  Fast and flexible Static Site Generator written in Go

staticsite/eoan,eoan 0.5-1 all
  Static site generator

snapの方が最新バージョンであることを確認。

公式でも最新のバージョンを確認したところ

v0.59.1が最新なので、今回はsnapからインストールする

インストール

snapからインストールする

## channelを指定する
snap install hugo --channel=extended

## バージョン確認
hugo version

<出力結果>
Hugo Static Site Generator v0.59.1/extended linux/amd6

v0.59.1がインストールされていることが確認できます。

hugoテンプレート利用

テンプレートを利用してみる。

まずサイトを作成します

sudo hugo new site testsite

<出力結果>
Congratulations! Your new Hugo site is created in /home/testuser/testsite

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

サイトに移動し、gitよりテンプレートを取得します

## 移動
cd testsite

## リポジトリ作成
git init

こちらの公式にテンプレートがたくさんありますが、今回はminimalを利用します。

またクローンすると管理が2重になるので、git submodule addコマンド利用します

## submoduleコマンド
git submodule add https://github.com/calintat/minimal.git themes/minimal

## コミットしておく
git add --all
git commit -m "add hugo theme"

## サンプルをコピーしてドキュメントルートに配置する
cp -r themes/minimal/exampleSite/* ./

簡易サーバーを起動して、確認

## サーバー起動
hugo server

ブラウザよりhttp://localhost:1313/にアクセスすると下記の画面が表示されます

Minimalの文字を変更してみる

/testsite直下にあるconfig.tomlを編集する

baseURL = "http://example.com/"
languageCode = "en-us"
title = "minimal"

↓ 下記に変更

title = "hugo 使ってみる"

リロードするとテキストが「hugo 使ってみる」に変更されます