Creating a nice landing page with Hugo

support
1

Hi all,

not sure if this is the right place. If not, let me know and apologize.

I would like to build a really simple landing page, something like about.me. Just some short bio about myself and a link collection, contact infos etc.

I searched through multiple theme collections on the web, but couldn’t find something like that.

Maybe someone else had already a similar need and can suggest some themes or share one you created for yourself with me?

Thanks!

2

This one seems to fit your needs.

:wink:

3

That’s what I did for my site https://darcynorman.net

It’s a custom page at /layouts/index.html.html

My version of that file has this code, that does some dynamic generation of the various blocks. I could clean it up and move the style stuff to the main css file, but it works and I haven’t bothered to refactor it yet. I use the BeautifulHugo theme, so the css classes/ids come from there.

{{ define "main" }}

<style>
div#home-left {
	width: 450px;
	float: left;
}

div#home-left div.well {
	border: none;
}

div.homepage-content div.photos-list * img {
    width: 50% !important;
    height: 120px !important;
    object-fit: cover;
    overflow: hidden;
    float: left !important;
}

div#home-right {
	width: 250px;
	float: left;
	padding-left:20px;
}

div#home-right div.posts-list ul li {
	font-size: .8em;
}

</style>

  <div role="main" class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 homepage-content">

		<div id="home-left">
        {{ with .Content }}
			<div class="well">
				{{.}}
			</div>          
        {{ end }}
        
			<div class="photos-list">
			<h3>Photos</h3>
			{{ range (where .Site.RegularPages "Section" "photos") | first 10 }}
				<a href="{{ .Permalink }}"> 
		
				{{ $images := findRE "<img(.*?)>" (.RenderString .Content)  }}
		
				{{ range $images }}
					{{ . | safeHTML }}
				{{ end }}
				</a>
			{{ end }}
			<a href="/photos/" class="post-read-more">{{ i18n "more" }} &rarr;</a>
			</div>
		</div>

 		<div id="home-right">
        	<div class="posts-list">

			<div id="home-posts">
			<h3>Posts</h3>
			<ul>
			{{ range first 5 (where .Site.RegularPages "Type" "posts") }}
				<li><a href="{{.Permalink}}">{{.Title}}</a></li>
			{{ end }}
			</ul>
			<a href="/posts/" class="post-read-more">{{ i18n "more" }} &rarr;</a>
			</div>
			
			<div id="home-reflections">
			<h3>Weekly</h3>
			<ul>
			{{ range first 5 (where .Site.RegularPages "Type" "reflections") }}
				<li><a href="{{.Permalink}}">{{.Title}}</a></li>
			{{ end }}
			</ul>
			<a href="/reflections/" class="post-read-more">{{ i18n "more" }} &rarr;</a>
			</div>
			
			<div id="home-podcasts">
			<h3>Podcasts</h3>
			<ul>
			{{ range first 5 (where .Site.RegularPages "Type" "podcast") }}
				<li><a href="{{.Permalink}}">{{.Title}}</a></li>
			{{ end }}
			</ul>
			<a href="/podcast/" class="post-read-more">{{ i18n "more" }} &rarr;</a>
			</div>
			
			</div>
		</div>
		
      </div>
    </div>
  </div>
{{ end }}
1 Like