UCOMmandIt
/
uci-hugo-landingpage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

point to new guide repo for details

master
David Kebler 2017-03-28 17:27:44 -07:00
parent aa11f9f84a
commit 1111b62a8b
1 changed files with 14 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
readme.md
View File

@ -1,42 +1,24 @@
# Customizable Mobile First Responsive Landing Page
# Customizable Mobile First Responsive Landing Page Theme and More
## generated by Hugo using flexbox layouts, easy customizable styling settings and your content.
### Generated by Hugo using flexbox layouts, easy customizable style settings and your content. Plus handy shortcodes for things like embedding videos, making buttons, custom styling and layout.
### 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](http://gohugo.io).....but...you do have to learn about writing markdown
### TL;DR
for the hugo expert go [here](https://dkebler.github.io/landing-page-guide/)
### About
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](http://gohugo.io).....but...you do have to learn about writing markdown
* [learn markdown](http://www.markdowntutorial.com/)
* [markdown cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
### Motivation:
**Motivation:** Plenty of themes out there for Hugo but few that would allow a noob to customize their page without knowing css and go templates and fewer still with all the javascript necessary to be fully responsive.
### Goal:
**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 to make it easy to create one's own landing page in a few minutes
### Learn about and see this repo in action at once. Check out the hugo rendered guide branch [here](http://)
**Ultimiate Goal:** Put together a noob virtualbox VM with all the tools (e.g. atom, smartgit, hugo, node, etc.) and code installed and configured and ready to go. Fire up the VM and you're instantly productive.
### See the master branch rendered with default settings
## Getting Started
### How to get startedo...
Install [Hugo](http://gohugo.io)
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](http://atom.io), 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](https://github.com/thumbsup/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 :-).
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](https://dkebler.github.io/landing-page-guide/) (generated by Hugo and this theme of course)