Hugoの始め方

Hugoに関連する基本情報を網羅

 2019-07-27に投稿  |  1 分間  |  478 言葉  • 翻訳：en

Starting Hugo

create directory

hugo new site hogehoge
  • archetypes

default layout markdown.

  • config.toml

setting site file. default url for site and language, site title etc. this file add parameter for original setting.


baseurl = "http://hogehoge.com"
languageCode = "en-us"
titie = "My new Hugo Site"

[Params]
description = "site's description"
twitter_account = "*****"
github_account = "*****"
analytics = "*****"
  • content

create new markdwon files on this directory.

  • data

other setting data files. use by YAML, JSON, TOML.

  • layouts

default layout site.

  • static

css, js, images etc.

create orginal theme

  1. create html on layouts directory.
  2. create css on static directory.
  3. create new article on content directory.
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta characet="UTF-8">
    <title>My new Hugo Site</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>My new Hugo Site</h1>
    </header>

    <main>
      <article>
        <ul>
          <li><a href="#"><span>2016/02/10</span>article title10</a></li>
          <li><a href="#"><span>2016/02/09</span>article title9</a></li>
          <li><a href="#"><span>2016/02/08</span>article title8</a></li>
          <li><a href="#"><span>2016/02/07</span>article title7</a></li>
          <li><a href="#"><span>2016/02/06</span>article title6</a></li>
          <li><a href="#"><span>2016/02/05</span>article title5</a></li>
          <li><a href="#"><span>2016/02/04</span>article title4</a></li>
          <li><a href="#"><span>2016/02/03</span>article title3</a></li>
          <li><a href="#"><span>2016/02/02</span>article title2</a></li>
          <li><a href="#"><span>2016/02/01</span>article title1</a></li>
        </ul>
      </article>
      <nav>
        <a href="#">prev</a>
        <a href="#">next</a>
      </nav>
    </main>

    <footer>
      <small>copyright</small>
    </footer>
  </body>
</html>

partial about html

create “partials” directory on loyouts directory. header.html and footer.html etc.

read patials file

{{ partial "hogehoge.html" }}

{{ partial "header.html" }}
  <article>
    <ul>
      <li><a href="#"><span>2016/02/10</span>article title10</a></li>
      <li><a href="#"><span>2016/02/09</span>article title9</a></li>
      <li><a href="#"><span>2016/02/08</span>article title8</a></li>
      <li><a href="#"><span>2016/02/07</span>article title7</a></li>
      <li><a href="#"><span>2016/02/06</span>article title6</a></li>
      <li><a href="#"><span>2016/02/05</span>article title5</a></li>
      <li><a href="#"><span>2016/02/04</span>article title4</a></li>
      <li><a href="#"><span>2016/02/03</span>article title3</a></li>
      <li><a href="#"><span>2016/02/02</span>article title2</a></li>
      <li><a href="#"><span>2016/02/01</span>article title1</a></li>
    </ul>
  </article>
  <nav>
    <a href="#">prev</a>
    <a href="#">next</a>
  </nav>
{{ partial "footer.html" }}

preview original themes

cd hogehoge
hugo server --watch

read css

<!-- before -->
<link rel="stylesheet" href="style.css">
<!-- after -->
<link rel="stylesheet" href="{{ .Site.BaseURL }}/style.css">

create single page

create “_default” directory on layouts directory. create single.html on “_default” directory.

{{ partial "header.html" }}
<article>
  <header class="entry-header">
    <span class="entry-content">2016/02/01</span>
    <h1 class="entry-title">article title01</h1>
  </header>

  <div class="entry-content">
    <p>hogehoge</p>
  </div>
</article>
{{ partial "footer.html" }}

{{ partial "header.html" }}
<article>
  <header class="entry-header">
    <span class="entry-content">{{ .Date.Format "Jan 01, 2006" }}</span>
    <h1 class="entry-title">{{ .Title }}</h1>
  </header>

  <div class="entry-content">
    <p>{{ .Content }}</p>
  </div>
</article>
{{ partial "footer.html" }}

create content

create default article template

create “default.md” on archetpes directory.

date  = ""
title " ""

create article

hugo new hogehoge.md

view article list

create list.html on “_default” direactory.

<li><a href="{{ .Permalink }}">
 <span>{{ .Ddate.Format "Jan 02, 2006" }}</span>{{ .Title }}
</a></li>

{{ partial "header.html" }}
  <article>
    <ul>
      {{ range (.Paginator 10).Pages }}
        {{ .Render "list" }}
      {{ end }}
    </ul>
  </article>
  <nav>
    <a href="#">prev</a>
    <a href="#">next</a>
  </nav>
{{ partial "footer.html" }}

add Pagination

{{ partial "header.html" }}
  <article>
    <ul>
      {{ range (.Paginator 10).Pages }}
        {{ .Render "list" }}
      {{ end }}
    </ul>
  </article>

  {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
  <nav class="pagination">
    {{ if .Paginator.HasPrev }}
    <a href="{{ .Paginator.Prev.URL }}">prev</a>
    {{ end }}
    <span class="current-page">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</span>
    {{ fi .Paginator.HasNext }}
    <a href="{{ .Paginator.Next.URL }}">next</a>
    {{ end }}
  </nav>
  {{ end }}
{{ partial "footer.html" }}

create site

hugo -t theme_name
hugo  html 

も参照してください