Preface
Goal: Explanation of Hugo Repository Step By Step
Here is the summary of Hugo with Bulma CSS Framework. Hugo is using Chroma template.
I’m using Bulma, enhanced with custom SASS containing
-
Custom Helper Spacing
-
Material Design
Hugo Bulma Test Drive
An example of Hugo site using Bulma for personal learning purpose.
Hugo (Chroma) + Bulma + Custom SASS
Links
Hugo Step By Step
This repository:
Frankenbulma (Bulma Material Design) Step By Step
Additional guidance:
Chapter Step by Step
Tutor 01
Generate Only Pure HTML
-
Setup Directory for Minimal Hugo
-
General Layout: Base, List, Single
-
Partials: HTML Head, Header, Footer
-
Additional Layout: Post
-
Basic Content
Tutor 02
-
Add Pure Bulma CSS
-
Standard Header (jquery or vue) and Footer
-
Enhance All Layouts with Bulma CSS
Tutor 03
-
Add Custom SASS (Custom Design)
-
Nice Header and Footer
-
General Layout: Terms, Taxonomy
-
Apply Two Column Responsive Layout for Most Layout
-
Nice Tag Badge in Tags Page
Tutor 04
-
More Content: Lyrics and Quotes. Need this content for demo
-
Additional Layout: Archives
-
Custom Output: YAML, TXT, JSON
-
Article Index: By Year, List Tree (By Year and Month)
Tutor 05
- Post: Header, Footer, Navigation
Optional Feature
-
Blog Pagination: Adjacent, Indicator, Responsive
-
Widget: Friends, Archives Tree, Categories, Tags, Recent Post, Related Post
-
Article Index: Apply Box Design
Tutor 06
Finishing
-
Article Index: Apply Multi Column Responsive List
-
Layout: Service
-
Post: Markdown Content
-
Post: Table of Content
-
Post: Responsive Images
-
Post: Shortcodes
-
Post: Syntax Highlight
-
Post: Bulma Title: CSS Fix
-
Meta: HTML, SEO, Opengraph, Twitter
-
RSS: Filter to Show Only Post Kind
-
Search: lunr.js
What do you think ?