Landing Page Generator

Users Guide

Hugo Powered!

Customizable

Add Your Sections

Insert Your Content

Super Noob Friendly

Mobile Ready

About this Generator

Huuuh….What is is good for…..

building an attractive, mobile device ready, responsive, custom website/landing page quickly.

Yup you’ve stumbled on the right place.

This generator was written for someone with little or no experience using site generators (i.e. Hugo) or with (CSS/Javascript/HTML). If you are experienced then go to the quick start - TL;DR .

This generator built this site you are reading now!

It has all kinds of cool plugins called shortcodes that allow you to easily toss in things like a youtube video with just knowing its ID. The navbar at the top builds automagically from the content files you create…and…and..Enough said!

Let’s see it in action.

See the Starter Site Mobile Device Sized
See the Starter Site Tablet Sized
See the Starter Site Desktop Sized

See it respond? Pretty good trick! It’s all that javascript that was written that you don’t have to think about. It just works.

It’s not a toy.

Generator put to use Selling My House

Are you on board? Then read on! See how easy it is. In a few minutes you’ll have the starter site being built for you on your computer. In half and hour you’ll have it customized. Add your content and you’ll be ready to deploy.

Best Part? It’s 100% Free and open source

What to Install

First off…If you are an experienced Hugo user then go to the quick start - TL;DR .

The Tools

To be able to make your own cusomtized landing pages quickly and easily you’ll need to install minimum of two tools and then grab a copy of this starter page’s files to get you rolling. The absolute minimum tools you’ll need to install are two

1. Hugo - a static site Generator

Video - How to install Hugo on Windows
Hugo for Windows
Hugo For Mac
Hugo for Linux

–AND–

2. Atom a text/IDE editor

The following button will take you to the Atom website and offer a download button for Atom for your operating system. Install it as you would any application in your operating system

Atom

Possibly the hardest part of building your custom landing page is getting these two tools installed!

The Starter Site Code

Once you have Hugo and Atom installed you are ready to get a copy of the starter site files. So first decide on a directory in which to put it on your machine. Then download the zip archive file using the button below. Then extract it into that directory. Then open that folder in Atom and you’ll be ready to start editing your own landing page. This video shows using this guide as a starter but you’ll use the actual starter site. For the Hugo and Github saavy you can instead just clone the starter repostity.

Download The Landing Page Starter Files

for the Git experienced

Clone The Landing Page Starter Repo

Getting Started

YEA! If you completed successfully the installation section you are ready to start editing YOUR own landing page. You’ll going find easy to edit an existing landing page than to start your own from scratch. That’s why you’ll be using the starter site’s files.

What’s Important

In the folder you just made containing the starter site’s files you need to concentrate on just three places. The first is the config.toml file in the root of the folder. The second is the content/sections subfolder and the .md files inside. md is short for Markdown the textual editing format you’ll be using. The third is the assets/images folder. That’s the only places you’ll need to put your attention to create your own personalized landing page. The rest of the directory’s folders can be safely ignored until you are ready for more advanced topics like tweaking the styling.

Make Hugo Render Your Landing Page

To begin you need to bring up Atom with your working folder open. Then right click on the root of the folder in the folder tree on the left. Choose the Open Terminal Here or Open Terminal at Root from the menu. In the terminal window that opens type hugo server. Hugo will be now render your site and serve it so you can see the changes every time you save. Open your favorite browser and type localhost:1313 into the address line and you be viewing the starter site landing page that Hugo just rendered. But…Hugo is still working! If you make changes and save Hugo will re-render your landing page automatically and you’ll see those changes immediately in the browser. You can see this process in the video below

Hugo Renders the Landing Page
you will be rendering the starter site

The Configuration File

The heart and soul of your landing page is the configuration file config.toml. So start the editing of the your site by bringing up the config.toml file in Atom. You’ll find it in the root of your starter directory.

The Layout

