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

–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

All Above Videos as a Playlist

Comments

comments powered by Disqus