GitHub

How to setup static website hosting on Amazon S3

The Amazon Simple Storage Service, or Amazon S3, for short is very modern storage solution for your website. This service is all about connecting users to the cloud, with expanded features beyond just storing files; it's used for everything from backup and recovery to running cloud-based applications. It's flexible, fast and reaches across the world, making it an amazing option for hosting your static website, and it's scalable, so you don't need to blindly commit to a long-term contract like you would with a traditional host.

The big problem with getting started with hosting on this platform for a beginner, however, is that its scope is so broad that finding the right options and settings can be a real challenge if you're not familiar with the S3 interface, and the technical jargon that comes with it. We're here to help though, so in this guide we'll take you step-by-step in setting up static website hosting via Amazon S3.

Getting Started with Amazon S3 hosting

There's a lot of options on offer in the S3 interface, but we won't need to use most of them to get our site set-up, so don't worry if it seems bewildering at first; just follow the steps below!

  1. Head over to the Amazon S3 official website and click on the yellow Sign Up button at the top-right of the page.

    Amazon S3 website

  2. You'll need a free Amazon Web Services account to use this service; this is separate from your standard Amazon account so unless you've used AWS in the past you'll need to register. The procedure is very simple, but a credit card will be required even though the initial tier of service is free.

    Amazon S3 Sign In

  3. Once you've registered and/or logged-in, you'll be redirected to the AWS console. There's a lot of options here, but we don't need to worry about that; just highlight the Services menu at the top of the screen, then select the S3 item as seen in the screenshot.

    AWS Console S3

  4. On the next screen, click on the Create bucket button; think of a bucket as a place where you can dump files for different purposes, which in our case will be set to act as a website host.

    S3 Create Bucket

  5. Now we need to start entering the settings for your bucket, starting with the Bucket name and Region. You may call the bucket whatever you want, as it'll be just for your reference. For the region, simply set it to whichever location is closest to you. Once ready, click the Next button.

    Create Bucket Name and Region

  6. The next step in bucket creation is all about additional technical features like versioning or logging; the average user won't need to use these options so unless you're familiar with the options and know what you want to add, just leave the options disabled and click the Next button.

    S3 Bucket Properties

  7. Next is the Permissions, where you set who or what can get access to your files. Again, like the last section you can just leave these options as the default, which will only give access to your own AWS account.

    S3 Bucket Permissions

  8. The last step is a review of the options from the previous steps, so just click Create bucket to finish.

    S3 Bucket Review

  9. You'll be taken back to the main S3 overview screen, but now your newly-created bucket will appear in the list on this screen. Click on it to view the contents.

    List of buckets

  10. You'll see that your bucket is empty; we'll fix that soon, but first we need to sort out the settings. Click on the Properties tab at the top of the screen to view the various functions available for the bucket.

    S3 Bucket Properties

  11. There's some complex settings here, but we only need one; the Static website hosting option. Click on the box to enable it.

    S3 Static Website Hosting

  12. A new form will appear with some data to be added; first, click on the Use this bucket to hose a website radial button to enable it, then enter "index.html" (without quotes) in both the Index document and Error document fields, then click the Save button. Note the Endpoint URL at the top of the form; this will be useful soon.

    S3 Static Website Hosting Endpoint

  13. After saving, your bucket will be ready to be used as a static website host; to view your website you'll need to navigate to the Endpoint URL noted in the last step. Of course, your site doesn't have any files yet, but we're going to change that.

    S3 Endpoint Properties

  14. We'll need to get some credentials that will allow the Publii app to upload to your S3 bucket. Click on your username in the top menu, and then click on the My Security Credentials option.

    AWS Security Credentials

  15. On the Security Credentials screen, click on the Access Keys (Access Key ID and Secret Access Key) tab to expand it:

    S3 Access Key ID and Secret Access Key

  16. Then click on the Create New Access Key button:

    S3 Create New Access Key

  17. A popup will open with your Key ID and Secret Access Key; copy them and keep them in a safe place as they'll be very important for uploading your website via Publii. Remember; don't share your access key and/or secret key with anyone, as this could allow someone to access your storage and incur charges on your credit card.
  18. With the bucket created and access credentials generated, we're ready to add the information into Publii. Open the Publii app, then click on the Server option in the main menu. In the Protocol field, select Amazon S3, and fill out the rest of the details accordingly; make sure the bucket name, region, Access ID and Secret key match the settings you defined when first setting up your bucket. For the domain field, enter your endpoint URL that we noted in step 12.

    Publii Amazon S3 Settings

  19. With all the options filled out correctly, you're ready to save. Optionally, you can disable the Remove remote files option if you want all files, including unused files, to be uploaded during every sync. You may also add a Prefix to create subdirectories in your bucket for running multiple websites from a single bucket, but this is not recommended; instead, we suggest leaving this option blank and using one bucket per website. If you're all done, click on the Save settings button to store all your details.
  20. That's it! Your S3 hosting is ready to go, and Publii has all it needs to connect and upload your website files. Now click the Sync your website button to start uploading files; once it's done your website will be available to view at our endpoint URL.

So there you have it; there's quite a few steps to getting the hosting set-up, but nothing to stressful to deal with! If you want to run multiple sites via your S3 account, simply follow the steps to create another fresh bucket. We hope this guide helped you get started, and feel free to get in touch with us if you have any questions about using Amazon S3 with Publii.

Subscribe

Get the latest Publii news, updates and more delivered directly to your email inbox

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at contact@tidycustoms.net. By clicking below, you agree that we may process your information in accordance with our Privacy Policy.