Open source template for building static web sites with Prismic.io and AWS S3(futurice.com)

83 pointsby ykarikosvor 10 Jahren21 comments

Open source template for building static web sites with Prismic.io and AWS S3

http://futurice.com/blog/cms-done-right-vol-3

22 comments

jaxonduvor 10 Jahren

Thinking of moving a static site to S3 + CloudFront + AWS Certificate Manager with the purpose of enabling HTTPS for the site. Seems like CloudFront does not support index document even if you've enabled it on S3 (https://tiffanybbrown.com/2016/01/aws-certificate-manager-s3...). You can't have URL such as https://example.com/about/. Instead need to specifically use URL https://example.com/about/index.html.

Will look into Netlify and Aerobatic next. Are there other PaaS/SaaS that makes it easy to host HTTPS static site generated from Jekyll/Hugo?

adyusvor 10 Jahren

I'm using index document paths on S3 + CloudFront right now, it's definitely possible. Unfortunately, I don't remember exactly what I did to make it work. Some more Googling might give you the answer.

Edit: the setting is called "Default Root Object" when setting up a CloudFront distribution with an S3 origin.

jjnoakesvor 10 Jahren

Does that setting apply to any subdirectory? The article linked in a comment above states otherwise.

brandurvor 10 Jahren

> Does that setting apply to any subdirectory? The article linked in a comment above states otherwise.

No, unfortunately it doesn't.

One workaround that I use is to upload files without an extension and explicitly set their content type as `text/html` in S3. So a request to `/about` just serves a file in your S3 bucket called `about`. This works with both CloudFront and S3.

I wrote about a few more details of the process here: https://brandur.org/fragments/aws-static-hosting-workaround

jaxonduvor 10 Jahren

Are you doing HTTPS? According to the article, the problem exists when running over HTTPS.

yanokwavor 10 Jahren

I use and like https://github.com/laurilehmijoki/s3_website.

kasbahvor 10 Jahren

I use Kloudsec CDN to get HTTPS on my static sites. It's very easy to set up and free (certificates are from Let's Encrypt). You can use it for custom domains on GitHub pages as well.

https://www.kloudsec.com/

[deleted]vor 10 Jahren

owencontivor 10 Jahren

That is not true. This site is built with Hugo hosted on S3, running behind CloudFront and uses the AWS Certificate Manager:

https://owenconti.com/about/

owencontivor 10 Jahren

Replying to myself as a follow up:

Make sure the S3 bucket is set to Static Website Hosting mode, and make sure your Index and Error documents are set appropriately. Then make sure your CloudFront distribution is pointed at the Website's endpoint and NOT the normal S3 endpoint.

dwightgunningvor 10 Jahren

That's exactly my configuration and works like a charm.

owencontivor 10 Jahren

I initially had issues because I was pointing CloudFront at the normal S3 endpoint. Once that was solved, everything started working smoothly.

neogenixvor 10 Jahren

What we do is create a static site using Jekyll (or any other SSG) and then add teletext.io on top for content management. Then host it in S3 or GitHub pages.

See: https://medium.com/teletext-io-blog/empower-your-static-gene...

drijkhofvor 10 Jahren

I like the simplicity of just using a static site setup with a SSG, nice!

rvwaverenvor 10 Jahren

I saw teletext.io on product hunt this week, pretty cool.

cyberferretvor 10 Jahren

Seems pretty cool. I host several static web sites on S3 and am pretty happy with the results. I am presuming that this toolset will make collaboration and organisation of said sites much better.

Question - How well does it work if the S3 website is linked to a CloudFront CDN? Does it take care of asset versioning or URL invalidations when updates are done? That is by far the most tedious part of S3 Web + CloudFront for me. I just invalidate the whole site from top down whenever I make changes just to make sure I don't miss anything, but a more automated, granular approach would be better, and I am hoping that Prismic can assist?

sadachevor 10 Jahren

Here is a very quickstart tutorial to test prismic.io https://prismic.io/quickstart

Don't hesitate to ask questions!

virtualwhysvor 10 Jahren

^ co-creator of the Play! Framework

disclaimer: no affiliation with Prismic.io

...and Play is really quite awesome, thanks Guillaume and Sadache! Thanks for the open bar you guys sponsored after Scala.io Paris conference as well ;-)

0xCMPvor 10 Jahren

This is a pretty nice setup for those who aren't technical or couldn't be expected to setup a local environment to test in.

I used to work in IT at a place with used this GOD-AWFUL CMS that did this similarly but was written in apparently jQuery-plugin-hell and ASP.NET Forms. The website to edit was slow (many seconds per page. In page JS actions took many seconds) and required manual deploys.

Code could not be edited outside the browser editors (PHP, JS, etc.)

So a system that publishes a static site on S3 fairly easily seems like a win to me.

shortformblogvor 10 Jahren

Oh man, this is clever. Out of curiosity, can Prismic's content editor be made to work with a secondary CMS like WordPress or Drupal without a lot of trouble?

One of the problems I've run into as a writer is that … well, nearly every copy editing tool out there sucks, and the ones that didn't (Poetica, Editorially) inevitably don't have a business model and get bought out.

nirvor 10 Jahren

What's the advantage of S3+CDN over plain GitHub Pages?

owencontivor 10 Jahren

HTTPS for custom domains is why I didn't go with GitHub Pages.