The Document
This article contain all article slides. Slide by slide, so anyone can copy desired slide, without the need to open the Impress slide, or the PDF version.
I believe, a ready to use slide, is useful to help people in the group discussion.
Original Presentation
I usually draft a presentation in a simple text based, that I can write down in any text editor.
Then I show in web based for a few moment (actually months). This give time to append any additional material freely, create necessary figure, and also correct any typo, or even dead links.
You can watch the presentation here:
This text based presentation is the most authentic version, with all the links required provided.
Impress
This presentation is made in LibreOffice Impress, using candyclone template.
You can download the Impress document from a page in here:
With this downloadable document, you can use the style of this presentation, for use with your own presentation works, either for school material, office works, homeworks, or anything else.
You can also download the exported pdf from a page in here:
The pdf version cannot contain animation. So the content might be little different, compared with the original Impress document.
Inkscape
The Impress pages also utilize diagram illustration made in Inkscape. I also provide the source image in SVG format, that you can download from a page in here:
Here is the preview.
Or better, you can get it all from candyclone illustration:
I intentionally share the source SVG image, so you can alter the content for your own personal use. I know there are already so many stock images for presentation, I just need to share, what I have, with tutorial. This way, anyone can make pretty presentation easier. Of course you still have to learn Inkscape, to suit the illustration for your own use.
Template
What is this candyclone rubbish?
Candyclone is an Impress template that I have made for LibreOffice contest.
There are also other free templates as well in lumbung
repository.
This candyclone is just an example template that you can use freely. With this candyclone example you can also learn how to make your own template. Your very own template to suit your ecosystem.
Disagreement
What if I do not agree?
The source is available, so you can freely make your own slide. Feel free to express your thoughts, either with text, or illustration.
The Slides
Here I represent all the slides.
Slide 01: Cover
Static Site Generator
Introduction to SSG for beginner
Slide 02: About The Author
I have my own blog.
Slide 03: About This Material
After watching this, you will understand:
How SSG can be utilized to make a fully mature website without the burden of complicated backend.
This material is not really comprehensive. I still have so much to learn.
Slide 04: Chapter Break
Slide 05: What is Static Site Generator?
What is SSG?
-
SSG short abbreviation:
- Static Sites Generator
-
Static Sites:
- Just plain HTML + CSS + JS
-
Static:
- No dynamic server (backend)
-
Generated:
- Built once, on every change
- Put on server
- Serve as many request as needed.
Slide 06: What is SSG good for?
What is SSG good for?
-
Company Profile
- or Portfolio.
-
Personal Blog
- Just like mine.
-
Official Site
- Most Linux Distro use SSG.
-
Any Static Sites:
- Such as CSS Tricks.
-
JAM Stack:
- Dynamic sites utilizing javascript,
- Modern Web Era, in contrast with LAMP stack.
Slide 07: Blog Preview
Slide 08: What case is not?
What case is not?
-
Non tech savvy end user
- should use blogger, or wordpress instead.
-
Startup
- With a lot of infrastructure.
-
Dynamic website
- Anything that require login
-
Walk your dog, or feed your cat
- You still have to do it yourself.
Slide 09: Which Generator?
Which Generator?
-
Conventional (regular site)
- Jekyll, Hugo, Hexo, 11ty, Pelican
-
Modern (web app)
- Gatsby, Next, Nuxt
More Reference: CSS Tricks: Comparing Static Site Generator Build Times
Slide 10: Chapter Break
Slide 11: Why Static Sites?
Why Static Sites?
-
Markdown:
- More on Writing Content
-
No complex backend:
- Focus on frontend: Great theme.
-
Local Copy:
- Own Your Own Site
- Git-able
-
Cheap:
- Free Hosting =💲 murah meriah.
Slide 12: Tech Savvy
Tech Savvy
-
Embrace modern technology 🤠:
- SPA, JAM stack, serverless, CI/CD.
-
OS Agnostic (simpler ecosystem)
- No racial issue, between Windows, Mac and Linux/BSD user.
-
Many SSG Choice Options:
- Jekyll, Hugo, Hexo, Pelican, Gatsby, 11ty.
-
Easier to migrate content between generator.
- After all, it is just markdown.
-
Easier to port tailor made custom theme.
- No scary language feature.
-
Way cooler web developer:
- Over traditional CMS
Slide 13: Other Technical Performance
Other Technical Performance.
-
Fast:
- No server side processing.
-
Less Security Issue:
- SQL Injection and Vulnerablities.
-
Cacheable
- Can be reliaby cached, and maybe served as CDN.
-
No scaling issue.
- It is all just static html and assets.
Slide 14: Chapter Break
Slide 15: Simplified User Tasks
User Tasks: Only consist of this two tasks:
- Design Theme and Layout
- Writing Content, then Deploy
No complex backend setting.
It means, more focus on the content. Especially, with 3rd party theme.
Slide 16: SSG Caveat
Even with a ready to use theme, you still need customization to suit your needs.
Slide 17: Install SSG
Install
- Some are easy to install.
- Some are harder for non tech-savvy.
Depend on the choice of SSG.
Slide 18: Own Your Own Site
You can have it all locally.
-
Writing content in your favorite text editor.
-
No upload image: Edit image directly in your notebook.
-
No need to dump database.
In short: More control.
Slide 19: Chapter Break
Slide 20: Split HTML Task
Split HTML Task:
-
Theme:
- Structure (Layout, and Skeleton)
-
Markdown Engine:
- Formatting
In short: clear division between these two tasks.
Slide 21: Theme Making
Theme Making 🦋
-
Template Engine:
- Block and Basic Coding
-
HTML Skeleton:
- Layout Structure
-
Stylesheet:
- Presenting Nice Looks
Slide 22: Template Engine
Template Engine
liquid, ejs, nunjucks, jinja2, etc…
-
Block Building
-
Basic Language:
- Variable, Loop, Conditional
-
Static Data Files:
- from yaml, or toml, or json
-
Specific Feature:
- Pipeline
Slide 23: Stylesheet Presentation
Yet Another Presentation:
You might also need to understand CSS Tools.
Slide 24: Main Configuration
Main Configuration: Contain: Global Stuff.
Slide 25: Inside a Page
Inside a Page
-
Frontmatter:
- Per-page configuration
-
Content:
- Markdown or HTML
Slide 26: Chapter Break
Slide 27: Step by Step Examples?
Free Tutorials!
- Eleventy Overview (Nunjucks + Bulma MD)
- Jekyll Overview (Liquid + No Stylesheet)
- Hugo Summary (Template + Bulma)
- Hugo Summary (Template + Bootstrap)
- Hexo Overview (EJS + Bulma)
More examples on Repository (11ty, Jekyll, Pelican).
Slide 28: Chapter Break
Slide 29: Why Markdown?
More on Writing Content 🤠!
Slide 30: Issue with HTML Content
Issue with HTML Content
-
Time spent on doing formatting.
- Wasted time = Less creativity.
-
Easily get lost of concentration in writing.
- Dammit, my article is sucks!
-
Reformatting:
- Whenever design changes.
-
Error prone.
- Dad, I forget to close the tag again.
In short: Markup focus on document formatting.
Slide 31: Markdown Content
Markdown Content
Recipe: Markdown focus on document structure.
-
Easier to write content.
- Plain Text = Painless Text.
-
HTML formatting taken care by markdown engine.
- Significantly reduce formatting time while writing content. Consistent formatting, by not doing manually.
-
Inline Code.
- Parsed, auto format with nice color.
-
Text editor is sufficient.
- No need for sophisticated tools.
Slide 32: Markdown Engine
Implementation may vary
Each static site, have their own markdown engine. Be aware of slight difference.
Slide 33: HTML Content
HTML Content
When you need special formatting.
-
HTML Page
- Such as landing page content.
-
Embedded Content in Markdown Page
- Such as nice looks table of content.
Slide 34: Chapter Break
Slide 35: Track Changes
Track Changes
-
Use Git!
- Friendly neighbourhood backup platform.
-
No weird file naming.
- my-revision-content.rev1.final.revagain.txt
-
Time travelling is possible.
- OMG. I deleted my great idea last month!
-
Multiple branch while making themes enhancement
- branch: Master, development, bootstrapv4, bulma
Slide 36: Chapter Break
Slide 37: Deploying Choices
Deploying Choices
-
Simple setup for CI/CD
-
Repository and Host:
- Gitlab, Github, Bitbucket
-
CI/CD:
- Travis, Circle-CI, Pipelines, Gitlab-CI
-
Host and CI/CD:
- Netlify, Zeit Now, Firebase
Slide 38: Configuration Examples
Link:
Configuration Examples
-
Netlify, Zeit Now (Vercel)
-
Manual Git: Refspec, Worktree
-
Travis+Github
-
CircleCI: Github, Bitbucket
-
Github Workflows (Actions)
Both github.io, and gitlab.io, can directly utilize any SSG.
Slide 39: Repositories
Slide 40: Chapter Break
Slide 41: Issues with Static Site?
Issue with Static Site
-
No commenting system:
- Except embedded.
-
No internal search.
-
Local build time,
- For site with many article, Or theme design with poor logic.
Slide 42: Chapter Break
Slide 43: Again, Free Tutorials?
Step by Step Examples
-
Hugo Repository
-
Jekyll Repository
-
Pelican Repository
-
Eleventy Repository
-
Hexo Repository
Slide 44: In Need of a Technical Material?
Technical Materials
Slide 45: Chapter Break
Slide 46: Summary
Summary: Along with Local Communities
-
Static Site Generator
- Jekyll
- Pelican
- Eleventy (11ty)
- Hugo
- Hexo
- Gatsby
-
Text
- Markdown
- reStructured Text
-
Template Engine
- Nunjucks, Jinja2, EJS, Liquid, Template.
- Local Community: JAMstackID
-
Deploy
- CVS: Git, Mercurial: freekelasgithub
- Repository: Gitlab, Github, Bitbucket
- CI/CD: Travis, Circle-CI, Pipelines: IDDevOps
- Static Host: Netlify, Render, Zeit Now.
Slide 47: Looking for the right tools?
Link:
Learning The Hard Way.
Slide 48: What’s Next?
Leverage to JAM stack!
Slide 49: Questions
Don’t be shy!
Slide 50: Thank You
Thank you for your time.