Customizable Mobile First Responsive Landing Page

generated by Hugo using flexbox layouts, easy customizable styling settings and your content.

A complete site in a repo that's especially useful for noobs who just want to generate a landing page with some customized styling options and one's content without knowing any html, javascript or css nor much about Hugo.....but...you do have to learn about writing markdown

• learn markdown
• markdown cheatsheet

Motivation:

Goal:

Learn about and see this repo in action at once. Check out the hugo rendered guide branch here

See the master branch rendered with default settings

How to get startedo...

Install Hugo

Clone and open a terminal in the root of the repo and run hugo server for development (localhost:1313) from the root of the repo. Run just plain hugo to output your "static site" in the "dist" folder which then can be copied to say an S3 bucket for deployment.

With a text editor of your choice, such as my favorite atom, add/remove/edit the markdown files in the content directory to make sections in your landing plage. Each page will add a section. Some settings are the frontmatter, in particular "weight" which will force an order for your sections.

The config.toml file show you what parameters you can get. Don't delete the settings just comment them to disable and uncomment to enable. If you delete them there is no documentation to tell you what they are. FYI, I am still working out the custom styling for buttons and list bullets.

There are a number of shortcodes that will help you insert and format content but I have no documentation yet for those (see the layout/shortcodes folder or just look in the content files for example).

I am still working on a generator for gallery shortcode. It currently uses thumbsup to generate the html and lightgallery for the modal display but I still need to customize thumbsup output into the shortcode. So if you need to do photo galleries just open an issue and I can explain (basically hand edit the gallery.html shortcode for now).

If you need to do custom css do it in the custom.css file which is loaded last. Check out the other css files for the various classes. For noobs this is not necessary. Most of the custom styling is acheivable via the settings in the config.toml file.

It's all working. If I were you I'd make a branch for each landing page you want to create and keep the master unchanged. That way you can sync with my master as I have fixes and additions and then you can merge those into existing branches.

At this time I have not set this up as a hugo theme because it's just easier to distribute it as a complete site you edit to suit which make more sense than a theme with no example content.

The Plan

The plan to is to write some documentation on how it's all laid out and sytled so noobs could make their first steps into hugo, html, templating, javascript and css with little pain. In the meantime it's just useful to crank out custom landing pages. Eventually I will merge this project with my 4S repo for easy deployment and optimization, etc.

The ultimate plan is to make a virtualbox vm with a complete devleopment environment ready to go. A noob could fire off the vm and be productive almost immediately without having to "install" a thing....well virtualbox :-).