Getting Started

準備

HUGOとHTML Help Workshopのインストールがまだであれば、まずはインストールを行います。その後、hugo.exeおよびhhc.exeにPATHを通しておきます。

インストール

新しいプロジェクトを作成します。ここではmyhelpという名称としてみましょう。

hugo new site myhelp
cd myhelp

MDHELPテーマをインストールする

HUGO公式ドキュメントに沿ってgitでテーマを取得します。

git init
git submodule add https://github.com/mochimochiki/mdhelp themes/mdhelp

gitを利用しない場合、最新のzipもしくは任意のReleaseをダウンロード・解凍し、themes\mdhelpに配置してください。

必要なファイルをコピーする

以下のコマンドでヘルプのビルドに必要なツール類とconfigをコピーしてmyhelpプロジェクトに配置します。また、デフォルトのconfig.tomlは削除しておきます。

xcopy /s themes\mdhelp\exampleSite\config config\
xcopy /s themes\mdhelp\exampleSite\CI CI\
rm config.toml

最初のサイトの作成

config.tomlの編集

config\_default\config.tomlを開き、以下の行をコメントアウトもしくは削除します。

themesdir = "../.."

ヘルプのタイトルをMyHelpに変更します。各言語のtitleの設定を以下のように編集します。

[languages.jp]
  ...
  title = "MyHelp"
  ...
[languages.en]
  ...
  title = "MyHelp"
  ...

その他のconfigパラメータについてはヘルプの構成およびHUGO公式ドキュメントなどを参照してください。

トップページの作成

contentディレクトリ下にjp,enディレクトリを作成します。

mkdir content\jp
mkdir content\en

jpおよびen下に_index.mdファイルを作成して以下のように編集し、文字コードUTF-8で保存します。

---
title: "My Help"
---

# My Help

My Help サイトです。


---
title: "My Help"
---

# My Help

This is My Help.

記事の作成

次に記事を作成します。jpおよびen下にHello.mdを作成して以下のように編集します。

---
title: "Hello"
weight: 10
---

## Hello

こんにちは。

---
title: "Hello"
weight: 10
---

## Hello

Hello World !
Note
記事のファイル名はASCII文字で記述してください。日本語ファイル名をつけるとヘルプが正常にビルドされません。

サイトをプレビューする

ここまでで一度プレビューしてみましょう。以下のコマンドを実行し、ブラウザでhttp://localhost:1313/およびhttp://localhost:1314/にアクセスします。

hugo server

Hello.mdを適当に編集して保存してみます。LiveReloadがかかり、ブラウザ上のプレビューも更新されることを確認します。原稿はこのようにプレビューで執筆していきます。

ディレクトリと2番目の記事を追加する

jp下にsecond_contentディレクトリを作成し、_index.mdを作成して以下のように編集します。

---
title: "Second Chapter"
chapter: true
weight: 20
---

# Second Chapter

2番目のチャプターです。
Note
ディレクトリ名はASCII文字で記述してください。日本語を使用するとヘルプが正常にビルドされません。

またsecond.mdを作成して以下のように編集して保存します。

---
title: "2番目の記事"
weight: 10
---

## 2番目の記事

こんにちは。これは2番目の記事です。

再度プレビューを表示し、2番目の記事が表示されることを確認します。

hugo server

ヘルプの作成

Ctrl+C でhugoのプレビューを終了し、以下のコマンドを実行してヘルプをビルドします。

.\CI\build.bat chm

が成果物のヘルプです。確認してみましょう。

© 2020 - 2021 mochimo.GitHub