4.9 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.
Cavets
This code does not support older nor old-ball browsers I have taken NO measures to support anything but the latest popular browsers (that would be Chrome, Firefox and Edge). There is not css prefixing. The javascript should be compatible with the mentioned browsers on any version out in the last year or two. If you want to use this code to reach "everyone" then it would be up to you to make the necessary modifications. That said it will work for most people who have upgraded their phone/browser in the last two years. I make no guarantees against bugs as I have done very little testing on actual devices as services like browserstack are expensive and I don't have the time. So for example I have not tested in IOS running Safari since I don't own any Apple devices. Beyond that I have written no tests for the javascript code although I have tried to manually test things in particular the settings in the toml file. It's probably just fine for non-critical stuff. Otherwise I'd fork it and spend the time making it battle hardended.
Optimization
At this time I have not written any workflow code to concatenate and minifify the javascript, css, or html. Plans are in the works to write some nodejs to do this so when building using for depolyment Hugo will use the optimized files and templates. For the time being it is what it is. There not so much code here that I have honestly noticed a performance hit. I did write javascript code to use youtube thumb images which really helps with load time if you need a lot of videos embedded. Using optomized images on your part if you have a lot would have a greater effect than this optimization anyway.