Ubuntu19.10にhugoをインストールしてテンプレートを適応する
- 作成日 2019.12.10
- 更新日 2022.03.31
- hugo ubuntu
- hugo, ubuntu19.10

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 使ってみる」に変更されます

-
前の記事
React.js material-uiの導入と使い方 2019.12.09
-
次の記事
Vue.js Bootstrap-Vueを利用したプロジェクトの作成 2019.12.11
コメントを書く