Starting Hugo

Contains information related to the Hugo

Completed Medium

Start: July 27, 2019
End: July 27, 2019
Period: 1Days
Last Updated: July 27, 2019
Tags: hugo html

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

create html on layouts directory.
create css on static directory.
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