It’s pretty simple. Each line in the config file is a setting. You can turn a setting “off” by simply putting a hashtag(#) before it. If you remove the hashtag the value for that setting will be used. There are a LOT of settings and they all have defaults so you only need to enable and change the ones you want. There is no separate documentation for all the settings in config.toml but each setting is commented in the file itself (they have double hashtag in front). Take a bit of time to read them all. Take a look now at a sample config.toml file

View a sample config.toml file

What to Edit First

Before you get started editing config.toml right click on it (in Atom) and choose duplicate. Then enter config.toml.bak. If you totally mess the file up you can revert to the backup copy by simply removing the .bak. What you’ll probably want to do first is personalize the colors, then maybe the fonts, add your own “Hero” image and change the text in the “Hero” (top) section. Watch the video below to get your feet wet editing config.toml. For now don’t worry about the content sections and navbar menu items that is covered below. Note that if you do something small like forget a quote Hugo won’t render your page, but Hugo will when you correct your mistake. It’s a good idea to use a versioning system like Git to save your versions of your work but that’s an advanced topic. So for now just make your own .bak copy of config.toml after you make major changes to it.

Editing the Settings File

Sections

About

Adding a section to the landing page is as easy as adding a .md (markdown) file in the content/sections/ directory. Each .md file you create in that directory will need some settings at the top of the page called frontmatter. The settings work the same as in config.toml, use a hashtag in front to turn one off. The frontmatter must be proceeded and followed by +++

Here is an example frontmatter you can copy into your new .md file. It’s easier though to just duplicate (right click in Atom) an existing section’s .md file and then edit it instead.

+++
weight = 10 # weight determines the order of sections.  Lower weights are first
Title = "It's all About Me"  ## the title of the section, used as the navbar link by default
link_text = "About"  ## will override the Title setting for use as the navbar link text
# navbar = false  ## create a section that doesn't have a corresponding navbar menu item...like a footer
# hidden = true  ## hide the section without deleting this file
# align = "left" ## aligns all elements in the section, center is the default
+++

Hero - a special section

The very first section of a landing page is traditionally called a “Hero” and has a covering photo and large headline text. This template allows you to easily do that in the config.toml file. Alternatively if you want more control you can turn off the built in Hero section by enabling (removing the hashtage) of the custom_hero = true setting. Then you can simply create your own hero.md section file for the Hero or if you want none at all. Crop and resize your image to about 2000 wide x 800 high and save as a jpg at 90% jpg quality and it will work well as a hero image.

Editing the Hero Section

Create and Edit

The easy way to create a new section is simply to right click in Atom on a .md file and choose “duplicate” to copy an existing section md file as a new one. Change the frontmatter settings as you wish and then edit/delete the markdown content that follows the frontmatter.

Creating and Editing Regular Sections

Markdown

Learn it

Teaching you the details about writing markdown is beyond the scope of this guide. He are two links to get you started, a markdown tutorial, and a markdown cheatsheet. Also the starter site has a section on using markdown as well to help you get….well..started

Kitchen Sink of Markdown at Starter Site

If you prefer here is video to get you going.

Honestly though the best way to learn markdown is to examine some examples. Luckily this guide you are using and the starter site are chock full of markdown in the content/sections/ directory. It’s probably just easier to edit an existing markdown file as it is to start from scratch at least when you are first learning. Look now at content/sections/markdown.md`` file that is used to make this section you are reading!

Markdown of the section you are reading

In this way you can relate the simplicity of the markdown with what is actually seen. The power of markdown is that the style and formatting are not part of the document. They are set separately. This allows two things

  1. Consistency of styling across a document.
  2. A simple one line change to a style can change that style for all or part of a page.

This theme was set up for you to easily make a limited number of those styling changes without knowing Hugo/CSS/HTML. For example you can change the font for the entire site in by simply changing the font="" setting in the main [params] section in config.toml to any valid Google font name. You need not do anything to the individual markdown files to make that happen nor know how to edit cascading style sheets!

What are the {{% %}} and {{< >}} about

In the markdown tutorial, video and cheatsheet there was never any mention of these symbols {{% %}} and {{< >}}. That’s because they are NOT markdown. They are special delimiters that Hugo uses to identify plugins called shortcodes. Shortcodes are custom pieces of code that coders write for your benefit. They allow you to extend markdown to do things it could never do, for example plug in a button link, or a video or photo with a caption. So when you see them know that they are not markdown. Take a look at the plugins/shortcode section below for an explanation of their use and what shortcodes are currently available in this landing page generator.

Plugins (i.e Shortcodes)

What are they

As explained in the markdown section above shortcodes can be plugged into the middle of your markdown files to give them added functionality.

Each shortcode is invoked with either a {{< name "parameters" >}} or {{% name "parameters" %}} and possibly a closing {{% /name %}} if they enclose some more content. It all depends on the nature of the shortcode.

This landing page theme currently has 12 shortcodes that you might plugin and will likely have more in the future (make your requests). Below they are documented. Most shortcodes have one or more parameters that follow the name. The shortcodes are listed below with an explanation of what they do and are linked to a modal documentation with details of how to use them. But many times the easiest way is just to see them in action in the markdown and copy, paste and edit to suit.

  • avatar - creates a large circle icon from an image with a link
  • bookmark places a bookmark on the page that to be linked to
  • box - wraps content in a flex box that can be styled. Useful for things like groups of buttons
  • contact - takes contact information and makes a contact “card”
  • disqus - places a disqus comments section in the page
  • embed - embed content from other sites (except youtube) that use “iframes” like google maps
  • format - wrap any content in custom classes. Allows end user custom styling with the custom css file(s)
  • image - places and image on the page with optional title and caption and modal click to enlarge
  • jotform - opens up a jotform by form id from jotform.com
  • link - creates custom links beyond simple markdown link including buttons
  • lorem lorem - easily insert dummy lorem text when fleshing out a site prototype
  • social - add bar of social icons and links
  • youtube - embed youtube videos with many options. For generic embedding use the embed shortcode

Soon there will be a plugin/shortcode to make a gallery of photos from a directory of photos and a nice lightbox when you click on one but this has not been automated yet. You can see an example of how it will work when it’s ready.

Generated Site using photo gallery plugin

Deploy

SOME CHANGES

After all that work getting your new landing page site looking the way you want it it’s time to “Deploy” your landing page out somewhere on the Internet where everyone can see it.

Generate the site folder

During page development using the hugo server command Hugo has been generating your site’s files and placing them in memory and serving them from there via localhost:1313.

Now you are just going to run just the command hugo and it will generate an actual folder of your site’s files that can then be uploaded to a server out on the Internet. BUT.. Before you run the hugo command you need to look at two different settings in config.toml. These are baseurl = "" and publishDir = "". The baseurl must be set to the url of the folder on the Internet you intend to serve from. For example from a cloud service that supports static pages it might look like this. baseurl = "https://mycloud.com/username/landingpage" where /landingpage was a subdirectory you made in you cloud account. publishDir tells Hugo where to put the files it generates for your site. publishDir="dist" would output locally your generated site in the dist subfolder of your landing page project. Ok with those set now try hugo from a terminal you started in the root (see the video). With output in your publish directory you are ready to move a copy of that publish directory out to the Internet. It is possible to write scripts to set these settings at the terminal but that is beyond the scope of this guide. For now this will work unless you know how to script in your operating system.

Where to host

Because of the numerous choices you’ll have this guide can’t cover all the options nor details on how to do the deployments :-(. The one thing to keep in mind about your options is that your site you generate only requires the simpliest of servers. It does not require any server-side processing and as such is not “hackable”. Once you have a place to publish and know how to do it repeatition will be easy and can be automated even. In the future deployement to selected services will be supported.

Some simple options are

  • An amazon S3 bucket
  • A web hosting service (if you already have and account at one use it)
  • In a folder from a cloud service such as Dropbox that supports static page serving.
  • A Github Account
  • Firebase - a google service

One good option is an Amazon Web Services (AWS) S3 bucket. It’s way cheap to store your site and images and they can be served right from there with their built in simple “static” page server. Unlike A cloud hosting service you can point any domain or subdomain to a bucket so it’s easy to use your custom domain. Further AWS has a free tier for your first year which includes plenty of storage on S3.

How to get it there

As you how you move your generated site from your publishDir directory to where it will be served is again beyond the scope of this guide. But the basic ideas is you just copy this publishDir directory to the folder from will be served. That involves getting them from your local machine out to the location. This could be done manually with some “file manager” program or could be automated (set your cloud service to sync the publishDir directory). The following video shows some options. You can ask in the comments below for help. In the future the landing page generator will include some automated options for getting your site out on the Internet easier.

Generating and then Deploying to an S3 Bucket

Quick Start for the Experienced

For those who are Hugo experienced and know what they are doing and are able to “figure out” the details simply clone the guide or starter repo, sync the theme submodule and then edit the markdown files in the content/sections directory and settings in config.toml.

If you really know what you are doing and prefer to start from scratch by all means just clone (or submodule) the theme into an existing Hugo project’s themes folder

guide repo
starter repo
theme repo

All Above Videos as a Playlist

Comments

comments powered by Disqus

Markdown of the 'Markdown' Section

Below is the actual markdown used to generate this section you are reading on learning markdown…another circular reference ha ha.

It’s a bit hard to read because the paragrahs don’t soft wrap but they will in the Atom Editor.

+++
weight = 26
title = "Markdown"
# link_text = ""
+++
### Learn it

Teaching you the details about writing markdown is beyond the scope of this guide.  He are two links to get you started, a markdown [tutorial](http://www.markdowntutorial.com/), and a markdown [cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).  Also the starter site has a section on using markdown as well to help you get....well..started  

{{< link type="btn" size="small" url="https://dkebler.github.io/landingpage-starter/#kitchen" text="Kitchen Sink of Markdown at Starter Site" icon="eye" display="tab" >}}

If you prefer here is video to get you going.

{{< youtube HndN6P9ke6U >}}

Honestly though the best way to learn markdown is to examine some examples. Luckily this guide you are using and the starter site are chock full of markdown in the `content/sections/` directory.  It's probably just easier to edit an existing markdown file as it is to start from scratch at least when you are first learning.   Look now at `content/sections/markdown.md` file that is used to make this section you are reading!  

{{< link type="btn" size="small" url="#modal-markdown" text="Markdown of the section you are reading" icon="eye" display="modal" >}}

In this way you can relate the simplicity of the markdown with what is actually seen.  The power of markdown is that the style and formatting are not part of the document.  They are set separately.  This allows two things

1.  Consistency of styling across a document.  
2.  A simple one line change to a style can change that style for all or part of a page.

This theme was set up for you to easily make a limited number of those styling changes without knowing Hugo/CSS/HTML.  For example you can change the font for the entire site in by simply changing the `font=""` setting in the main `[.params]` section in `config.toml` to any valid Google font name. You need not do *anything* to the individual markdown files to make that happen nor know how to edit cascading style sheets!

### What are the `{{%  %}}` and `{{<  >}}` about

In the markdown tutorial, video and cheatsheet there was never any mention of these symbols `{{%  %}}` and `{{<  >}}`.  That's because they are **NOT** markdown.  They are special delimiters that Hugo uses to identify plugins called [shortcodes](#plugins).  Shortcodes are custom pieces of code that coders write for your benefit.  They allow you to extend markdown to do things it could never do, for example *plugin* a button link, or a video, or a photo gallery.  So when you see them know that they are not markdown.  Take a look at the [plugins/shortcode](#plugins) section below for an explanation of their use and what shortcodes are currently available in this landing page generator.

Shortcode - Avatar

creates a large circle icon from an image

usage: {{< avatar "image" >}} {{< avatar img="image" url="link" >}}

parameters: * = optional

  • *image - image path of the image. By default it will look for avatar.jpg in the /assets/images. Note: All images can be servered from an alternative place by setting “imagespath” setting in config.toml
  • *url - a valid url to link the image to

examples in markdown:

{{< avatar >}} loads avatar.jpg that must be in assets/images folder

{{< avatar "personal/dickf2.jgp" >}} with dickf2.jpg in the assets/images/personal/ subdirectory

must use parameter names if a link is desired

{{< avatar img="dickf.jpg" url="https://en.wikipedia.org/wiki/Richard_Feynman" >}}

with dickf.jpg in assets/images folder

rendered example:

the shortcode for experienced hugo coders

{{ $path := "/images/" }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
{{ if .IsNamedParams }}
<div class="box box--avatar">
  {{ with .Get "url" }}<a href="{{.}}">{{ end }}
	<img class="avatar" src="{{ $path }}{{ .Get "img" }}"/>
  {{ with .Get "url" }}</a>{{ end }}
</div>
{{ else }}
{{ $avatar := ( .Get 0 | default "avatar.jpg" ) }}
<div class="box box--avatar">
	<img class="avatar" src="{{ $path }}{{ $avatar }}"/>
</div>
{{ end }}

/* this makes the avatar circle form the square image */
img.avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0.5em;
}

Shortcode - Bookmark

Turn any text into a bookmark (id html tag) that then can be linked to

usage: {{< bookmark "id" "text" "hide" >}}

where: * = optional

  • id - the name of the bookmark used in a link, becomes #id for use in a link
  • *text - is the text that will appear on the page, if missing id will be used as the text
  • *hide - if “hide” appears the anchor will be made invisible on the page.

example in markdown:

This is all {{< bookmark "about" "about us" >}}

if I wanted to go to the new about us bookmark I'd click [here](#about)

For Experienced Hugo Coders

{{ $numOfParams := ( len .Params ) }}
{{ if eq $numOfParams 1 }} <span name="{{ .Get 0 }}">{{ .Get 0 }}</span> {{ end }}
{{ if eq $numOfParams 2 }} <span name="{{ .Get 0 }}">{{ .Get 1 }}</span> {{ end }}
{{ if eq $numOfParams 3 }}
<span name="{{ .Get 0 }}" {{ if (.Get 2) "hide" }}class="invisible"{{ end }}>{{ .Get 1 }}</span>
{{ end }}

Shortcode - Box

Wrap some content in a flexbox that can be styled

usage:

{{% box "list of css classes" %}}
Stuff to Wrap
{{% /box %}}

where: * = optional

  • *classes - A space delimited set of css classes for custom styling

by default child element will be in a row with wrapping. Use optional class column if you want to have all the elements be in a column regardless of viewport. For custom styling add a class name in shortcode and a corresponding class in the custom.css file. Be sure custom.css is enabled in the config.toml settings.

examples in markdown:

Example Markdown

{{% box  demo %}}
A paragraph I wrote blah...blah blah blah blah  blah blah blah blah

Another paragraph
{{% /box %}}

rendered

A paragraph I wrote blah blah blah blah blah blah blah blah

Another paragraph

Example Column

{{% box  demo column %}}
A paragraph I wrote blah...blah blah blah blah  blah blah blah blah

Another paragraph
{{% /box %}}

rendered

A paragraph I wrote blah blah blah blah blah blah blah blah

Another paragraph

with this css in /assests/css/custom.css

.box--demo {
  justify-content: space-around;
  width:100%;
}

.box--demo > p  {
  color:red;
  background-color: blue;
  padding: 1em;
}

make a button bar by using btn--bar

{{% box btn--bar %}}
{{< link type="btn" icon="download" url="" text="One" >}}
{{< link type="btn" icon="download" url="" text="Two" >}}
{{< link type="btn" icon="download" url="" text="Three" >}}
{{% /box %}}
One
Two
Three

The shortcode for experienced hugo coders

{{ $numOfParams := ( len .Params ) }}
<div class="box {{ range .Params }}box--{{ . }} {{ end }}">
{{ .Inner }}
</div>

Shortcode - Contact

DRAFT

Add a contact info box based on setting in config.toml

usage: {{< contact >}}

Shortcode - Disqus

Embeds a Disqus Comments

usage: {{< disqus "shortname" >}}

where:

shortname - the name of the disqus comments shortname from your disqus user account.

example in markdown:

{{< disqus "mylandingpage" >}}

See the disqus website

For Experienced Hugo Coders

<div class="box box--disqus">
    <div id="disqus_thread" class="box__embed box__embed--disqus">
    </div>
</div>

<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    // if (window.location.hostname == "localhost")
    //     return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Get 0 | default .Site.DisqusShortname }}';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>

<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Shortcode - Embed

DRAFT

embed your iframes from other sites like google map

Note: use the youtube shortcode for embedding youtube videos

usage:

{{< embed "type" >}}
copy and paste your iframe code here
{{< /embed >}}

or with named parameters

{{< embed type="" title="" caption="" maxwidth="" wpad="" >}} ….

where: * = optional

  • *type - a one word descriptor of your iframe used to custom class styling .embed--<type>
  • *title
  • *caption
  • *maxwidth
  • *wpad

example:

{{< embed type="google-map" title="Iceland" caption="Hot Place in A Cold Land" maxwidth="300" >}}
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1732165.9399742798!2d-21.255978827180424!3d64.9144351116168!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48d22b52a3eb6043%3A0x6f8a0434e5c1459a!2sIceland!5e0!3m2!1sen!2sus!4v1492742579633" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
{{< /embed >}}
Iceland
Hot Place in A Cold Land

the shortcode for the Hugo experienced

{{ if .IsNamedParams }}
<div class="box box--embed box--{{ .Get "type" }}">
    {{ with .Get "title" }}
    <div class="box__title">{{ . }}</div>
    {{ end }}
    <div
       {{ with .Get "type" }} class="embed--{{ . }}"{{end}}
       {{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
       {{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
       >
    {{ .Inner }}
    </div>
    {{ with .Get "caption"}}
    <div class="box__caption">{{ . }}</div>
    {{ end }}
</div>
{{ else }}
<div class="box box--embed {{ with .Get 0 }}embed--{{ . }}{{ end }}">
    {{ .Inner }}
</div>
{{ end }}

Shortcode - Format

Wrap some content so it can be custom styled

usage:

{{% format "list of css classes" %}}
Stuff to Wrap
{{% /box %}}

where: * = optional

  • *classes - A space delimited set of css classes for custom styling

examples in markdown:

Example Markdown

Here is some normally formatted text. {{% format  red %}}Here I need a sentence to be in red{{% /format %}}.  This sentence is normal again.

Here is some normally formatted text. Here I need a sentence to be in red . This sentence is normal again.

with this css in css/custom.css and the setting in config.toml accordingly

.red {
  color: red;
}

the shortcode for Hugo experienced

<span class="{{ range .Params }}{{ . }} {{ end }}">
{{ .Inner }}
</span>

Shortcode - Image

Displays an image with many settings

{{< image filename="" maxwidth="" wpad="" title="" caption="" link="" style="" >}}

where: * = optional

  • filename: image path of the image. By default it will look for file in the /assets/images. Note: All images can be served from an alternative place by setting “imagespath” setting in config.toml
  • *title: on top of image
  • *caption: on bottom of image
  • *link: put in the url to link to, opens in new tab (still working on a ligtbox link for viewing at full screen)
  • *maxwidth: maximum width when max-width is great than viewport width. default is 450
  • *wpad: width padding when max-width < viewport - default is 5
  • *style: add extra css class for custom styling .box--image-"style". Note: .box--image is available to style all images

example in markdown:

{{< image filename="hero.jpg" maxwidth="200" title="A Title" caption="this is a caption" link="http://www.utahscanyoncountry.com/index.html" >}}

rendered:

A Title
this is a caption

example in markdown:

{{< image filename="personal/dickfeynman.jpg" maxwidth="200" title="Dick Feynaman" caption="One Crazy Smart Dude" >}}

rendered:

Dick Feynaman
One Crazy Smart Dude

shortcode code for the Hugo experienced

{{ $path := "/images/" }}
{{ $filename := .Get "filename" }}
{{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
<div class="box box--column box--image
{{ with .Get "style"}} box--image-{{ . }}{{ end }}
{{ with .Get "link"}}{{ if eq . "lightbox" }} box--image-lightbox{{ end }}{{ end }}
"
{{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
{{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
>
{{ with .Get "title" }}
  <div class="box__title">{{ . }}</div>
  {{ end }}
{{ with .Get "link"}}
{{ if eq . "lightbox" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}" target="_blank" >{{ end }}
{{ end }}
<img src="{{ $path }}{{ .Get "filename" }}" />
{{ if .Get "link"}}</a>{{ end }}
{{ with .Get "caption"}}
<div class="box__caption">{{ . }}</div>
{{ end }}
</div>

Shortcode - JotForm

Makes a button link to a Jotform form

Get Some Interaction from your “static” site by using Jotform

See the Jotform website to make a form.

usage: {{< jotform "id" "text">}}

where:

  • id - id of Jotform created at Jotform website
  • text - text of button

currently creates a button that opens in a popup window

but eventually it will be embedable in the content

{{< jotform "bogus#" "My Awesome Form - Fill It" >}}

My Awesome Form - Fill It

shortcode for the Hugo experienced

<div class ="box box--btn">
<a class="btn" href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a>
</div>

Shortcode - Link

Makes a button styled or plain link with icons and different display modes

{{< link filename="" maxwidth="" wpad="" title="" caption="" link="" style="" >}}

where: * = optional

  • url: url/address of the link
  • *text: the text of the link
  • *icon: any font awesome font by name without the fa-. see http://fontawesome.io/cheatsheet/. If you only want the font then just don’t use the text parameter.
  • *maxwidth: maximum width when max-width is great than viewport width. default is 450
  • *type: use “btn” for a button link otherwise leave out for simple text.
  • *size: only used with type=“btn”, currently only “small” and “large” supported but you can use your own custom css with .btn--<size>
  • *display: values are “tab”, “window”, “modal”. Modal can only be used for a relative url within your site.
  • *height: only applies to type=“window”
  • *width: only applies to type=“window”

example in markdown:

{{< link url="http://dkebler.github.io/landingpage-starter" type="btn" icon="eye" text=" See Stater Popup window" display="window" height="500" width="500" >}}

rendered:

starter in a popup window

example in markdown:

Click and you will be taken to {{< link url="http://google.com" text="Google" display="tab" >}} in a new tab

rendered:

Click and you will be taken to Google in a new tab

Shortcode for the Hugo Experienced

{{ .Scratch.Set "url" (.Get "url") }}
{{ .Scratch.Set "height" (.Get "height") }}
{{ .Scratch.Set "width" (.Get "width" | default "1000") }}
{{ if .Get "height" }}
   {{ .Scratch.Set "height" ( printf ", height=%s" ( .Scratch.Get "height" ) ) }}
  {{else}}
    {{ .Scratch.Set "height" "" }}
  {{ end }}

{{ if eq (.Get "display") "window" }}
{{ .Scratch.Set "url" ( printf "javascript:void( window.open('%s', 'blank', 'scrollbars=yes, toolbar=no, width=%s %s' ))" (.Scratch.Get "url") (.Scratch.Get "width") (.Scratch.Get "height") ) }}
{{ end }}
<a
{{ if eq (.Get "display") "tab" }} target="_blank"{{ end }}
{{ if eq (.Get "display") "modal" }} modal{{ end }}
{{ if eq (.Get "type") "btn" }} class="box box--btn btn btn--{{ .Get "size" | default "regular" }}"{{ end }}
{{ printf "href=%q" (.Scratch.Get "url") | safeHTMLAttr }}
>
{{ with .Get "icon" }}<i class="btn__icon fa fa-{{ . }}"></i>{{ end }}
{{ if eq (.Get "type") "btn" }}<div class="btn__text">{{ .Get "text" }}</div>
{{ else }}
{{ .Get "text" }}
{{ end }}
</a>

Shortcode - Lorem

DRAFT

Generate a bunch of dummy text for prototyping

usage: {{< lorem "<command>" >}}

Shortcode - Social

Creates a bar of Social Icons based on the [Params.Social] settings in config.toml

DRAFT - coding still in progress

Shortcode - Youtube

Unamed Parameters

usage: {{< youtube "id" "start" >}}

where: * = optional

  • id - the youtube id
  • *start - for start time other than the beginning in seconds

example in markdown:

{{< youtube 7G6TcT1liQw 60 >}} start one minute into video with id of 7G6TcT1liQw

rendered:

Named Parameters

usage: {{< youtube id="" start="" plist="" title="" caption="" nothumb="" maxwidth="" wpad="" >}}

where: * = optional

  • id - the youtube id
  • *start - for start time other than the beginning in seconds
  • *plist - youtube playlist id (for id must choose an id of from one of the videos therein )
  • *title - Title on top of video
  • *caption - caption below video
  • *maxwidth - for larger devices it limits the width of the video, default is 450px.
  • *wpad - when display width is < maxwidth adds this padding. Default is 5px. For mobile devices.
  • *nothumb=“yes” - include this if you want the actual video to appear (takes much longer to load)

example in markdown:

{{< youtube id="7G6TcT1liQw" start="60" maxwidth="350" title="A Title" caption="this is a caption" >}}

rendered:

A Title
this is a caption

Actual Short Code - For Experienced Hugo Coders

{{ $.Scratch.Set "maxwidth" ( $.Page.Site.Params.youtube.maxwidth )  }}
{{ $.Scratch.Set "wpad" ( $.Page.Site.Params.youtube.wpad )  }}
{{ $.Scratch.Set "nothumb" ( $.Page.Site.Params.youtube.disable_thumb )  }}
{{ if .IsNamedParams }}
{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }}
{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }}
{{ with .Get "nothumb" }}{{ $.Scratch.Set "nothumb" . }}{{ end }}
<div class="box box--embed box--column box--youtube">
    {{ with .Get "title" }}
    <div class="box__title">{{ . }}</div>
    {{ end }}
    <div
       youtube_id="{{ .Get "id" }}"
       {{ with .Get "start"}} start="{{ . }}"{{ end }}
       {{ with .Get "plist"}} list="{{ . }}"{{ end }}
       {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
       {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
       {{ with $.Scratch.Get "nothumb"}} nothumb="yes" {{ end }}
       >
  <!-- thumb and video get put here -->
    </div>
    {{ with .Get "caption"}}
    <div class="box__caption">{{ . }}</div>
    {{ end }}
</div>
{{ else }}
{{ $numOfParams := ( len .Params ) }}
<div class="box box--embed box--youtube"
       youtube_id="{{ .Get 0 }}"
       {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}
       {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
       {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
       {{ with $.Scratch.Get "nothumb"}} nothumb="yes" {{ end }}
       >
      <!-- image or iframe injected here -->
</div>
{{ end }}

and the javascript for the ninjas

(function ($) {

  $(document).bind("DOMContentLoaded",
    function () {

      var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
      $('div[youtube_id]').each(function () {
        if ($(this).attr('nothumb') !== "yes") {
          var vid = $(this).attr('youtube_id');
          var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
          var thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
          $(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow()

        } else { // if image thumbs turned off
          insertIframe.call(this)
        }

      })
    })

  function insertIframe() {
    var $box = $(this).parent()
    var id = $box.attr('youtube_id')
    var autoplay = "autoplay=1&"
    if (!id) { // image thumb is off not called by thumb so don't need parent
      $box = $(this)
      id = $box.attr('youtube_id')
      autoplay = ""
    }
    var mw = $box.attr('maxWidth');
    var wp = $box.attr('wPad');
    var start = $box.attr("start") || 1
    var list = ""
    if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
    var url = `https://www.youtube.com/embed/${id}?${autoplay}start=${start}`
    var vIframe = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
    $box.html(vIframe).children().fitToWindow($box.data("maxWidth") || mw, $box.data("wPad") || wp)
  }

}(jQuery));

The Settings File

Below is an example of the page settings file named config.toml. You can find it in the root of the project folder. By editing the values in this file you can control the style, content or appearance of certain elements of the page.

[ ] indicates a settings section never turn those off or delete them

## Double Hashtag indicates a comment
## Use a Single Proceeding hashtag to turn a setting "off" rather than deleting it
## Therefore never delete any line of this file
## [ ] indicates a setting section never turn those off
##

## set a baseurl before rendering for deloyment otherwise leave it turned off
#baseURL = "https://mysite.com/mylandingpage"
languageCode = "en-us"
title = "My Landing Page Starter" ## required used for tab title and navbar
canonifyUrls = "true" ## don't change this
staticDir ="assets" ## don't change this
# publishDir = "dist"  ## default is public/
# contentDir = "sections" ## don't change this
layoutDir = "plugins" ## don't change this
theme = "landingpage-flex-hugo-theme" ## don't change this
# disqusShortname = "landingpage-guide"
#disableLiveReload = true

[params]
## Possible font setting choices throughout this config file must be a google font name with at least the 4 standard styles
## see  https://fonts.google.com/
## This applies to all font= settings in this file
# font = "Open Sans"  ## default Roboto, sets for entire site, can be specifically overridden below
font = "Rubik"  ## alternative just uncomment
# custom_css = ["custom.css", "custom-responsive.css"]   ## can add other files in array, make corresponding file in assets/css/
# custom_js = ["custom.js","custom-docready.js"]  ## can add other files in array, make corresponding file in assets/css/
## array of gallery names created
## each one should have a corresponding images folder and gallery-<name>.html shortcode in plugins/shortcodes
## This manual system for photo galleries will be replaced in future releases
galleries = ["photos"]
## You can store your images in an external place like an s3 bucket. default is within at assets/images => /images
# imagespath = "https://mybuckettld/afolder/"  ## full url must end with
lightbox = "lightgallery" ## must match a lightbox function that has been loaded in javascript, only "lightgallery" available currently
# cache_timeout = 0  default is 3600 seconds = 1 hour

[params.navbar]
  # hidden = true  ## turn off for simple page with no navigation topbar
  # logo_text = "Will override site title"  ## default is to use the site Title above
  logo_text_short = "My Landing Page" ## alternate logo text that helps to fit on small screens without wrapping
  # logo_text_size="1" ## unit is em, 2em is default
  # font = ""  ## a valid google font name - overrrides the site font above
  ##  All color options can use an html color name or a hex color code.  See either
  ## http://www.quackit.com/css/color/charts/css_color_names_chart.cfm
  ## https://www.colorcodehex.com/html-color-names.html
  color = "ivory"
  bg_color = "darkgreen"

[params.hero]
  # custom_hero = true  ## All the hero settings below are ignored and the hero is turned off.  You can add then a hero section as hero.md or not.
  img = "green-landscape-hero.jpg"  # default is hero.jpg,  put assets/images or other location set by imagespath above
  font = "Open Sans"  # a valid google font name, default Roboto for all hero text
  color = "ivory"
  # bg_color = ""  ## only needed if you are not using a hero image
  text_outline = "black"
  # text_shadow = "black"
  headlines_font = "Righteous"  # a valid google font name, defaults to page font or hero font above
  ## H1 -
  headline = "Landing Page Starter"
  headline_color = "darkgreen"
  headline_size = "3.5"
  ## H2
  subheadline = "Generated From"
  subheadline_color = "springgreen"
  subheadline_size = "3"
  ## H3
  subsubheadline = "Hugo Flex Theme"
  subsubheadline_color = "seagreen"
  subsubheadline_size = "2"
  ## H4
  lines = ["Customizable", "Add Your Sections", "Insert Your Content","Super Noob Friendly","See the Guide!"]
  lines_color = "lightgreen"
  lines_size = "1.5"
  divider = true
  divider_color = "darkgreen"
  divider_thickness = "3"

## Parameters used for every section of the page
[params.sections]
    #font = "Acme"
    bullet_icon = "\uF069"   # font awesome unicode value default to font awesome asterisk
    # headline_font = "Lato"
    # headline_size = "3"
    [params.sections.even]
    color = "bisque"
    bg_color = "seagreen"
    [params.sections.odd]
    bg_color = "ivory"
    color = "seagreen"
    [params.sections.footer]
    color = "darkolivegreen"
    bg_color = "lightgreen"
    [params.sections.comments]
    color = "darkolivegreen"
    bg_color = "palegreen"

##  any markdown file in content/modals will be available as a modally displayed content
##  Use the link shortcode with the url #modal-<filename>
##  example  {{< link url="#modal-test text="A test modal" display="modal" >}}
##  where there is a file test.md   in the content/modals directory.
[params.modal]
  #font = "Acme"
  color = "ivory"
  bg_color = "seagreen"
  #text_size = "1.5"

# these will override the default which is even section button scheme comes from odd section scheme and vice versa
[params.buttons.even]
  # color = "blue"
  # bg_color = "red"
  # hover_color ="white"
  # hover_bg_color ="purple"
[params.buttons.odd]
  # color = "red"
  # bg_color = "blue"
  # hover_color ="purple"
  # hover_bg_color ="white"

# TODO enable via shortcode
[[params.social]]
  #title = "email"
  #icon = "envelope-o"
  #url = "mailto:4005@kebler.net"

[params.youtube]
  # maxwidth = "800"  ## default maximum width for all youtubes 450px.  You can override each individually in shortcode
  #  wpad = "50"  ## padding on both left and right when view width is < maxwidth  default is 5
  ## on mobile devices autoplay is disabled so having a fast loading thumb image requires two clicks
  ## to start video.  Disable thumbs only if you have just one or two videos on your page
  # disable_thumb = "yes" ## display video thumbs and not thumb image  -- SLOWer to load.