Deploying Jekyll to AWS

Learn how to setup AWS S3, CloudFront, and Route 53 to host blazing fast Jekyll websites.

Given at JekyllConf 2019

Transcript

1. D E PLOYI N G J E KYL L T O AWS
2. @mloberg mlo.io
4. WH Y AWS?
5. WH Y AWS?
6. • Cheap • Fast • Reliable • Customizability WH Y AWS?
7. S E TU P
8. S E TU P • Create bucket
9. S E TU P • Create bucket
10. S E TU P • Create bucket
11. S E TU P • Create bucket • Add bucket policy
12. S E TU P • Create bucket • Add bucket policy
13. S E TU P • Create bucket • Add bucket policy
14. S E TU P • Create bucket • Add bucket policy
15. S E TU P • Create bucket • Add bucket policy
16. S E TU P • Create bucket • Add bucket policy • Add website configuration
17. S E TU P • Create bucket • Add bucket policy • Add website configuration
18. S E TU P • Create bucket • Add bucket policy • Add website configuration
19. S E TU P • Create bucket • Add bucket policy • Add website configuration • Upload site
20. S E TU P • Create bucket • Add bucket policy • Add website configuration • Upload site
21. S E TU P • Create bucket • Add bucket policy • Add website configuration • Upload site
22. A DVA N C E S E TU P
23. A DVA N C E S E TU P • Create Route 53 Zone
24. A DVA N C E S E TU P • Create Route 53 Zone
25. A DVA N C E S E TU P • Create Route 53 Zone
26. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate
27. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate
28. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate
29. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate • Create CloudFront Distribution
30. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate • Create CloudFront Distribution
31. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate • Create CloudFront Distribution
32. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate • Create CloudFront Distribution • Add Route 53 Record
33. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate • Create CloudFront Distribution • Add Route 53 Record
34. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate • Create CloudFront Distribution • Add Route 53 Record
35. A DVA N C E S E TU P • Create Route 53 Zone • Create SSL Certificate • Create CloudFront Distribution • Add Route 53 Record
36. D E P LOYM E N TS
37. D E P LOYM E N TS • Upload to S3
38. D E P LOYM E N TS • Upload to S3
39. D E P LOYM E N TS • Upload to S3 • Create CloudFront Invalidation
40. D E P LOYM E N TS • Upload to S3 • Create CloudFront Invalidation
41. D E P LOYM E N TS • Upload to S3 • Create CloudFront Invalidation
42. D E P LOYM E N TS • Upload to S3 • Create CloudFront Invalidation • Create IAM user just for deployments
43. D E P LOYM E N TS • Upload to S3 • Create CloudFront Invalidation • Create IAM user just for deployments
44. D E P LOYM E N TS • Upload to S3 • Create CloudFront Invalidation • Create IAM user just for deployments • Automate with Continuous Integration (CircleCI, Travis)
45. D E P LOYM E N TS • Upload to S3 • Create CloudFront Invalidation • Create IAM user just for deployments • Automate with Continuous Integration (CircleCI, Travis) https:/ /github.com/mloberg/mlo.io/blob/master/.circleci/config.yml
46. T I P S & T R I C KS
47. T I P S & T R I C KS • Redirect www to non-www
48. T I P S & T R I C KS • Redirect www to non-www
49. T I P S & T R I C KS • Redirect www to non-www
50. T I P S & T R I C KS • Redirect www to non-www • Add caching
51. T I P S & T R I C KS • Redirect www to non-www • Add caching • Add cache headers to S3 Objects
52. T I P S & T R I C KS • Redirect www to non-www • Add caching • Add cache headers to S3 Objects
53. T I P S & T R I C KS • Redirect www to non-www • Add caching • Add cache headers to S3 Objects • Add long caches to images or things that never change
54. T I P S & T R I C KS • Redirect www to non-www • Add caching • Add cache headers to S3 Objects • Add long caches to images or things that never change
55. T I P S & T R I C KS • Redirect www to non-www • Add caching • Add cache headers to S3 Objects • Add long caches to images or things that never change • Use hashed filenames to create long caches for CSS/JS
56. T H A N K YO U @mloberg mlo.io github.com/mloberg github.com/mloberg/mlo.io