Static Site Generator
Introduction to SSG for beginner.
Click download in:
All slides in:
About Me 🙋🏻♂️!
Yet, another underachiever 👻.
But hey, I have my own blog 🎉.
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.
What is SSG🤔?
- SSG short abbreviation:
Static Sites Generator
- Static Sites:
Just plain HTML + CSS + JS
No dynamic server (backend)
Built once, on every change
Put on server
Serve as many request as needed.
What is SSG good for🤔?
- Company Profile
- Personal Blog
Just like mine.
- Official Site
Most Linux Distro use SSG.
- Any Static Sites:
Such as CSS Tricks.
- JAM Stack:
Modern Web Era, in contrast with LAMP stack.
What case is not🤔?
- Non tech savvy end user
should use blogger, or wordpress instead
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.
Why Static Sites 🤔?
More on Writing Content
- No complex backend:
Focus on frontend: Great theme.
- Local Copy:
Own Your Own Site
Free Hosting =💲 murah meriah
- 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
Other Technical Performance 🤠.
No server side processing.
- Less Security Issue:
SQL Injection and Vulnerablities.
Can be reliaby cached,
and maybe served as CDN.
- No scaling issue.
It is all just static html and assets.
Which Generator 🤔?
- Conventional (regular site):
Jekyll, Hugo, Hexo, Pelican, Eleventy.
- Modern (web app):
Gatsby, Nuxt, Next.
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.
Even with a ready to use theme,
you still need customization to suit your needs.
- Some are easy to install.
- Some are harder for non tech-savvy.
Depend on the choice of SSG.
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.
Split HTML Task
Structure (Layout, and Skeleton)
- Markdown Engine:
clear division between these two tasks.
Theme Making 🦋
- Template Engine:
Block and Basic Coding
- HTML Skeleton:
Presenting Nice Looks
liquid, ejs, nunjucks, jinja2, etc...
- Block Building
- Basic Language:
Variable, Loop, Conditional
- Static Data Files:
from yaml, or toml, or json
- Specific Feature:
Inside a Page
Markdown or HTML
Step by Step Examples 🤠?
More examples on Repository (11ty, Jekyll, Pelican).
Why Markdown 🤔?
More on Writing 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!
Whenever design changes.
- Error prone.
Dad, I forget to close the tag again.
Markup focus on document formatting.
Markdown Content 🤠
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.
Implementation may vary
Each static site, have their own markdown engine.
Be aware of slight difference.
When you need special formatting.
- HTML Page
Such as landing page content.
- Embedded Content in Markdown Page
Such as nice looks table of content.
- Use Git!
Friendly neighbourhood backup platform.
- No weird file naming.
- Time travelling is possible.
OMG. I deleted my great idea last month!
- Multiple branch while making themes enhancement
branch: Master, development, bootstrapv4, bulma
- Simple setup for CI/CD
- Repository and Host:
Gitlab, Github, Bitbucket
Travis, Circle-CI, Pipelines, Gitlab-CI
- Host and CI/CD:
Netlify, Zeit Now, Firebase
CI/CD - Deploy Overview
- Netlify, Zeit Now (Vercel)
- Manual Git: Refspec, Worktree
- CircleCI: Github, Bitbucket
- Github Workflows (Actions)
Both github.io, and gitlab.io,
can directly utilize any SSG.
Issue with Static Site 🙈
- No commenting system:
- No internal search.
- Local build time,
For site with many article,
Or theme design with poor logic.
In Need of a Technical Material 🤠?
Yet Another Presentation.
Along with local communities 🤠.
- Static Site Generator:
- Template Engine:
Nunjucks, Jinja2, EJS, Liquid, Template,
CVS: Git, Mercurial: freekelasgithub,
Repository: Gitlab, Github, Bitbucket,
CI/CD: Travis, Circle-CI, Pipelines: IDDevOps,
Static Host: Netlify, Render, Zeit Now.
Don't be shy 🙋🏻♂️!
Thank You for Your Time.