Commit 437b12d3 authored by epsi sayidina's avatar epsi sayidina
Browse files

README.md

parent 971acb49
Pipeline #72774838 passed with stages
in 22 seconds
......@@ -5,5 +5,165 @@ An example of Hugo site using Bulma for personal learning purpose.
This is basically a Bulma version of Hugo Tutorial.
![Hugo Bulma: Preview][hugo-bulma-preview]
-- -- --
## Links
### Hugo Article Series
Consist of more than 30 articles.
* [Hugo - Overview][hugo-overview]
* [Hugo Step by Step Repository][tutorial-hugo] (this repository)
### Bulma Article Series
Consist of 10 articles.
* [Bulma - Overview][bulma-overview]
* [Bulma Step by Step Repository][tutorial-bulma]
[hugo-overview]: https://epsi-rns.gitlab.io/ssg/2019/04/01/hugo-overview/
[bulma-overview]: https://epsi-rns.gitlab.io/frontend/2019/03/01/bulma-overview/
[tutorial-hugo]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/
[tutorial-bulma]: https://gitlab.com/epsi-rns/tutor-html-bulma/
-- -- --
## 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
![Hugo Bulma : Tutor 01][tutor-01]
Archive: [Tutor 01][archive-01]
-- -- --
### Tutor 02
* Add Bulma CSS
* Standard Header (jquery or vue) and Footer
* Enhance All Layouts with Bulma CSS
![Hugo Bulma : Tutor 02][tutor-02]
Archive: [Tutor 02][archive-02]
-- -- --
### 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
![Hugo Bulma : Tutor 03][tutor-03]
Archive: [Tutor 03][archive-03]
-- -- --
### Tutor 04
* More Content: Lyrics and Quotes. Need this content for demo
* Additional Layout: Archives
* Article Index: By Year, List Tree (By Year and Month)
* Custom Output: YAML, TXT, JSON
![Hugo Bulma : Tutor 04][tutor-04]
> Optional Feature
* Widget: Friends, Archives Tree, Categories, Tags, Recent Post, Related Post
![Hugo Bulma : Tutor 04][tutor-04-widget]
Archive: [Tutor 04][archive-04]
-- -- --
### Tutor 05
* Article Index: Apply Multi Column Responsive List
* Post: Header, Footer, Navigation
> Optional Feature
* Blog Pagination: Adjacent, Indicator, Responsive
![Hugo Bulma: Tutor 05: Indicator Pagination][tutor-05-indi]
![Hugo Bulma: Tutor 05: Responsive Pagination][tutor-05-resp]
Archive: [Tutor 05][archive-05]
> Finishing
* 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
![Hugo Bulma : Tutor 05: Post][tutor-05-post]
-- -- --
What do you think ?
[hugo-bulma-preview]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/hugo-bulma-preview.png
[hugo-bulma-preview]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/hugo-bulma-preview.png
[tutor-01]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/14-browser-nouse-winter.png
[tutor-02]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/25-browser-post.png
[tutor-03]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/35-browser-post.png
[tutor-04]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/44-browser-terms-tree.png
[tutor-04-widget]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/51-panel-archives.png
[tutor-05-indi]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/52-04-indicator-bulma-animate.gif
[tutor-05-resp]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/52-04-responsive-bulma-animate.gif
[tutor-05-post]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/61-blog-post-all.png
[archive-01]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/tutor-hugo-01.tar
[archive-02]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/tutor-hugo-02.tar
[archive-03]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/tutor-hugo-03.tar
[archive-04]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/tutor-hugo-04.tar
[archive-05]: https://gitlab.com/epsi-rns/tutor-hugo-bulma/raw/master/preview/tutor-hugo-05.tar
......@@ -18,6 +18,11 @@ PygmentsStyle = "monokai"
opengraphimage = "images/logo-gear-opengraph.png"
keywords = [
"Hugo", "SSG", "static site generator",
"Bulma", "CSS Framework"
]
[taxonomies]
category = "categories"
tag = "tags"
......
{{/* Required meta tags */}}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{/* The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags */}}
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly"
content="True">
<meta name="MobileOptimized"
content="320">
{{/* Let's Fake the Generator */}}
<meta name="generator" content="Karimata 1.2.3 Media Engine" />
<meta name="generator"
content="Karimata 1.2.3 Media Engine" />
{{/* Chrome, Firefox OS and Opera */}}
<meta name="theme-color" content="#2980b9">
<meta name="theme-color"
content="#2980b9">
<meta property="og:locale" content="{{ $.Site.LanguageCode | default "en" }}">
<meta property="og:locale"
content="{{ $.Site.LanguageCode | default "en" }}">
{{- if eq .Page.Params.Type "post" }}
<meta property="og:type" content="article">
<meta property="og:type"
content="article">
{{- end }}
<meta property="og:title" content="{{ .Title | default .Site.Title }}">
<meta property="og:title"
content="{{ .Title | default .Site.Title }}">
{{- if .Page.Params.Excerpt }}
<meta property="og:description" content="{{ replace .Page.Params.Excerpt "\n" " " }}">
<meta property="og:description"
content="{{ replace .Page.Params.Excerpt "\n" "," }}">
{{- end }}
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
<meta property="og:url"
content="{{ .Permalink }}">
<meta property="og:site_name"
content="{{ .Site.Title }}">
{{- if .Page.Params.Opengraph.Image }}
<meta property="og:image" content="{{ .Page.Params.Opengraph.Image | absURL }}">
<meta property="og:image"
content="{{ .Page.Params.Opengraph.Image | absURL }}">
{{- else if eq .Page.Params.Type "post" }}
<meta property="og:image" content="{{ "/images/epsi-vexel.png" | absURL }}">
<meta property="og:image"
content="{{ "/assets/site/images/topics/default.png" | absURL }}">
{{- else if .Site.Params.Opengraphimage }}
<meta property="og:image" content="{{ .Site.Params.Opengraphimage | absURL }}">
<meta property="og:image"
content="{{ .Site.Params.Opengraphimage | absURL }}">
{{- end }}
<meta property="og:latitude" content="-6.193665"/>
<meta property="og:longitude" content="106.848558"/>
<meta property="og:locality" content="Jakarta"/>
<meta property="og:country-name" content="Indonesia"/>
<meta property="og:latitude" content="-6.193665"/>
<meta property="og:longitude" content="106.848558"/>
<meta property="og:locality" content="Jakarta"/>
<meta property="og:country-name" content="Indonesia"/>
{{- if .Page.Params.Author }}
<meta name="author" content="{{ .Page.Params.Author }}">
<meta name="author"
content="{{ .Page.Params.Author }}">
{{- end }}
{{- if .Page.Params.Excerpt }}
<meta name="description" content="{{ replace .Page.Params.Excerpt "\n" " " }}">
<meta name="description"
content="{{ replace .Page.Params.Excerpt "\n" " " }}">
{{- end }}
{{- $terms := union .Page.Params.Categories .Page.Params.Tags -}}
{{- $terms := union $terms .Page.Params.Keywords -}}
{{- if $terms }}
<meta name="keywords" content="{{ delimit $terms ", " }}">
{{- end }}
<meta name="keywords"
content="{{ delimit $terms ", " }}">
{{- else if .Site.Params.Keywords }}
<meta name="keywords"
content="{{ delimit .Site.Params.Keywords ", " }}">
{{- end -}}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment