LoginSignup
39

More than 5 years have passed since last update.

posted at

updated at

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

なぜ、Hugo

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)とのことなので、

$ 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

この先は・・

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


Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
39