3.2 KiB
Customizable Mobile First Responsive Landing Page Theme and Starter -- Noob Friendly
A Hugo theme based on flexbox layouts with loads of customizable style settings and an easy way to add your content. The theme includes a library of handy shortcodes(plugins) for things like embedding other third party content (e.g. youtube, googlemap), making button links, custom styling and layout, and photo galleries. It's mobile first and responsive which means with no work on your part it will look and work great on a mobile device or tablet as well as a laptop or desktop.
TL;DR
For those who are Hugo experienced and know what they are doing and are able to “figure out” the details simply clone the guide repo. Edit the markdown files in the /sections directory and settings in config.toml. To start from scratch by all means just clone (or submodule) this theme into an existing hugo project’s themes folder. If you need to cheat and see ths guide it's here
About
Seriously....A complete theme in a repo that's especially useful for noobs who just want to generate a landing page with some customized styling options (colors, fonts, etc.) and one's content without knowing any html, javascript or css nor much about Hugo...but... You do have to learn about writing markdown and how to deploy your generated site to where others can see it.
Motivation: Plenty of themes out there for Hugo but few that would allow a noob to customize their page without knowing css and Go/HTML templates and fewer still with all the javascript necessary to be fully responsive.
Goal: Create a mobile first responsive flexbox based Hugo landing page theme including shortcodes that would allow a noob to generate a customized landing page by only knowing a little markdown. Provide a starter repo and guide to make it easy to create one's own landing page in a few minutes
Further Goal: Add automated (via nodejs) deployment to github pages, S3 bucket or any server using ssh. My other project 4S can do this it just needs to be integrated. Also want to automate building photo galleries. Currently this can be done but manually with Thumbsup. The generated code is made into a shortcode and the generated thumbs and images added to the project manually. Also add in code minification and optimazation for production/distribution builds
Ultimiate Goal: Put together a noob virtualbox VM with all the tools (e.g. atom, git, smartgit, hugo, node, etc.) and code installed and configured and ready to go. Fire up the VM and you're instantly productive. Might as well make a few tutorial videos on using the entire project.
Getting Started
See this theme in action as a landing page and learn about how to use it to make your own landing page by visiting the landing page guide (generated by Hugo and this theme of course). Once you have the tools you'll need installed you can begin editing a copy of the starter repository. Quickly you'll have a rough version of your landing page in just a few minutes.