More than 5 years have passed since last update.

[作業中] 静的サイトジェネレーターHugoでgithubページ

Last updated at 2015-05-31Posted at 2015-01-12

なぜ、Hugo

静的サイトジェネレーターを集めたサイトで割合人気があった(スターが多かった)
本家のサイトは今風(色使いとかさておき)。
http://gohugo.io/
サイト構築例

gohugoサイトの文書もしっかりしている

使いこなせればよさ気との先達のブログ

Installing Hugo

Hugo githubのInstalling Hugo (binary)からインストールするのが一番早そう。
Goらしくバイナリひとつなので指示通り、ダウンロード後解凍したバイナリを/usr/local/binに移動。
今日時点では:

sudo mv hugo_0.12_linux_386 /usr/local/bin
alias hugo=hugo_0.12_linux_38
hugo help

Hugo Themes

http://themes.gohugo.io (coming soon)とのことなので、

とりあえず一括でテーマをインストール。

git clone --recursive https://github.com/spf13/hugoThemes.git themes

テーマlanyonのフォルダ構成例

$ tree lanyon

lanyon
	├── CONTRIBUTING.md
	├── LICENSE.md
	├── README.md
	├── config.json
	├── content
	│   ├── fixed
	│   │   ├── 404.md
	│   │   ├── about.md
	│   │   └── altab.md
	│   └── post
	│       ├── 2013-12-31-whats-jekyll.md
	│       ├── 2014-01-01-example-content.md
	│       └── 2014-01-02-introducing-lanyon.md
	├── layouts
	│   ├── fixed
	│   │   └── single.html
	│   ├── index.html
	│   ├── indexes
	│   │   └── post.html
	│   ├── partials
	│   │   ├── default_foot.html
	│   │   ├── default_head.html
	│   │   ├── head.html
	│   │   └── sidebar.html
	│   ├── post
	│   │   ├── li.html
	│   │   └── single.html
	│   └── rss.xml
	└── static
	    ├── assets
	    │   ├── apple-touch-icon-144-precomposed.png
	    │   └── favicon.ico
	    └── css
		├── lanyon.css
		├── poole.css
		└── syntax.css

テーマの選び方。

IEしばりとかないなら、html5テーマから出発でいいか。

$ cat ./html5/layouts/single.html 
<!DOCTYPE html>
<html>
	{{ template "theme/parts/head.html" . }}
	<body>
		{{ template "theme/parts/header.html" . }}
		{{ template "theme/parts/nav.html" . }}
		<main>
			<header>
				<h1>{{ .Title }}</h1>
			</header>
			{{ .TableOfContents }}
			<article>
				{{ .Content }}
			</article>
			<footer>
				<p><span id="footer-copyright">{{ .Params.copyright }}</span><span id="footer-license">{{ .Params.license }}</span></p>
			</footer>
		</main>
		{{ template "theme/parts/footer.html" . }}
	</body>
</html>

あとは、まずは、全体構成を決めてるっぽい、partial　のHTMLを眺めて考える、とか。

 $ find . -name partials
./hugo-uno/layouts/partials
./tinyce/layouts/partials
./stou-dk-theme/layouts/partials
./redlounge/layouts/partials
./persona/layouts/partials
./journal/layouts/partials
./herring-cove/layouts/partials
./lanyon/layouts/partials
./hugo-incorporated/layouts/partials
./liquorice/layouts/partials
./hyde/layouts/partials
./hyde-x/layouts/partials
./purehugo/layouts/partials
./hugoscroll/layouts/partials

この先は・・

冷静な意見付きの作業記録をちら見しながら・・・

My alternative :
nanocで作成したサイトをGitHub Pagesで公開する

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up