Copyright 2016 Code Career Academy
Angular 2 and HexoStatic Meets Dynamic For the Best of Both Worlds!
Copyright 2016 Code Career Academy
Who am I?
Jeff Ammons
Microsoft MVP
Pluralsight Author
CEO/Chief Instructor at Code Career
Academy
25 Years Professional Experience in Software
Copyright 2016 Code Career Academy
• Full-Stack
• Node.js
• Microsoft
• SQL
Copyright 2016 Code Career Academy
What is a Static Website Generator?
• Store content as text files of Markdown and YAML
Copyright 2016 Code Career Academy
Sample Post Format
Copyright 2016 Code Career Academy
Sample Post Format
YAML
Copyright 2016 Code Career Academy
Sample Post Format
YAML
Markdown
Copyright 2016 Code Career Academy
Sample Post Format
YAML
Markdown
Rendered HTML Output
Copyright 2016 Code Career Academy
What is a Static Website Generator?
• Store content as text files of Markdown and YAML
• Run processor locally to convert to HTML files
Copyright 2016 Code Career Academy
What is a Static Website Generator?
• Store content as text files of Markdown and YAML
• Run processor locally to convert to HTML files
• Version with Git
Copyright 2016 Code Career Academy
What is a Static Website Generator?
• Store content as text files of Markdown and YAML
• Run processor locally to convert to HTML files
• Version with Git
• Deploy with Git
Copyright 2016 Code Career Academy
What is a Static Website Generator?
• Store content as text files of Markdown and YAML
• Run processor locally to convert to HTML files
• Version with Git
• Deploy with Git
• Serve plain files via any web server
Copyright 2016 Code Career Academy
Why Would I Want One?
•Speed
•Scalability
•Reliability
•Lower Attack Surface
•Version Control
•Tools
•Zero Lock-in
Copyright 2016 Code Career Academy
When does it make sense?
• Primarily content site
• Blog
• “Brochure-ware” Site
Copyright 2016 Code Career Academy
When does it NOT make sense?
• Everything else…
• It’s not called a “General Purpose Site Generator”…
• Unless…
• Rich client (single page app)
• Separate API
Copyright 2016 Code Career Academy
Traditional CMS: Writing
Copyright 2016 Code Career Academy
Traditional CMS: Writing
Copyright 2016 Code Career Academy
Traditional CMS: Writing
Copyright 2016 Code Career Academy
Traditional CMS: Reading
Copyright 2016 Code Career Academy
Traditional CMS: Reading
Copyright 2016 Code Career Academy
Traditional CMS: Reading
Copyright 2016 Code Career Academy
Traditional CMS: Reading
Copyright 2016 Code Career Academy
Traditional CMS: Reading
Copyright 2016 Code Career Academy
Static Site Generator: Writing
Copyright 2016 Code Career Academy
Static Site Generator: Writing
Copyright 2016 Code Career Academy
Static Site Generator: Writing
Copyright 2016 Code Career Academy
Static Site Generator: Generating
Copyright 2016 Code Career Academy
Static Site Generator: Generating
Copyright 2016 Code Career Academy
Static Site Generator: Generating
Copyright 2016 Code Career Academy
Static Site Generator: Generating
Copyright 2016 Code Career Academy
Static Site Generator: Generating
Copyright 2016 Code Career Academy
Static Site Generator: Publishing
Copyright 2016 Code Career Academy
Static Site Generator: Publishing
Copyright 2016 Code Career Academy
Static Site Generator: Publishing
Copyright 2016 Code Career Academy
Static Site Generator: Reading
Copyright 2016 Code Career Academy
Static Site Generator: Reading
Copyright 2016 Code Career Academy
Static Site Generator: Reading
Copyright 2016 Code Career Academy
Static Site Generator: Scaling
Copyright 2016 Code Career Academy
Static Site Generator: Scaling
Copyright 2016 Code Career Academy
Static Site Generator: Scaling
Copyright 2016 Code Career Academy
YAML
Markdown
CommonPost Format
Copyright 2016 Code Career Academy
YAML
YAML Ain't Markup Language
YAML is a human friendly data serialization
standard for all programming languages.
Source: yaml.org
Copyright 2016 Code Career Academy
Markdown
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
Source: http://daringfireball.net/projects/markdown/
Copyright 2016 Code Career Academy
Sample Post Format
Copyright 2016 Code Career Academy
Sample Post Format
YAML
Copyright 2016 Code Career Academy
Sample Post Format
YAML
Markdown
Copyright 2016 Code Career Academy
Sample Post Format
YAML
Markdown
Rendered HTML Output
Copyright 2016 Code Career Academy
Hexo Prerequisites
• Node.js
• Npm
• Git
• Text editor
Copyright 2016 Code Career Academy
Which Text Editor Should I Use?
• Sublime Text
• Visual Studio Code
• Atom
• Notepad++
• Vim
• Emacs
• [Insert any other editor you like here]
Copyright 2016 Code Career Academy
So basically Vim
• Or you’re wrong
Copyright 2016 Code Career Academy
Just Kidding!
• It’s really Emacs or nothing
Copyright 2016 Code Career Academy
But seriously…
• They are just text files
• Use whatever makes YOU happy
Copyright 2016 Code Career Academy
So Which Generator Should I Use?
• Which programming language makes you happy?
• Does the generator have enough critical mass?
• Developers
• Extensions
• Themes
Copyright 2016 Code Career Academy
https://www.staticgen.com/
Copyright 2016 Code Career Academy
Hexo
• Super simple
• Fast
• Easy to work with
• JavaScript
• Pick a generator that works with a language you like!
Copyright 2016 Code Career Academy
Super Easy Install
npm install hexo-cli -g
Copyright 2016 Code Career Academy
Create a New Blog
hexo init
npm install
Copyright 2016 Code Career Academy
Create a New post
hexo new “My New Post”
hexo new post “My New Post”
Copyright 2016 Code Career Academy
Test Blog Locally
hexo server
Copyright 2016 Code Career Academy
Generate Blog for Publishing
hexo generate
Copyright 2016 Code Career Academy
Just Enough Git
git init
git add .
git commit –m “My commit message”
git push origin master
Copyright 2016 Code Career Academy
Where Can I Deploy my Blog?
• GitHub Pages
• Azure Web App
• Windows Server
• Linux Server
• Raspberry Pi
• … Any web server
Copyright 2016 Code Career Academy
For Full Instructions…
• Check out my Pluralsight course!
• Build a Better Blog with a Static Site Generator
• https://www.pluralsight.com/courses/static-site-generator-build-better-blog
Copyright 2016 Code Career Academy
How About the Dynamic Bits??
• Hexo Widgets
• UI Elements supported by many themes
• Angular 2 Components are a nice fit
• React is also great
• jQuery and Vanilla JS also!
• Pick what works for you (like all my other advice!)
• Keep the static bits static and the dynamic bits dynamic!
Copyright 2016 Code Career Academy
Copyright 2016 Code Career Academy
Dynamic
Widget
Copyright 2016 Code Career Academy
Seasoning
• Dynamic widgets should be the salt and pepper on static content sites
• Don’t over do it!
• Otherwise it was never really a static content site
Copyright 2016 Code Career Academy
Where can I get dynamic content?
• REST APIs
• Public APIs
• Your own API sites
• Pre-gen JSON files
• Pre-gen HTML fragment
Copyright 2016 Code Career Academy
Example Widget/Component Sources
Meetup.com
Copyright 2016 Code Career Academy
Example Widget/Component Sources
MySite.com
Node.js
Ruby on Rails
ASP.NET
Copyright 2016 Code Career Academy
Example Widget/Component Sources
MySite.com
Node.js
Ruby on Rails
ASP.NET
OAUTH
Secure
the API
not the site
Copyright 2016 Code Career Academy
Resources
• https://hexo.io/
• https://www.staticgen.com/
• https://www.pluralsight.com/courses/static-site-generator-build-better-blog
• http://ammonsonline.com/top-5-reasons-to-blog-with-a-static-file-generator/
Copyright 2016 Code Career Academy
Contact Info
• https://www.pluralsight.com/authors/jeff-ammons
• Company: https://codecareeracademy.com
• Email: [email protected]
• Twitter: jeffa00
• Linked-In: jeffammons
• Blog: http://jeffa.tech
• User Group: http://ggmug.com
Copyright 2016 Code Career Academy
Demo