List of install - Baldanders.info
tag:Baldanders.info,2015-09-11:/tags
2015-09-11T17:58:23+09:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
インストールから Hello World まで
tag:Baldanders.info,2015-09-11:/hugo/hello/
2015-09-11T08:58:23+00:00
2015-09-11T08:58:23+00:00
自サイトのブログ機能を Hugo で外出しにする作業を行うにあたって,いろいろ試しながら作業している。ここではその時のメモを公開する。
Spiegel
/profile/
<p>(初出: <a href="http://qiita.com/spiegel-im-spiegel/items/eac7bf2a3c0fc19afcbf">ゼロから始める Hugo — インストールから Hello World まで - Qiita</a>)</p>
<p><a href="https://baldanders.info/blog/000870/">私の本家サイトのブログ機能を外出しにする作業</a>を行うにあたり,ツールとしては <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> を使うことにしたのだが,初めて使うツールなので,いろいろ試しながら作業している。
ここではその時のメモを公開する。</p>
<h2 id="install">Hugo のインストール</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の実行モジュールは公式サイトから取得できるのだが Go 言語環境のある方は是非 <code>go get</code> から取得することをお勧めする。
<a href="https://github.com/spf13/hugo">Hugo の repository</a> はサイトのドキュメントのビルド環境も同梱されているため色々と参考になる。</p>
<p>なお <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では非常に多くのパッケージを利用していて,取得の際には git の他に Mercurial が必要である(参照: 「<a href="http://qiita.com/spiegel-im-spiegel/items/a52a47942fd3946bb583">はじめての Go 言語 (on Windows) その3</a>」)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\workspace>mkdir hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace>cd hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace\hugo>SET GOPATH=C:\workspace\hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace\hugo>go get -v github.com/spf13/hugo
</span></span><span class="line"><span class="cl">github.com/spf13/hugo (download)
</span></span><span class="line"><span class="cl">github.com/kardianos/osext (download)
</span></span><span class="line"><span class="cl">github.com/spf13/afero (download)
</span></span><span class="line"><span class="cl">github.com/spf13/cast (download)
</span></span><span class="line"><span class="cl">github.com/spf13/jwalterweatherman (download)
</span></span><span class="line"><span class="cl">github.com/spf13/cobra (download)
</span></span><span class="line"><span class="cl">github.com/cpuguy83/go-md2man (download)
</span></span><span class="line"><span class="cl">github.com/russross/blackfriday (download)
</span></span><span class="line"><span class="cl">github.com/shurcooL/sanitized_anchor_name (download)
</span></span><span class="line"><span class="cl">github.com/inconshreveable/mousetrap (download)
</span></span><span class="line"><span class="cl">github.com/spf13/pflag (download)
</span></span><span class="line"><span class="cl">github.com/spf13/fsync (download)
</span></span><span class="line"><span class="cl">github.com/PuerkitoBio/purell (download)
</span></span><span class="line"><span class="cl">github.com/opennota/urlesc (download)
</span></span><span class="line"><span class="cl">github.com/miekg/mmark (download)
</span></span><span class="line"><span class="cl">github.com/BurntSushi/toml (download)
</span></span><span class="line"><span class="cl">Fetching https://gopkg.in/yaml.v2?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://gopkg.in/yaml.v2?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "gopkg.in/yaml.v2": found meta tag main.metaImport{Prefix:"gopkg.in/yaml.v2", VCS:"git", RepoRoot:"https://gopkg.in/yaml.v2"} at https://gopkg.in/yaml.v2?go-get=1
</span></span><span class="line"><span class="cl">gopkg.in/yaml.v2 (download)
</span></span><span class="line"><span class="cl">github.com/spf13/viper (download)
</span></span><span class="line"><span class="cl">github.com/kr/pretty (download)
</span></span><span class="line"><span class="cl">github.com/kr/text (download)
</span></span><span class="line"><span class="cl">github.com/magiconair/properties (download)
</span></span><span class="line"><span class="cl">github.com/mitchellh/mapstructure (download)
</span></span><span class="line"><span class="cl">Fetching https://golang.org/x/text/transform?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://golang.org/x/text/transform?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "golang.org/x/text/transform": found meta tag main.metaImport{Prefix:"golang.org/x/text", VCS:"git", RepoRoot:"https://go.googlesource.com/text"} at https://golang.org/x/text/transform?go-get=1
</span></span><span class="line"><span class="cl">get "golang.org/x/text/transform": verifying non-authoritative meta tag
</span></span><span class="line"><span class="cl">Fetching https://golang.org/x/text?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://golang.org/x/text?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">golang.org/x/text (download)
</span></span><span class="line"><span class="cl">Fetching https://golang.org/x/text/unicode/norm?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://golang.org/x/text/unicode/norm?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "golang.org/x/text/unicode/norm": found meta tag main.metaImport{Prefix:"golang.org/x/text", VCS:"git", RepoRoot:"https://go.googlesource.com/text"} at https://golang.org/x/text/unicode/norm?go-get=1
</span></span><span class="line"><span class="cl">get "golang.org/x/text/unicode/norm": verifying non-authoritative meta tag
</span></span><span class="line"><span class="cl">bitbucket.org/pkg/inflect (download)
</span></span><span class="line"><span class="cl">github.com/dchest/cssmin (download)
</span></span><span class="line"><span class="cl">github.com/eknkc/amber (download)
</span></span><span class="line"><span class="cl">github.com/yosssi/ace (download)
</span></span><span class="line"><span class="cl">github.com/spf13/nitro (download)
</span></span><span class="line"><span class="cl">github.com/gorilla/websocket (download)
</span></span><span class="line"><span class="cl">Fetching https://gopkg.in/fsnotify.v1?go-get=1
</span></span><span class="line"><span class="cl">Parsing meta tags from https://gopkg.in/fsnotify.v1?go-get=1 (status code 200)
</span></span><span class="line"><span class="cl">get "gopkg.in/fsnotify.v1": found meta tag main.metaImport{Prefix:"gopkg.in/fsnotify.v1", VCS:"git", RepoRoot:"https://gopkg.in/fsnotify.v1"} at https://gopkg.in/fsnotify.v1?go-get=1
</span></span><span class="line"><span class="cl">gopkg.in/fsnotify.v1 (download)
</span></span><span class="line"><span class="cl">github.com/shurcooL/sanitized_anchor_name
</span></span><span class="line"><span class="cl">github.com/spf13/afero
</span></span><span class="line"><span class="cl">github.com/inconshreveable/mousetrap
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/bufferpool
</span></span><span class="line"><span class="cl">github.com/kr/text
</span></span><span class="line"><span class="cl">github.com/kardianos/osext
</span></span><span class="line"><span class="cl">github.com/spf13/jwalterweatherman
</span></span><span class="line"><span class="cl">github.com/spf13/pflag
</span></span><span class="line"><span class="cl">github.com/russross/blackfriday
</span></span><span class="line"><span class="cl">github.com/opennota/urlesc
</span></span><span class="line"><span class="cl">github.com/BurntSushi/toml
</span></span><span class="line"><span class="cl">github.com/PuerkitoBio/purell
</span></span><span class="line"><span class="cl">gopkg.in/yaml.v2
</span></span><span class="line"><span class="cl">github.com/spf13/cast
</span></span><span class="line"><span class="cl">github.com/kr/pretty
</span></span><span class="line"><span class="cl">github.com/magiconair/properties
</span></span><span class="line"><span class="cl">github.com/spf13/fsync
</span></span><span class="line"><span class="cl">github.com/cpuguy83/go-md2man/md2man
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/hugofs
</span></span><span class="line"><span class="cl">github.com/mitchellh/mapstructure
</span></span><span class="line"><span class="cl">golang.org/x/text/transform
</span></span><span class="line"><span class="cl">bitbucket.org/pkg/inflect
</span></span><span class="line"><span class="cl">github.com/dchest/cssmin
</span></span><span class="line"><span class="cl">github.com/miekg/mmark
</span></span><span class="line"><span class="cl">github.com/eknkc/amber/parser
</span></span><span class="line"><span class="cl">github.com/spf13/cobra
</span></span><span class="line"><span class="cl">github.com/yosssi/ace
</span></span><span class="line"><span class="cl">golang.org/x/text/unicode/norm
</span></span><span class="line"><span class="cl">github.com/spf13/nitro
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/parser
</span></span><span class="line"><span class="cl">github.com/spf13/viper
</span></span><span class="line"><span class="cl">github.com/eknkc/amber
</span></span><span class="line"><span class="cl">github.com/gorilla/websocket
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/utils
</span></span><span class="line"><span class="cl">gopkg.in/fsnotify.v1
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/transform
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/watcher
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/livereload
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/helpers
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/source
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/target
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/tpl
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/hugolib
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/create
</span></span><span class="line"><span class="cl">github.com/spf13/hugo/commands
</span></span><span class="line"><span class="cl">github.com/spf13/hugo
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\workspace\hugo>bin\hugo.exe version
</span></span><span class="line"><span class="cl">Hugo Static Site Generator v0.15-DEV BuildDate: 2015-09-05T13:45:44+09:00
</span></span></code></pre></div><p>作成した実行モジュールは,作成された場所に <code>PATH</code> を通すか, <code>PATH</code> の通った場所にコピーすればよい。</p>
<h2 id="env">作業環境の作成</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 用の作業環境を作るには <code>hugo new site</code> コマンドを起動する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:>hugo new site C:\hugo-env\www
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:>cd C:\hugo-env\www
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p>ここで <code>config.toml</code> はサイト設定用のファイルである。初期値は以下のようになっている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ini" data-lang="ini"><span class="line"><span class="cl"><span class="na">baseurl</span> <span class="o">=</span> <span class="s">"http://replace-this-with-your-hugo-site.com/"</span>
</span></span><span class="line"><span class="cl"><span class="na">languageCode</span> <span class="o">=</span> <span class="s">"en-us"</span>
</span></span><span class="line"><span class="cl"><span class="na">title</span> <span class="o">=</span> <span class="s">"My New Hugo Site"</span>
</span></span></code></pre></div><p>なお, TOML 形式のファイルの読み書きは以下が参考になる。</p>
<ul>
<li><a href="http://qiita.com/b4b4r07/items/77c327742fc2256d6cbe">設定ファイル記述言語 TOML - Qiita</a></li>
</ul>
<p>この中で必須なのは baseurl のみで,これがないとビルドエラーになる(ただし <code>--baseUrl</code> オプションを付ければ回避できる)。
今回は <code>config.toml</code> を以下のようにセットする。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ini" data-lang="ini"><span class="line"><span class="cl"><span class="na">baseurl</span> <span class="o">=</span> <span class="s">"http://hello.example.com/"</span>
</span></span><span class="line"><span class="cl"><span class="na">languageCode</span> <span class="o">=</span> <span class="s">"ja"</span>
</span></span><span class="line"><span class="cl"><span class="na">title</span> <span class="o">=</span> <span class="s">"Hello World!"</span>
</span></span></code></pre></div><p>では,いきなりビルドしてみよう(えー)</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">0 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">in 7 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ 404.html
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│ index.xml
</span></span><span class="line"><span class="cl">│ sitemap.xml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p><code>public</code> フォルダとその下に4つのファイルが作成されている(ちなみに出力先は <code>-d</code> または <code>--destination</code> オプションで変更できる)。
現時点では <code>404.html</code> と <code>index.html</code> は空。</p>
<p><code>index.xml</code> は feed 用のファイルで RSS 2.0 形式で書かれている(何故か atom の語彙を使っている)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://hello.example.com/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p><code>sitemap.xml</code> は文字通りサイトマップ記述ファイル(SEO 用?)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><urlset</span> <span class="na">xmlns=</span><span class="s">"http://www.sitemaps.org/schemas/sitemap/0.9"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><url></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><loc></span>http://hello.example.com/<span class="nt"></loc></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><priority></span>0<span class="nt"></priority></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></url></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nt"></urlset></span>
</span></span></code></pre></div><h3 id="server-mode">サーバモード</h3>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では <code>hugo server</code> コマンドによりサーバモードで起動する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo server
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">0 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">in 7 ms
</span></span><span class="line"><span class="cl">Serving pages from C:\hugo-env\www\public
</span></span><span class="line"><span class="cl">Web Server is available at http://127.0.0.1:1313/
</span></span><span class="line"><span class="cl">Press Ctrl+C to stop
</span></span></code></pre></div><p>この状態で <code>http://127.0.0.1:1313/</code> をブラウザで開けばいいのだが,現時点では <code>index.html</code> が空なので何も表示されない。
ちなみに,この状態の <code>index.xml</code> は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://localhost:1313/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://localhost:1313/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p>となっている。
URL が変更されていることにお気づきだろうか。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> は動作モードによって URL を自動的に書き換えてくれるのでデバッグが容易である。
ただしサーバモードの状態で本番環境に deploy しようとすると大変なことになるのでご注意を。
deploy する前には必ずビルドしよう(またはビルド結果の出力先を分ける)。</p>
<p>個人で作業する場合はこれで問題ないが,デバッグ用サーバを共有する場合には <code>http://localhost:1313/</code> では都合が悪いので <code>--bind</code> および <code>--port</code> オプションを付加する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo server --bind="hostname" --port=8080 --watch
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">0 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">in 8 ms
</span></span><span class="line"><span class="cl">Watching for changes in C:\hugo-env\www/{data,content,layouts,static}
</span></span><span class="line"><span class="cl">Serving pages from C:\hugo-env\www\public
</span></span><span class="line"><span class="cl">Web Server is available at http://hostname:8080/
</span></span><span class="line"><span class="cl">Press Ctrl+C to stop
</span></span></code></pre></div><p>これで <code>http://hostname:8080/</code> でアクセスできるようになる。
ちなみに <code>--watch</code> オプションを付加すると,入力フォルダを監視して変更があればリコンパイルする。便利!</p>
<h2 id="template">はじめてのテンプレート</h2>
<p><code>index.html</code> を生成するにはテンプレートを用意する必要がある。
<code>index.html</code> のテンプレートは <code>layouts</code> フォルダに <code>index.html</code> というファイル名で配置する(安直!)</p>
<p>それじゃあ,早速テンプレートを組んでみる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>Hello Hugo World!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p><code>{{ }}</code> で囲まれている部分が埋め込み構文だ。
たとえば <code>{{ .Title }}</code> にはタイトルが入る。
今回はトップページなので, <code>config.toml</code> で <code>title</code> に設定した文字列が入る。</p>
<p><code>{{ with .Site.LanguageCode }} ... {{ else }} ... {{ end }}</code> はいわゆる with 構文ってやつ<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。
これ便利だよね。ちなみに <code>with</code> で指定する変数が存在しない場合は <code>{{ else }}</code> 以降が走る。
似た書式で <code>{{ if .Site.LanguageCode }} ... {{ else }} ... {{ end }}</code> もあるが, <code>with</code> とは変数のスコープが異なるので注意(慣れるまでは結構ハマった)。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ if .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ .Site.LanguageCode }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span></code></pre></div><p>これをビルドした結果はこうなる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>Hello Hugo World!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>ちなみに <code>config.toml</code> で <code>baseurl</code> 以外を削除してビルドするとこうなる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>Hello Hugo World!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>埋め込み構文がどのように機能しているか分かると思う。</p>
<h3 id="404">404.html をどうしよう</h3>
<p><code>404.html</code> はページが存在しない場合(404)に代わりに表示するページである。
普通 404 では Web サーバで決められたページを表示するのだが, GitHub Pages のようにサイトのトップページにある <code>404.html</code> を表示してくれる場合もある。
なら <code>404.html</code> を空っぽにしておくわけにはいかないよねぇ。</p>
<p>固定の内容なら <code>static</code> フォルダ直下に <code>404.html</code> を置く手もある(<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では <code>static</code> フォルダ以下のファイルはそのままコピーされるが <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> のコントロール外となる)。
また, <code>layouts</code> フォルダ直下にテンプレートを置く手もある。たとえばこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ .Hugo.Generator }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>{{ with .Site.Params.error404 }}<span class="p"><</span><span class="nt">p</span><span class="p">></span>{{ . }}<span class="p"></</span><span class="nt">p</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>これをビルドするとこんな感じになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"generator"</span> <span class="na">content</span><span class="o">=</span><span class="s">"Hugo 0.15-DEV"</span> <span class="p">/></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>404 Page not found<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>あると思った? 残念! 404 でした。<span class="p"></</span><span class="nt">p</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><h2 id="post">記事を書く</h2>
<p>さて,いよいよ記事を書いてみる。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では今どきの流行にのっとって Markdown 形式のファイルを入力ファイルにしている。
自前でファイルを用意してもよいが,新規に作成するなら <code>hugo new</code> コマンドで作成するのがよいだろう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo new hello.md
</span></span><span class="line"><span class="cl">C:\hugo-env\www\content\hello.md created
</span></span></code></pre></div><p>作成されたファイルを見てみると</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">date = "2015-09-05T16:40:41+09:00"
</span></span><span class="line"><span class="cl">draft = true
</span></span><span class="line"><span class="cl">title = "hello"
</span></span><span class="line"><span class="cl">+++
</span></span></code></pre></div><p>などとなっている。</p>
<p><code>+++</code> で囲まれている部分は “front matter” と呼ばれている領域で,記事ごとの設定情報を格納する。
<code>+++</code> の場合は TOML, <code>---</code> の場合は YAML, <code>{ }</code> で挟んである場合は JSON として解釈されるようだ。</p>
<p>このファイルに記事を入力する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">date = "2015-09-05T16:40:41+09:00"
</span></span><span class="line"><span class="cl">draft = false
</span></span><span class="line"><span class="cl">title = "Hello!"
</span></span><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">ようこそ, [Hugo](https://gohugo.io/) の世界へ!
</span></span></code></pre></div><p>草稿記事の場合は <code>draft</code> は <code>true</code> のままでよいが,そうでない場合は <code>false</code> にすること。
ちなみに <code>-D</code> または <code>--buildDrafts</code> オプションを付けてビルドすると草稿版も含めて出力される。
先ほどのサーバモードと組み合わせてデバッグに使うとよいだろう。</p>
<p>草稿(<code>draft</code>)状態の解除は手動でもいいのだが,<code>hugo undraft</code> コマンドを使うてもある。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo undraft content/hello.md
</span></span></code></pre></div><p>このコマンドを使うと <code>date</code> の値が現在時刻に更新されるので注意。</p>
<p>では,ここでもいきなりビルドしてみる(えー)</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">1 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">in 42 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ 404.html
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─hello
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の標準では <code>hello.md</code> は <code>hello/index.html</code> に展開される。
これを deploy すると Web ブラウザからは <code>http://hello.example.com/hello/</code> でアクセスできることになる。
この path の展開のさせ方はいろいろ設定できるようなのだが,今回は割愛する。</p>
<p>現時点では <code>hello/index.html</code> は空。
まぁテンプレートがないから当たり前なのだが。
記事用のテンプレートは <code>layouts</code> フォルダ以下に <code>_default</code> フォルダを作成し,さらにその下に <code>single.html</code> を配置する。</p>
<p>それじゃあ,早速テンプレートを組んでみる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }} -- {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">></span>{{ .Content }}<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p><code>{{ .Title }}</code> には(今回は)記事のタイトルが入る。
<code>{{ .Content }}</code> は実際の記事の中身である。これでビルドすると</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>ようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>となる。
Feed はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><lastBuildDate></span>Sat, 05 Sep 2015 16:40:41 +0900<span class="nt"></lastBuildDate></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://hello.example.com/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><item></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/hello/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><pubDate></span>Sat, 05 Sep 2015 16:40:41 +0900<span class="nt"></pubDate></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><guid></span>http://hello.example.com/hello/<span class="nt"></guid></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>ようこそ, <span class="ni">&lt;</span>a href=<span class="ni">&#34;</span>https://gohugo.io/<span class="ni">&#34;&gt;</span>Hugo<span class="ni">&lt;</span>/a<span class="ni">&gt;</span> の世界へ!<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></item></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p>ちなみに front matter をまるっと削除してビルドすると</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span> -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>ようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8" standalone="yes" ?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span> <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><channel></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Hello World!<span class="nt"></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span>Recent content on Hello World!<span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><generator></span>Hugo -- gohugo.io<span class="nt"></generator></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><language></span>jp<span class="nt"></language></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><atom:link</span> <span class="na">href=</span><span class="s">"http://hello.example.com/index.xml"</span> <span class="na">rel=</span><span class="s">"self"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="nt">/></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><item></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><title></title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><link></span>http://hello.example.com/hello/<span class="nt"></link></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><pubDate></span>Mon, 01 Jan 0001 00:00:00 +0000<span class="nt"></pubDate></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"><guid></span>http://hello.example.com/hello/<span class="nt"></guid></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><description></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>ようこそ, <span class="ni">&lt;</span>a href=<span class="ni">&#34;</span>https://gohugo.io/<span class="ni">&#34;&gt;</span>Hugo<span class="ni">&lt;</span>/a<span class="ni">&gt;</span> の世界へ!<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="nt"></description></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></item></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="nt"></channel></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rss></span>
</span></span></code></pre></div><p>のような感じになる。
タイトルや日付の情報が欠落するがエラーにはならないようだ。</p>
<h3 id="list">記事の一覧をつくる</h3>
<p>ついでなので <code>index.html</code> に記事の一覧を表示するようにしよう。
テンプレートはこんな感じで書く。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>What's New<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ range first 15 .Site.Pages }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ .Permalink }}"</span><span class="p">></span>{{ .Title }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>{{ .Date.Format "2006-01-02" }}<span class="p"></</span><span class="nt">time</span><span class="p">></span>){{ if .Draft }} #Draft{{ end }}<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>これで最新の15記事を列挙できる。
で,ビルド結果はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>What's New<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>2015-09-05<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>これで大まかなテンプレートのイメージがつかめただろうか。</p>
<h2 id="html">【おまけ】 HTML ファイルをそのまま突っ込んだらどうなるの?</h2>
<p>というわけで,上で作成した <code>hello/index.html</code> を <code>hello2.html</code> として <code>content</code> フォルダに突っ込んでみた。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">2 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">0 tags created
</span></span><span class="line"><span class="cl">0 categories created
</span></span><span class="line"><span class="cl">in 16 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│ hello2.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─_default
</span></span><span class="line"><span class="cl">│ single.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─hello2
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p>おおう。
<code>hello2/index.html</code> に変換されている。
ルートの <code>index.html</code> ファイルはどうなっているだろう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>What's New<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>2015-09-05<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello2/"</span><span class="p">></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>0001-01-01<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>おおう。
残念な結果に。
でもこれってもしかして front matter つけりゃいいのか。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">date = "2015-09-05T18:00:00+09:00"
</span></span><span class="line"><span class="cl">draft = false
</span></span><span class="line"><span class="cl">title = "Hello! Part 2"
</span></span><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! Part 2 -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello! Part 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>再びようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>んで,ビルドしてみる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>What's New<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">style</span><span class="o">=</span><span class="s">"list-style:none;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello2/"</span><span class="p">></span>Hello! Part 2<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>2015-09-05<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://hello.example.com/hello/"</span><span class="p">></span>Hello!<span class="p"></</span><span class="nt">a</span><span class="p">></span> (<span class="p"><</span><span class="nt">time</span><span class="p">></span>2015-09-05<span class="p"></</span><span class="nt">time</span><span class="p">></span>)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>おおお!</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! Part 2 -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello! Part 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">></span><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! Part 2 -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello! Part 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>再びようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>おおう orz なんてこったい。
つまり,元の HTML ファイルからヘッダ等の要素を抜いて front matter を付加すれば見た目も保持できて <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> からも Controllable な状態になるってことか?</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">date = "2015-09-05T18:00:00+09:00"
</span></span><span class="line"><span class="cl">draft = false
</span></span><span class="line"><span class="cl">title = "Hello! Part 2"
</span></span><span class="line"><span class="cl">+++
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>再びようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span></code></pre></div><p>これでビルドしてみると</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"ja"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello! Part 2 -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello! Part 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span><span class="p">><</span><span class="nt">p</span><span class="p">></span>再びようこそ, <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://gohugo.io/"</span><span class="p">></span>Hugo<span class="p"></</span><span class="nt">a</span><span class="p">></span> の世界へ!<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>ふむむむむ。
これは古い資産を <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> に組み入れるのは結構骨かもなぁ。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>言語コードの指定の仕方は「<a href="http://www.kanzaki.com/docs/html/lang.html">言語コードと国コード</a>」が参考になる。日本の場合は <code>jp</code> ではなく <code>ja</code>。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>