Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

38
Build a Better Blog With a Static Website Generator http://ammonsonline.com https://www.pluralsight.com/courses/static-site-generator-build-better-blog

Transcript of Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Page 1: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Build a Better BlogWith a Static Website Generator

http://ammonsonline.com

https://www.pluralsight.com/courses/static-site-generator-build-better-blog

Page 2: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Who Am I?

• Jeff Ammons• Principal Architect

• Sage Software

• Pluralsight Author

• President• GGMUG

• Gwinnett, Georgia, Microsoft User Group

• 2nd Thursday

• Gwinnett Technical College

• http://GGMUG.com

Page 3: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

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

Page 4: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Why Would I Want One?

• Speed

• Scalability

• Reliability

• Lower Attack Surface

• Version Control

• Tools

• Zero Lock-in

Page 5: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Traditional CMS: Writing

Page 6: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Traditional CMS: Reading

Page 7: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Traditional CMS: Reading

Page 8: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Traditional CMS: Reading

Page 9: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Traditional CMS: Reading

Page 10: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Traditional CMS: Reading

Page 11: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Writing

Page 12: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Writing

Page 13: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Generating

Page 14: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Generating

Page 15: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Generating

Page 16: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Publishing

Page 17: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Reading

Page 18: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Reading

Page 19: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Scaling

Page 20: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Scaling

Page 21: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Static Site Generator: Scaling

Page 22: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

YAML

Markdown

CommonPost Format

Page 23: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

YAML

YAML Ain't Markup Language

YAML is a human friendly data serialization

standard for all programming languages.

Source: yaml.org

Page 24: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

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/

Page 25: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

Sample Post Format

Page 26: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Prerequisites

• Node.js

• Npm

• Git

• Text editor

Page 27: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Which Text Editor Should I Use?

• Sublime Text

• Visual Studio Code

• Atom

• Notepad++

• Vim

• Emacs

• [Insert any other editor you like here]

Page 28: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Hexo

• Super simple

• Fast

• Easy to work with

Page 29: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Super Easy Install

npm install hexo-cli -g

Page 30: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Create a New Blog

hexo init

npm install

Page 31: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Create a New post

hexo new “My New Post”

hexo new post “My New Post”

Page 32: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Test Blog Locally

hexo server

Page 33: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Generate Blog for Publishing

hexo generate

Page 34: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Just Enough Git

git init

git add .

git commit –m “My commit message”

git push origin master

Page 35: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Where Can I Deploy my Blog?

• GitHub Pages

• Azure Web App

• Windows Server

• Linux Server

• Raspberry Pi

• … Any web server

Page 36: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

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

Page 37: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

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/

Page 38: Build a Better Blog - ammonsonline.com · Build a Better Blog With a Static Website Generator

http://ammonsonline.com

Contact Info

• https://www.pluralsight.com/authors/jeff-ammons

• Twitter: jeffa00

• Google Plus: jeffa00

• Linked-In: jeffammons

• Blog: http://ammonsonline.com

• YouTube: http://youtube.com/ammonsonline

• SciFi/Humor: http://galacticbeacon.com

• User Group: http://ggmug.com