Angular 2 and Hexo. Static Meets Dynamic For the Best of Both Worlds! Copyright 2016 Code Career Academy

Transcription

1 Angular 2 and Hexo Static Meets Dynamic For the Best of Both Worlds!

2 Who am I? Jeff Ammons Microsoft MVP Pluralsight Author CEO/Chief Instructor at Code Career Academy 25 Years Professional Experience in Software

3 Full-Stack Node.js Microsoft SQL

4 What is a Static Website Generator? Store content as text files of Markdown and YAML

5 Sample Post Format

6 Sample Post Format YAML

7 Sample Post Format YAML Markdown

8 Sample Post Format Rendered HTML Output YAML Markdown

9 What is a Static Website Generator? Store content as text files of Markdown and YAML Run processor locally to convert to HTML files

10 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

11 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

12 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

13 Why Would I Want One? Speed Scalability Reliability Version Control Tools Zero Lock-in Lower Attack Surface

14 When does it make sense? Primarily content site Blog Brochure-ware Site

15 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

16 Traditional CMS: Writing

17 Traditional CMS: Writing

18 Traditional CMS: Writing

19 Traditional CMS: Reading

20 Traditional CMS: Reading

21 Traditional CMS: Reading

22 Traditional CMS: Reading

23 Traditional CMS: Reading

24 Static Site Generator: Writing

25 Static Site Generator: Writing

26 Static Site Generator: Writing

27 Static Site Generator: Generating

28 Static Site Generator: Generating

29 Static Site Generator: Generating

30 Static Site Generator: Generating

31 Static Site Generator: Generating

32 Static Site Generator: Publishing

33 Static Site Generator: Publishing

34 Static Site Generator: Publishing

35 Static Site Generator: Reading

36 Static Site Generator: Reading

37 Static Site Generator: Reading

38 Static Site Generator: Scaling

39 Static Site Generator: Scaling

40 Static Site Generator: Scaling

41 Common Post Format YAML Markdown

42 YAML YAML Ain't Markup Language YAML is a human friendly data serialization standard for all programming languages. Source: yaml.org

43 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:

44 Sample Post Format

45 Sample Post Format YAML

46 Sample Post Format YAML Markdown

47 Sample Post Format Rendered HTML Output YAML Markdown

48 Hexo Prerequisites Node.js Npm Git Text editor

49 Which Text Editor Should I Use? Sublime Text Visual Studio Code Atom Notepad++ Vim Emacs [Insert any other editor you like here]

50 So basically Vim Or you re wrong

51 Just Kidding! It s really Emacs or nothing

52 But seriously They are just text files Use whatever makes YOU happy

53 So Which Generator Should I Use? Which programming language makes you happy? Does the generator have enough critical mass? Developers Extensions Themes

54

55 Hexo Super simple Fast Easy to work with JavaScript Pick a generator that works with a language you like!

56 Super Easy Install npm install hexo-cli -g

57 Create a New Blog hexo init npm install

58 Create a New post hexo new My New Post hexo new post My New Post

59 Test Blog Locally hexo server

60 Generate Blog for Publishing hexo generate

61 Just Enough Git git init git add. git commit m My commit message git push origin master

62 Where Can I Deploy my Blog? GitHub Pages Azure Web App Windows Server Linux Server Raspberry Pi Any web server

63 For Full Instructions Check out my Pluralsight course! Build a Better Blog with a Static Site Generator

64 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!

65

66 Dynamic Widget

67 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

68 Where can I get dynamic content? REST APIs Public APIs Your own API sites Pre-gen JSON files Pre-gen HTML fragment

69 Example Widget/Component Sources Meetup.com

70 Example Widget/Component Sources MySite.com Node.js Ruby on Rails ASP.NET

71 Example Widget/Component Sources OAUTH Secure the API not the site MySite.com Node.js Ruby on Rails ASP.NET

72 Resources

73 Contact Info Company: Twitter: jeffa00 Linked-In: jeffammons Blog: User Group:

74 Demo