Storing Code Fragments On AWS S3

In the previous chapter, we wrote HTML code that allows us to feed the turtle, and in this code, we used an image that we uploaded to AWS S3 in a public bucket. But you may have noticed that reading the code from there was quite inconvenient due to the large number of styles.

I'm leading up to the fact that we can also upload certain code snippets to AWS S3, just like images. For example, in our case, it would be convenient to upload CSS styles for our HTML pages or applications to AWS in order to save space in the code.

Note

These styles will be quite easy to manage because if we need to change the styles everywhere they are used, we simply modify a few lines of code in the file on S3, thus changing the styles on all pages where we've referenced the link. Very convenient!

Let's take a look at the style file I want to upload to the storage:

Note

These styles are located in the index.css tab. Make sure to select the correct tab.

To add a file with styles to AWS S3, we first need to create this file and upload it to our public bucket:

Now, to use these CSS styles in HTML code, we need to use a very simple syntax:

In the case of linking to our styles, this line will look like this:

Let's see how much our code will be reduced after our changes and how it will look now:

If you click and follow this link, you'll see the contents of this file, namely the styles I wrote earlier. This way, both we and the users of our website can see what styles are stored on AWS and may want to borrow them from us.

Also, it's worth mentioning that we can also upload JavaScript scripts to S3. This is not the best practice because scripts often need editing and working with them, but in our case, we are learning, so let's do it and further streamline our code!

Below is the script that we will be uploading to our public bucket:

Now, we need to upload the JavaScript script file to our public bucket:

And now we need to use the following syntax to add the script to the code via the link:

After adding the script from AWS S3, our code for the turtle will look like this:

Note

By the way, you can once again view the script directly via the link.

The code looks good, doesn't it?

In the next chapters, we'll learn how to host entire HTML pages and create multi-page websites using AWS S3, so stay tuned!