Only generate index.html with Hugo

Webcraft
1

I recently converted my resume to JSON, after getting tired of updating Word docs. When looking for a tool to transform the JSON into HTML – surprise, surprise – I chose Hugo.

I only needed one page to be generated… the resume. Here’s the relevant bits from my config.yaml in case you ever need to do the same:

disableKinds:
  - taxonomy
  - taxonomyTerm
  - sitemap
outputs:
  home:
    - HTML
2

I asked about how the content is structured. The output is at https://zwbetz.com/resume.html. :slight_smile:

3

https://allthe.codes/mirror/json-resume

{{ $resume := site.Data.resume }}
<!doctype html>
<html lang="{{ site.Language.Lang }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ $resume.basics.name }}</title>
    <style>
      {{ $css := resources.Get "css/style.css" }}
      {{ $css.Content | safeCSS }}
    </style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rokkitt:400,700|Lato:400,300">
  </head>
  <body id="top">
    <div id="cv" class="">
      <div class="mainDetails">
        <!-- <div id="headshot" class="">
          <img src="headshot.jpg" alt="{{ $resume.basics.name }}" />
        </div> -->

        <div id="name">
          <h1 class="">{{ $resume.basics.name }}</h1>
          <h2 class="">{{ $resume.basics.label }}</h2>
        </div>

        <div id="contactDetails" class="">
          <ul>
            <li>
              <a href="{{ $resume.basics.website }}">{{ $resume.basics.website }}</a>
            </li>
            <li>
              <a href="mailto:{{ $resume.basics.email }}" target="_blank">{{ $resume.basics.email }}</a>
            </li>
            <li>{{ $resume.basics.phone }}</li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>

      <div id="mainArea" class="">
        <section>
          <article>
            <div class="sectionTitle">
              <h1>Profile</h1>
            </div>

            <div class="sectionContent">
              <p>
              {{ $resume.basics.summary }}
              </p>
            </div>
          </article>
          <div class="clear"></div>
        </section>

        <section>
          <div class="sectionTitle">
            <h1>Work</h1>
          </div>

          <div class="sectionContent">
          {{ range $resume.work }}
            <article>
              <h2>{{ printf "%s at %s" .position .company }}</h2>
              <p class="subDetails">{{ printf "%s &mdash; %s" .startDate .endDate | safeHTML }}</p>
              <p>
              {{ range .highlights }}
                * {{ . }}
                <br>
              {{ end }}
              </p>
            </article>
          {{ end }}
          </div>
          <div class="clear"></div>
        </section>

        <section>
          <div class="sectionTitle">
            <h1>Skills</h1>
          </div>

          <div class="sectionContent">
            <ul class="keySkills">
            {{ range $resume.skills }}
              {{ range .keywords }}
              <li>{{ . }}</li>
              {{ end }}
            {{ end }}
            </ul>
          </div>
          <div class="clear"></div>
        </section>

        <section>
          <div class="sectionTitle">
            <h1>Education</h1>
          </div>

          <div class="sectionContent">
          {{ range $resume.education }}
          <article>
            <h2>{{ .institution }}</h2>
            <p class="subDetails">{{ printf "%s &mdash; %s" .startDate .endDate | safeHTML }}</p>
            <p>
              {{ printf "%s, %s" .area .studyType }}
            </p>
          </article>
          {{ end }}

          </div>
          <div class="clear"></div>
        </section>
      </div>
    </div>
  </body>
</html>

The first line refers to a data file kept at /data/resume.json. Quite clever! :slight_smile: