JamStack is a popular modern architecture for creating web apps apps using JavaScript, APIs, and prerendered markup all delivered without web servers. The end result is fast, dynamic and more secure web sites that can cost significantly less than traditional approaches. In this session I’ll share how I build retrodevops.com using the JamStack architecture, Hugo and Azure as well as lessons learned along the way.
TeamStation AI System Report LATAM IT Salaries 2024
Building a website without a webserver on Azure
1. Todd Whitehead | Cloud Solution Architect |Microsoft
@TodWhitehead
Building a website without a
web server* on Azure
* well, at least not paying (much) for it
2. Goals
• Production Grade
• Low resting cost
• Scale quickly if required
• Let me focus on content
• Articles
• Rich Media
• Online C64 Emulator & BBS
Terminal
• Tagging and Searching
• Support DevOps
9. JAMStack
https://jamstack.org | https://jamstack.wtf/
JavaScript
APIs
Markup
Dynamic functionalities handled by JavaScript, no
restriction on which framework or library to use
Server side operations are abstracted into
reusable APIs and accessed over HTTPS with
JavaScript. These can be third party services or
your custom function.
Websites served as static HTML files.
Can be generated from source files, such
as Markdown, using a Static Site
Generator.
11. New Azure API Management developer portal
https://github.com/Azure/api-management-developer-portal
“Better performance,
scalability, and security—The
new portal has been completely
reengineered for simplicity,
performance gains, and
scalable distribution. It has a
lightweight architecture and
uses JAMstack technology. “
13. https://gohugo.io
• Extremely fast build times
(< 1 ms per page)
• Cross platform
• Renders changes on the fly as you develop
• Dynamic menu creation
• Permalink, redirects and pretty URL
support
• Powerful theming
39. Other API Options
Azure Functions Azure Search Azure Logic Apps Event Grid API Management
Event Grid APP Service AKS
40. Serverless Web Ref Architecture
https://docs.microsoft.com/en-us/azure/architecture/reference-architectures/serverless/web-app
https://github.com/mspnp/serverless-reference-implementation
41. Retrospective
• Running Compute & Allocated Memory $$$
• Storage, Networking $
• Serverless:
• Minimise time paying for stuff
• $$$ match demand
• Can reduce cloud running costs significantly by “denormalising” compute
usage
• Requires re-architecting apps
• Doesn’t need to be the whole app though
• Worth trying out new services & architectures
Notas del editor
Paying for capacity, whether its avm, an appservicr or AKS node, or database throughput. I can of course auto scale [Click] which helps better align cost with demand. But I still pay for that capacity whether its used or not.
When we talk about “The Stack,” we no longer talk about operating systems, specific web servers, backend programming languages, or databases.
JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript.
APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services
Markup: Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.
You may have already seen or worked on a JAMstack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator...
Better Performance: Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a CDN.
Higher Security: With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.
Cheaper, Easier Scaling: When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans.
Better Developer Experience: Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.
Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full html website.
Hugo makes use of Markdown files with front matter for meta data.
A typical website of moderate size can be rendered in a fraction of a second. A good rule of thumb is that Hugo takes around 1 millisecond for each piece of content.
It is written to work well with any kind of website including blogs, tumbles and docs.
General
Extremely fast build times (< 1 ms per page)
Completely cross platform, with easy installation on macOS, Linux, Windows, and more
Renders changes on the fly with LiveReload as you develop
Powerful theming
Host your site anywhere
Organization
Straightforward organization for your projects, including website sections
Customizable URLs
Support for configurable taxonomies, including categories and tags
Sort content as you desire through powerful template functions
Automatic table of contents generation
Dynamic menu creation
Pretty URLs support
Permalink pattern support
Redirects via aliases
Content
Native Markdown and Emacs Org-Mode support, as well as other languages via external helpers (see supported formats)
TOML, YAML, and JSON metadata support in front matter
Customizable homepage
Multiple content types
Automatic and user defined content summaries
Shortcodes to enable rich content inside of Markdown
“Minutes to Read” functionality
“Wordcount” functionality
Additional Features
Integrated Disqus comment support
Integrated Google Analytics support
Automatic RSS creation
Support for Go, Amber, and Ace HTML templates
Syntax highlighting powered by Chroma