Wordpress upload to amazon s3 hosting
Building Resilient Systems on AWS. Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.
Everyone knows that Amazon S3 is great for storing files. It's fast, inexpensive, and easy to setup. What you may not realize is that you can also host static websites on this robust platform.
What is a static website? In short, it's a website comprised of only HTML, CSS, and/or JavaScript. That means server-side scripts aren't supported, so if you want to host a Rails or PHP app, you'll need to look elsewhere. For simpler purposes, welcome to the wonderful world of hosting websites on S3!
Creating a Bucket
If you don't already have one, the first thing you'll need to do is sign up for an Amazon Web Services (AWS) account. It doesn't cost anything to sign up, but keep in mind you will need to pay for storage and transfer fees once you start putting objects on S3. (Don't worry, it's cheap! )
Once you create an account, you'll have access to the AWS Management Console .
This is where you'll go to create your first bucket. A bucket is similar to a folder on your hard drive, except it's in the cloud and it has virtually unlimited storage. There are a few things you need to know about buckets before creating one:
- Bucket names need to be unique across the entire S3 platform
- You can create a bucket in one of many supported regions around the world
- If you want to use a custom domain, your bucket name will need to be the same as your domain name
To create a bucket, navigate to S3 in the AWS Management Console and hit Create Bucket. You'll be prompted to enter a name and a region.
If you plan on using your own domain/subdomain, use that for your bucket name. For the region, pick the one closest to you and hit Create. With any luck, you'll see your new bucket appear in the console.
The only thing left to do is enable Static Website Hosting. Just select it from the panel on the right.
Make sure you set the Index Document to index.html. You can also set an error page if you want. When you're done, hit Save .
Well, that was easy. Now let's upload the homepage!
Uploading Your First Page
One nice thing about the AWS Management Console is that you can upload files to your bucket right from your browser. Let's start by creating one called index.html. This will be the contents of the homepage:
To upload it, select your new bucket and hit Upload .
Once you've uploaded index.html. it will appear in your bucket. However, you won't be able to see it in your browser yet because everything in S3 is private by default.
To make it public, right-click on index.html and select Make Public. (Remember to do this for any other files you upload to your website!)
Now that your homepage is visible to the world, it's time to test everything out! Select index.html in the console and go to the Properties tab.
Clicking the link will take you to your new homepage.
You'll notice that the address bar shows s3.amazon.com. This is the default URL for objects stored on Amazon S3. Let's setup a custom domain and really turn this into a website.
Using Your Own Domain
If your bucket name is the same as your domain/subdomain name, you can point it to your new website by creating a CNAME record in your domain's DNS settings. It should look something like this:
Remember to replace example.com with your own domain. After the DNS propagates (which could take up to 24 hours), you should be able to see your website by visiting the domain in a browser. If it doesn't show up, make sure your bucket name is exactly the same as your domain/subdomain and double check your DNS settings.
How to Edit Your S3 Website
Now that your website is up and running, you'll probably want to make changes to it. Alas, you can't install something like WordPress on Amazon S3. So how do you manage content?
Shameless plug: I recommend Surreal CMS. It links up to just about any site using FTP, SFTP, or Amazon S3 and it's dead simple to integrate. Take that homepage, for example. Let's make the entire thing editable:
Notice how I've wrapped the content in a
Setting Up Surreal
Adding Your Site
Start by creating an account. The first thing you'll see once you're in Surreal CMS is the sites page.
Select Add a New Site and you'll be taken to a form that asks for some information.
Enter your website's URL. Make sure you change the protocol to Amazon S3 and pick the correct region, otherwise Surreal won't be able to connect. You'll also need to enter your access key and secret key. If you don't have these handy, you can get them from the Security Credentials page in the AWS Management console. For added security, consider creating a separate access key just for this purpose.
Once you're finished, hit Submit and your site will appear in Surreal.
Enabling Pages
The next step is to enable your homepage for editing. Select your site and hit the Enable Pages button. A dialog will appear showing you the contents of your S3 bucket. Select index.html and then hit Done .
Congrats, you're ready to start editing!
Editing Pages
Remember how you added that editable class to the homepage earlier? Well, you're about to see why. The glorious thing about Surreal is that you'll be editing your page inline, just like it appears in the wild. Select it from the list and you'll be taken straight to the Live Editor.
Of course, you can make any changes you want in the editor-all the usual options are available. When you're done, go to Save > Publish and Surreal will save it to Amazon S3 for you!
Surreal also has a bunch of other great features that you'll find useful. To name a few:
- Inline editing
- Responsive UI
- Photo gallery editor
- Google Analytics dashboard
- Scheduled publishing
- Change notifications
- White-label support
While it isn't free, you can signup for a free trial and get a full month to play around with it. I may be biased, but it's definitely worth checking out ;)
And there you have it. Now you know how to setup a website on Amazon S3 and edit it with minimal effort. If you have questions, leave them in the comments. If you enjoyed this tutorial, let me know !
About Cory LaViska
Cory LaViska is the founder of A Beautiful Site, LLC.. a small development studio in Central Florida. He's responsible for things like Surreal CMS, DirtyMarkup, jQuery MiniColors, and PHP SimpleImage. Code with him on GitHub or follow him on Twitter, but whatever you do, always use a serial comma.
Related articles
Building Resilient Systems on AWS. Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS. Everyone knows that Amazon S3 is great for storing...
This is not your average “Building a WordPress Website” site. I am going to show you how you can create your own website based on WordPress, a static website which you can manage online and...
There are a lot of website hosts that give you the tools to create websites on their platforms. They let you create pages, blog posts, and even online stores. Most have excellent tools and...
All WP users please check tis news from Wordpress. Our autoinstaller is deactivated for Wordpress until the new version is checked and confirmed. https://goo.gl/i9z8Xz kind regards, Sven The...
Apr 22, 2014 16 minute read I love WordPress. I use it for nearly all the sites I build, I write plugins for it. I run this site on it. It s an awesome content management system and blogging...