Static Site Generation with Hugo and Markdown
•Download as PPTX, PDF•
2 likes•367 views
Learn about creating static websites, common for documentation portals and blogs, using a Golang tool called Hugo that converts Markdown to HTML.
Report
Share
Related slideshows
More Related Content
What's hot
What's hot (20)
Similar to Static Site Generation with Hugo and Markdown
Similar to Static Site Generation with Hugo and Markdown (20)
More from Nic Raboy
More from Nic Raboy (11)
Recently uploaded
Recently uploaded (20)
Static Site Generation with Hugo and Markdown
- 1. Static Site Generation with Hugo and Markdown Nic Raboy Tracy Developer Meetup Organizer
- 3. Content Management System (CMS) • WordPress, Drupal, Joomla, Ghost, etc. • Write with a rich text editor and WYSIWYG experience • Easy to use • Potentially inexpensive • Customizable within moderation • Web host configuration and domain maintenance is required
- 4. Hosted Content Management System • WordPress, Medium, Blogger, HubPages, Ghost, etc. • Write with a rich text editor and WYSIWYG experience • Very easy to use • Price depends on circumstance • Not very customizable • No web host or domain configuration required
- 5. Static Site Generators • Jekyll, Hugo, VuePress, etc. • Write in Markdown • Very inexpensive • High performance websites • No database or server side languages • Potentially difficult customizations • Web host and domain configurations required
- 9. How does it Work? • A theme (template) is downloaded or created • Markdown is written for each page, post, etc. • Variables are defined depending on the template ○ Configuration variables and front-matter variables • Static site generation converts Markdown to HTML • HTML and variables are injected into the theme placeholders • Generated HTML with theme is deployed
- 10. Sample Site
- 11. Template and Plugin Design • Jekyll templates use Liquid • Hugo templates use the Go text/template and html/template libraries • VuePress templates use Vue.js
- 12. Building a Website with Hugo
- 13. Installing Hugo with the Command Line
- 14. Creating a New Hugo Project
- 15. Picking a Hugo Theme
- 16. Installing a Hugo Theme
- 17. Creating Content
- 20. The Content Structure • archetypes - automated front-matter • content - posts, pages, or other Markdown to be generated • data - mock data and other static values • static - images and other media • themes - custom or downloaded theme templates
- 23. Hugo Hyde Theme
- 25. Customizing Hugo
- 26. The Layout Structure • _default ○ list.html ○ single.html ○ terms.html • index.html • 404.html
- 30. Partials and Shortcodes • Partials are reusable markup snippets within a theme ○ Example: Navigation menu ○ Example: Footer • Shortcodes are custom tags to be used within Markdown ○ Example: YouTube embed
- 31. Partials
- 32. Shortcodes
- 34. Optimizations Post-Build • CSS, HTML, and JavaScript minification • JavaScript and CSS concatenation • Inlining and stripping libraries • Compressing and resampling images • Affiliate link placement
- 35. Automatically Convert Affiliate Links with Gulp
- 36. Minify CSS, HTML, and JavaScript with Gulp
- 37. Rsync with Gulp
- 38. WordPress to Hugo: A Personal Story
- 39. Self-Hosted WordPress - Phase 1 • VPS on Digital Ocean - $5 + 20% (backups) per month ○ 512 MB Memory ○ 1 CPU Core • LAMP Stack • Database and page caching enabled • 30,000 page views per month • First 4 months of operation
- 40. Self-Hosted WordPress - Phase 2 • VPS on Digital Ocean - $10 + 20% (backups) per month ○ 1 GB Memory ○ 1 CPU Core • LAMP Stack • Database and page caching enabled • 100,000 page views per month • Phase 1 + 5 months
- 41. Self-Hosted WordPress - Phase 3 • VPS on Digital Ocean - $20 + 20% (backups) per month ○ 2 GB Memory ○ 2 CPU Cores • LAMP Stack • Database and page caching enabled • 200,000 page views per month • Phase 2 + 15 months
- 42. Self-Hosted Hugo - Phase 1 • VPS on Digital Ocean - $20 + 20% (backups) per month ○ 2 GB Memory ○ 2 CPU Cores • 1 GB total website size • 250,000 page views per month
- 43. Self-Hosted Hugo - Phase 2 (Future) • VPS on Digital Ocean < $10 per month • Amazon S3 < $5 per month • BlueHost < $5 per month
- 44. Closing Thoughts
- 45. Things to Do Start a blog!
- 46. Summary • Static websites are very fast and very cheap to operate • Static websites are good as documentation portals or blogs • Markdown has a mild learning curve • Ruby (Jekyll), Go (Hugo), Vue.js (VuePress) are only required when making customizations to themes and plugins • Encourages open contributions
- 47. Getting Help • Hugo - gohugo.io • Twitter - @nraboy • Blog - thepolyglotdeveloper.com
- 48. THANK YOU