HugoでWebサイトの生成

Hugoについて

HugoはGo言語で実装されたWebサイト構築フレームワークです．Markdown形式で記事を書き，静的なWebサイトを生成することができます．

学科サーバーでWebページを公開

Hugoで生成したWebサイトは学科サーバーで公開することができます．このシステム管理部のページもHugoで生成し学科サーバーで公開しています． 以下で公開の手順を説明します．

GitLabリポジトリの作成

学科のGitLabにWebページ用のリポジトリを作成します．以下のURLから学科のGitLabにアクセスしてください．

GitLab(ie-webグループ): https://gitlab.ie.u-ryukyu.ac.jp/ie-web

(GitLabにサインインしていない場合は学科のアカウントでサインインしてください．)

アクセスするとwebコンテンツグループの一覧が表示されるので，自分が属すると思われるグループをクリックし移動してください．

(例)

  • 学生でe20
    • student -> e20
  • 先生
    • teacher

移動したら，そこでNew projectを押してリポジトリを作成します． プロジェクト名は学生の場合，自分のID(e185742など)にすると良いでしょう． プロジェクト名以外の設定は特に設定する必要はありません． Create projectを押します．

これでWebサイトを公開するためのリポジトリを作成することができました．次はローカルでHugoを使ってWebサイトの生成をします．

Webサイトの生成

Webサイトの生成にはHugoを用います． Hugoはbrewでインストールすることができます．下記コマンドを打ち，インストールしてください．

$brew install hugo

インストールしたら早速Webサイトを生成しましょう．以下のコマンドで新規Webサイトを生成することができます．(my-siteには自分が設定したいサイト名を入れます．)

$hugo new site my-site

コマンドを実行するとmy-siteディレクトリができているので入って中身を見てみます．

$cd my-site
$ls
archetypes/  config.toml  content/     data/        layouts/     static/      themes/

config.toml

  • サイトの設定を書く．

content/

  • この中に記事を作っていく．

themes/

  • hugoのテーマを置く．

構成の詳しい情報はHugoの公式をご覧ください．

https://gohugo.io/getting-started/directory-structure/

git init

$git init を実行して、git repository を作成します。

テーマの設定

次にテーマの設定をします． Hugo Themesにアクセスして好きなテーマを選びましょう．

使いたいテーマが決まったら，そのテーマのGitHubにアクセスしてクローン用のURLをコピーします． Hugo Themesでは，テーマをクリックしてHomepageを押すとGitHubページにアクセスすることができます．また，GitHubでは緑色のCodeを押すとクローン用のURLが表示されます．

テーマをthemes/にクローンします．(以下はNotrackテーマをサブモジュールとしてクローンする例です．)

$git submodule add https://github.com/gevhaz/hugo-theme-notrack.git themes/hugo-theme-notrack

テーマをクローンしたらconfig.tomlに

# Notrackテーマの場合
theme = "hugo-theme-notrack"

のように追記をし，テーマ設定をします．

.gitignoreの設定

生成ファイルがpushされないようにmy-site直下に.gitignoreファイルを作成します． .gitignore(頭に.が付きます)という名前で作成し以下の内容を記述しておきます．

/public/
/resources/_gen/
hugo_stats.json

サイト全体の設定

config.tomlにサイト全体の設定を下記のように記述します． baseURLの末尾XXXXは自分のIDで置き換えてください．titleは自分のお好みで． blogというディレクトリに記事を入れる設定です．

baseURL = "https://ie.u-ryukyu.ac.jp/XXXX"
title = "matayu-blog"
theme = "hugo-theme-notrack"
languageCode = "ja"
defaultContentLanguage = "ja"
hasCJKLanguage = true
mainSections = ["blog"]

.gitlab-ci.ymlの設定

.gitlab-ci.yml(頭に.が付きます)という名前でmy-site直下に作成し以下の内容を記述しておきます．XXXXの部分は自分のIDに置き換えます．

variables:
  GIT_SUBMODULE_STRATEGY: recursive

stages:
  - test

deployToHugo:
  stage: test
  script:
  - hugo
  - rsync -rlptvzP public/ syskan@christina.ie.u-ryukyu.ac.jp:/mnt/cephfs/ie-web/ie/XXXX
  - rm -rf public
  only:
  - main

記事の投稿

先に記事を投稿しておきます．次のコマンドでcontent以下にblogというディレクトリを作成し，20210203.mdという記事ファイルを作成することができます．(config.ymlの設定で指定してあるものであればblogでなくても良いです．)

$hugo new blog/20210203.md

作成したmdファイルを開いて，記事の内容を書きましょう(blogディレクトリを作成した場合，content/blog以下にあります)．生成直後は以下のようになっています．

---
title: '20210203'
date: 2021-02-03T17:48:31+09:00
Tags: []
Categories: []
draft: true
---

記事はMarkdown記法で書くことができます．draft: trueは下書き設定でtrueだと公開されません．draft: trueごと削除するか，falseにしておきましょう．

---
title: '20210203'
date: 2021-02-03T17:48:31+09:00
Tags: []
Categories: []
---
シス管に入りたいな〜

Webサイトを公開する

ローカルでのWebサイトの準備は完了しました．早速公開してみましょう． 公開する前にローカルでどのようなサイトが出来上がっているか確認します． 以下のコマンドを打ち，ローカルでWebサーバーを立てます．

$hugo server

すると以下のようなメッセージが表示されるので，表示されているURL(下記の例ではhttp://localhost:1313/XXXX/)をコピペしてWebブラウザで確認してみましょう．

・・・
Web Server is available at http://localhost:1313/XXXX/ (bind address 127.0.0.1)
Press Ctrl+C to stop

確認ができたら公開します． my-site直下で次のコマンドを打ちます．(これらのコマンドはGitLabのリポジトリを作成したときに最初に表示されるページにも記載されています．)

$git remote add origin リポジトリのURL
$git add .
$git commit -m "Initial commit"
$git branch -M 'main'
$git push -u origin main

打ち終えたらGitLabのリポジトリのページを見て，緑の丸チェックがコミットメッセージの横に表示されていることを確認します(赤のバツがついていたら失敗しています．バツを押してログを確認しましょう)．

その後学科のWebをブラウザで開いて，自分のサイトが表示されていれば公開成功です！

リポジトリ名がe185742の場合のURL:

https://ie.u-ryukyu.ac.jp/e185742/

Updated on 01 Jan 0001