Static Site Generator
Introduction to SSG for beginner.
About Me 🙋🏻♂️!
Yet, another underachiever 👻.
But hey, I have my own blog 🎉.
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 cached, and maybe served as CDN.
- No scaling issue.
It is all just static html and assets.
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 customize 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, chroma, ejs, nunjucks, etc...
- Block Building
- Basic Language:
Variable, Loop, Conditional
- Static Data Files:
from yaml, or toml, or json
- Specific Feature:
Markdown or HTML
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
gitlab, github, bitbucket, netlify, firebase
Issue with Static Site 🙈
- No commenting system:
- No internal search.
- Local build time,
For site with many article,
Or theme design with poor logic.
What is Next 🤔?
Leverage to JAM stack!
Don't be shy 🙋🏻♂️!
Thank You for Your Time.