Setting up a simple Blog with a Static Website Generator - Part 8: Hugo About Section

Wed Dec 30, 2015

Draft - Raw, Un-edited

Adding an About section

1. Add new layout under layouts/about

layouts/about/single.html

{{ partial "header.html" . }}

{{ partial "sidebar.html" . }}

<!-- See /layouts/indexes/category.html for explanation of this section -->
<div class="wrap">

  {{ partial "masthead.html" . }}

  <div class="container content">

     {{ .Content }}

  </div>

</div>

<label for="sidebar-checkbox" class="sidebar-toggle"></label>

<!-- Include footer (ends <body> and <html>) -->
{{ partial "footer.html" . }}

Make an empty layouts/about/summary.html to avoid error messages upon hugo generation and avoid listing the content on the main page under {{ .Render "summary" }}

Mac/Linux
cp /dev/null layouts/about/summary.html

2. Add new section under content/about/me.md

---
title: "About"
---


## About me

Sometimes people have an "About me" section on the homepage of their website.

  It might even include a picture:

  <img class="headshot" src="/media/accountImageJeff.jpg" alt="account Jeff"></img>


Hi! I hope you are finding this blog helpful and enjoyable.


You can contact me like this: `SELECT REVERSE( 'moc.seidoogdesu@ffej');`

I also invite you to connect with me on [Twitter](http://twitter.com/xyz) and [LinkedIn](http://www.linkedin.com/in/xyz).

This is really just a barebones website to stand as a template for creating a blog that is statically generated by [Hugo](http://hugo.spf13.com) and hosted at on GitHub via [GitHub Pages](http://pages.github.com).

I am using a slightly modified version of the [Lanyon](http://lanyon.getpoole.com") Jekyll theme. I think it is very simple, clean, and elegant.

3. Add new permalink for section “about” within config.yaml

permalinks:
  posts: "/:year/:month/:day/:title/"
  about: "/:section/"

4. Add to navigation sidebar partials/sidebar.html

    <a class="sidebar-nav-item" href="/about">About</a>

5. Tweaking the CSS for the “headshot” - Changes for photo 1/2/2016

layouts/index.html

+        <div class="team-member">
         <!-- About me subsection -->
         <h2>About me</h2>

@@ -60,6 +61,9 @@

         <p>It might even include a picture: </p>

+        <img class="headshot" src="/media/accountImageJeff.jpg" alt="account Jeff"></img>
+        </div>

static/css/mystyles.css


.team-member{
  float: center;
}
.headshot{
  width: 100px;
  display: block;
  margin: 0 auto;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}