The simplest way to build your website

:)

What would I speak?

  • What is CMS, how does it work?, example.
  • What is SSG, how does it work, why should use it?, example.
  • Type of projects can be handled using SSG
  • The technologies behind my own website :)

CMS,

Framework,

or

Static Site Generator

CMS

  • October CMS (Laravel based)
  • Wordpress
  • Blogspot
  • Drupal
  • etc...

Framework

  • React.js
  • Vue.js
  • Laravel
  • etc...

Static Site Generator

  • Gatsby (React.js) - http://gatsbyjs.org
  • Next.js (React.js)
  • VuePress (Vue.js) - https://vuepress.vuejs.org
  • Nuxt.js (Vue.js)
  • Jekyll (Ruby) - https://jekyllrb.com
  • Hexo (Nodejs) - https://hexo.io
  • Hugo (Golang) - https://gohugo.io
  • etc...

SSG Grouping by languageĀ 

  • JavaScript: Next.js & Gatsby (for React), Nuxt & VuePress (for Vue), Hexo, Eleventy, GitBook, Metalsmith, Harp, Spike.
  • Python: Pelican, MkDocs, Cactus.
  • Ruby: Jekyll, Middleman, Nanoc, Octopress.
  • Go: Hugo, InkPaper.
  • .NET: Wyam, pretzel.

About Static Site Generator

(SSG)

taken from cloudcannon.com

What is it?

Static Site Generator (SSC) is a program that takes source file and converts it into a static website

Simply put, a static site generator takes your site content, applies it to templates, and generates a structure of purely static HTML files ready to be delivered to visitors.

Mathieu Dionne - Snipcart

How does the dynamic CMS work?

Templates

+

Content

*How does the dynamic CMS work

How does the

Static Site Generator work?

static file

*How does the SSC work

Why use them?

  • Less complexity
  • Fast load times
  • Security & reliability
  • Flexibility
  • Scalability
  • Growing ecosystem

What type of projects can be handle with them?

  • Blog or small personal websites
    • Jekyll for recommendation
  • Documentation
    • GitBook, also VuePress (used by Vuejs documentation)
  • E-Commerce
    • Gatsby & Nuxt
    • Or Jekyll or Hugo (if need to keep everything simple)
  • Marketing website
    • Middleman
  • and many more...

Other Reference

adopt from my own website :)

Technology I love to used

  • React.js - https://reactjs.org
  • styled-components - https://styled-components.com
  • mailgun - https://mailgun.com
  • emailjs - http://www.emailjs.com

Old style

New idea to show up Skills

References

Done

Thanks.

https://slides.com/rohmadst/rohmades15

Made with Slides.com