Using server side includes or ssi ,AWS S3 - amazon-web-services

Is there any way to use ssi on cloudfront or or is it categorized as dynamic content?
I would like to have sections like a header, nav or sidebar be able to use one file.
example:i have some html files,they use the same "header" section,i only want to change "header.shtml" and all files will change. The html files sotrge with S3.
enter code here<!--#include virtual="/includes/header.shtml" -->

Amazon S3 does not support SSI. All content hosted on S3 is static content.
You could process the files locally before you upload them to S3 and handle any code includes. Then, once you have the final version, just upload that to S3.

Related

S3 Static site downloads index.html after uploading files

I have a static site that I served to s3 called tidbitstatistics.com
I wrote a script using boto3 to replace the files with new ones and since then, my site doesn't open - instead it downloads the index.html file.
From what I can tell, I didn't change any settings. The site was working fine before I re-uploaded the files. Since then, I deleted all the files and re-uploaded them manually, but I am still running into the same error.
I thought this might have to do with the file types, but they were the correct text/html file types when re-uploading manually and I am adjusting my script to specify file types when calling put_object instead of upload_file with boto3.
Static site hosting is turned on for that bucket and public permissions to read are set. I'm just not sure how s3 all of a sudden won't serve my static site.
I followed the answer here, but I don't see a Content-Disposition property.
Any help would be appreciated - web development is not my strong suit!

How do we host multiple HTML files in a single S3 bucket to get separate URLs for each file?

I'm new to using AWS S3. I need to host my privacy policy HTML page and T&C HTML page in the S3 bucket as static web pages. I need separate URLs for those two files but I can not create separate S3 buckets for each file. So is there any way to full fill my requirement?
I need this kind of URLs after hosting the pages in the S3 bucket
http://<bucket-name>.s3-website-<AWS-region>.amazonaws.com/privacypolicy.html
http://<bucket-name>.s3-website-<AWS-region>.amazonaws.com/termsandcondition.html
also, I can not create an index file for these HTML pages and after that link these HTML pages to that index file, because I need these URLs to link my mobile app. once the user clicks one of the links, the user should go to that page so that's why I need separate URL for these files.
You dont have to create separate bucket
Just create 2 HTML files for example site1.html and site2.html.
Here are the steps to follow
upload site1.html and site2.html
enable website hosting and enter site1.html instead of index.html
turn off block public access setting
add bucket policy to access bucket publicly https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html
access website using website hosting URL link, this will lead to site1.html, if you want to access site2.html just append site2.html to root address
for example
here is my link for site1.html
http://stack-trial.s3-website.ap-south-1.amazonaws.com/
Note: you can also access the site1.html using this http://stack-trial.s3-website.ap-south-1.amazonaws.com/site1.html.
for site2.html
http://stack-trial.s3-website.ap-south-1.amazonaws.com/site2.html

Whole new project inside a jekyll project

I have some website projects that I want to show case that have their own index.html files.
I want to make a route in my Jekyll website so that if I go asdf.com/project1/ I would see simply my project1.
Is this possible to do?
My project is deployed on amazon AWS S3 buckets, hosted on Cloudfront. Should I upload to the bucket and set up some kind of routing?
How would I go about doing this?
Thanks.
If you want S3 to show a specific HTML page when navigating to asdf.com/project1/ the easiest way to achieve this is by creating a file with corresponding key project1/index.html in that bucket.
Source here (bottom of page): http://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html
You have two options, put those pages inside Jekyll as "projectname/index.html" or an html file without extension.
If you don't want Jekyll to process them and just use the html do not add front matter to it and jekyll will just copy them to the output folder.
Then you may need to set the right content type when uploading the website to the S3 bucket.
You may find helpful to put that into a script: https://simpleit.rocks/having-pretty-urls-in-a-jekyll-website-hosted-in-amazon-s3/

How can I specify a default content-type for SVG files I upload to Amazon Web Services S3?

I use SVG files for images in my web app and S3 to serve my static content.
Every time I upload a new file to S3 I have to manually change that file's content-type by going to Properties > Metadata > "Content-Type". I change it to "image/svg+xml" so that web browsers will interpret it as an image. This works fine and all but is getting a bit old as I use a lot of svg files.
So, is there a way to specify that all SVG files should be served with the content-type of "image/svg+xml" by default?
EDIT: For what it's worth, this SO question is related as I am using Django Storages and S3 Boto.

S3 Static Website Only Displays Index.html (but not other dependent files)

I've been messing around with AWS lately and it definitely great. As a first test I'm trying to host the most basic static website via S3. The site is simply just one html file and a few javascript, css and image files.
Whenever I load the static URL the only thing that loads is the index.html file, its contents and for some strange reason the only image that loads is my avatar, yet all the images are stored in the same folder. All of the css, js and image files are also written as relative links too of course.
I've made sure all the files and folders permissions are set to "world" multiple times.
I also looked at the network tab in dev tools and its giving me 200's on every GET request.
I'm completely stumped as to why this is happening. Does anyone have an idea of what I'm missing?
The url is available at http://www.mikefisher.io.s3-website-us-east-1.amazonaws.com/
I should add that the site works perfectly locally as well as on a traditional web server.
I checked my browser console and it gives me this error which I think might have something to do with it.
Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream:
Fixed it!
The issue I was having is the metadata for the CSS files in Amazon S3 were set to 'binary/octet-stream' by default.
The way I fixed this was selecting the individual files in the bucket, clicking the properties tab, then in the meta-data section typing in 'text/css' as the value.