One place for hosting & domains

      Object

      Host a Static Site using Linode Object Storage


      Updated by Linode

      Contributed by

      Linode

      Note

      Object Storage is currently in a closed early access Beta, and you may not have access to Object Storage through the Cloud Manager or other tools. To gain access to the Early Access Program (EAP), open up a Customer Support ticket noting that you’d like to be included in the program, or e-mail objbeta@linode.com – beta access is completely free.

      Additionally, because Object Storage is in Beta, there may be breaking changes to how you access and manage Object Storage. This guide will be updated to reflect these changes if and when they occur.

      Why Host a Static Site on Object Storage?

      Static site generators are a popular solution for creating simple, fast, flexible, and attractive websites that are easy to update. You can contribute new pages and content to a static site in two steps:

      1. First, write the content for your site’s new page using Markdown, an easy-to-learn and light-weight markup language.

      2. Then, tell your static site generator to compile your Markdown (along with other relevant assets, like CSS styling, images, and JavaScript) into static HTML files.

      The second compilation step only needs to happen once for each time that you update your content. This is in contrast with a dynamic website framework like WordPress or Drupal, which will reference a relational database and compile your HTML every time a visitor loads your site.

      Benefits of Hosting on Object Storage

      Traditionally, these static HTML files would be served by a web server (like NGINX or Apache) running on a Linode. Using Object Storage to host your static site files means you do not have to worry about maintaining your site’s infrastructure. It is no longer necessary to perform typical server maintenance tasks, like software upgrades, web server configuration, and security upkeep.

      Object Storage provides an HTTP REST gateway to objects, which means a unique URL over HTTP is available for every object. Once your static site is built, making it available publicly over the Internet is as easy uploading files to an Object Storage bucket.

      Object Storage Hosting Workflow

      At a high-level, the required steps to host a static site using Object Storage are:

      1. Install the static site generator of your choice to your local computer.

      2. Create the desired content and build the site (using your static site generator).

      3. Upload the static files to your Object Storage bucket to make the content publicly available over the Internet.

      This guide will use Hugo to demonstrate how to create a static site and host it on Linode Object Storage. However, there are many other static site generators to choose from–Jekyll and Gatsby are popular choices, and the general steps outlined in this guide could be adapted to them. For more information on choosing a static site generator, see the How to Choose a Static Site Generator guide.

      Before You Begin

      1. Read the How to Use Linode Object Storage guide to familiarize yourself with Object Storage on Linode. Specifically, be sure that you have:

        • Created your Object Storage access and secret keys.
        • Installed and configure the s3cmd tool.
      2. Install and configure Git on your local computer.

      Install the Hugo Static Site Generator

      Hugo is written in Go and is known for being extremely fast to compile sites, even very large ones. It is well-supported, well-documented, and has an active community. Some useful Hugo features include shortcodes, which are an easy way to include predefined templates inside of your Markdown, and built-in LiveReload web server, which allows you to preview your site changes locally as you make them.

      1. Install Hugo on your computer:

        macOS:

        Linux/Ubuntu:

        • Determine your Linux kernel’s architecture:

          uname -r
          

          Your output will resemble the following:

            
          4.9.0-8-amd64
          
          
        • Navigate to Hugo’s GitHub releases page and download the appropriate version for your platform. This example command downloads version 0.55, but a newer release may be available:

          wget https://github.com/gohugoio/hugo/releases/download/v0.55.0/hugo_0.55.0_Linux-64bit.deb
          
        • Install the package using dpkg:

          sudo dpkg -i hugo*.deb
          
      2. Verify that Hugo is installed. You should see output indicating your installed Hugo’s version number:

        hugo version
        

      Create a Hugo Site

      In this section, you will use the Hugo CLI (command line interface) to create your Hugo site, initialize a Hugo theme, and add content to your site. Hugo’s CLI provides several useful commands for common tasks needed to build, configure, and interact with your Hugo site.

      1. Create a new Hugo site on your local computer. This command will create a folder named example-site and scaffold Hugo’s directory structure inside it:

        hugo new site example-site
        
      2. Move into your Hugo site’s root directory:

        cd example-site
        

        Note

        All commands in this section of the guide should be issued from your site’s root directory.

      3. You will use Git to add a theme to your Hugo site’s directory. Initialize your Hugo site’s directory as a Git repository:

        git init
        
      4. Install the Ananke theme as a submodule of your Hugo site’s Git repository. Git submodules allow one Git repository to be stored as a subdirectory of another Git repository, while still being able to maintain each repository’s version control information separately. The Ananke theme’s repository will be located in the ~/example-site/themes/ananke directory of your Hugo site.

        git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
        

        Note

        Hugo has many available themes that can be installed as a submodule of your Hugo site’s directory.
      5. Add the theme to your Hugo site’s configuration file. The configuration file (config.toml) is located at the root of your Hugo site’s directory.

        echo 'theme = "ananke"' >> config.toml
        
      6. Create a new content file for your site. This command will generate a Markdown file with an auto-populated date and title:

        hugo new posts/my-first-post.md
        
      7. You should see a similar output. Note that the file is located in the content/posts/ directory of your Hugo site:

          
        /home/username/example-site/content/posts/my-first-post.md created
        
        
      8. Open the Markdown file in the text editor of your choice to begin modifying its content; you can copy and paste the example snippet into your file, which contains an updated front matter section at the top and some example Markdown body text.

        Set your desired value for title. Then, set the draft state to false and add your content below the --- in Markdown syntax, if desired:

        /home/username/example-site/content/posts/my-first-post.md
         1
         2
         3
         4
         5
         6
         7
         8
         9
        10
        11
        12
        13
        14
        
        ---
        title: "My First Post"
        date: 2019-04-11T11:25:11-04:00
        draft: false
        ---
        
        # Host a Static Site on Linode Object Storage
        
        There are many benefits to using a static site generator. Here is a list of a few of them:
        
        - Run your own website without having to manage a Linode.
        - You don't need to worry about running a web server like Apache or NGINX.
        - Static website performance is typically very fast.
        - Use Git to version control your static website's content.


        About front matter

        Front matter is a collection of metadata about your content, and it is embedded at the top of your file within opening and closing --- delimiters.

        Front matter is a powerful Hugo feature that provides a mechanism for passing data that is attached to a specific piece of content to Hugo’s rendering engine. Hugo accepts front matter in TOML, YAML, and JSON formats. In the example snippet, there is YAML front matter for the title, date, and draft state of the Markdown file. These variables will be referenced and displayed by your Hugo theme.

      9. Once you have added your content, you can preview your changes by building and serving the site using Hugo’s built-in webserver:

        hugo server
        
      10. You will see a similar output:

          
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp| EN
        +------------------+----+
          Pages&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp| 11
          Paginator pages&nbsp&nbsp&nbsp&nbsp|  0
          Non-page files&nbsp&nbsp&nbsp&nbsp&nbsp|  0
          Static files&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|  3
          Processed images&nbsp&nbsp&nbsp|  0
          Aliases&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|  1
          Sitemaps&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|  1
          Cleaned&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp|  0
        
        Total in 7 ms
        Watching for changes in /home/username/example-site/{content,data,layouts,static,themes}
        Watching for config changes in /home/username/example-site/config.toml
        Serving pages from memory
        Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
        Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
        Press Ctrl+C to stop
        
        
      11. The output will provide a URL to preview your site. Copy and paste the URL into a browser to access the site. In the above example Hugo’s web server URL is http://localhost:1313/.

      12. When you are happy with your site’s content you can build your site:

        hugo -v
        

        Hugo will generate your site’s static HTML files and store them in a public directory that it will create inside your project. The static files that are generated by Hugo are the files that you will upload to your Object Storage bucket to make your site accessible via the Internet.

      13. View the contents of your site’s public directory:

        ls public
        

        Your output should resemble the following example. When you built the site, the Markdown file you created and edited in steps 6 and 7 was used to generate its corresponding static HTML file in the public/posts/my-first-post/index.html directory.

          
          404.html    categories  dist        images      index.html  index.xml   posts       sitemap.xml tags
            
        


        Track your Static Site Files with Git

        It’s not necessary to version control your site files in order to host them on Object Storage, but we still recommended that you do so:

        1. Display the state of your current working directory (root of your Hugo site):

          git status
          
        2. Stage all your files to be committed:

          git add -A
          
        3. Commit all your changes and add a meaningful commit message:

          git commit -m 'Add my first post.'
          

        Once you have used Git to track your local Hugo site files, you can easily push them to a remote Git repository, like GitHub or GitLab. Storing your static site files on a remote Git repository opens up many possibilities for collaboration and automating your static site’s deployment to Linode Object Storage. To learn more about Git, see the Getting Started with Git guide.

      Upload your Static Site to Linode Object Storage

      Before proceeding with this section ensure that you have already created your Object Storage access and secret keys and have installed the s3cmd tool.

      1. Create a new Object Storage bucket; prepend s3:// to the beginning of the bucket’s name:

        s3cmd mb s3://my-bucket
        

        Note

        Buckets names must be unique within the Object Storage cluster. You might find the bucket name my-bucket is already in use by another Linode customer, in which case you will need to choose a new bucket name.

      2. Initialize your Object Storage bucket as a website. You must tell your bucket which files to serve as the index page and the error page for your static site. This is done with the --ws-index and --ws-error options:

        s3cmd ws-create --ws-index=index.html --ws-error=404.html s3://my-bucket
        

        In our Hugo example, the site’s index file is index.html and the error file is 404.html. Whenever a user visits your static site’s URL, the Object Storage service will serve the index.html page. If a site visitor tries to access an invalid path, they will be presented with the 404.html page.

      3. The command will return the following message:

          
            Bucket 's3://my-bucket/': website configuration created.
              
        
      4. Display information about your Object Storage’s website configuration to obtain your site’s URL:

        s3cmd ws-info s3://my-bucket
        
      5. You should see a similar output. Be sure to take note of your Object Storage bucket’s URL:

          
              Bucket s3://my-bucket/: Website configuration
        Website endpoint: http://website-us-east-1.linodeobjects.com/
        Index document:   index.html
        Error document:   404.html
            
        

        Note

        The Linode Object Storage early access Beta provides SSL enabled by default. This means you can access your Object Storage bucket using https, as well.

      6. Use s3cmd’s sync command to upload the contents of your static site’s public directory to your Object Storage bucket. This step will make your site available publicly on the Internet. Ensure you are in your site’s root directory on your computer (e.g. /home/username/example-site):

        s3cmd --no-mime-magic --acl-public --delete-removed --delete-after sync public/ s3://my-bucket
        
        Option                          Description
        no-mime-magic Tells Object Storage not to use file signatures when guessing the object’s MIME-type.
        acl-public Sets the access level control of the objects to public.
        delete-removed Deletes any destination objects with no corresponding source file.
        delete-after Deletes destination files that are no longer found at the source after all files are uploaded to the bucket.
      7. Use a browser to navigate to your Object Storage bucket’s URL to view your Hugo site:

        Hugo Index Page

        Note

        It may take a minute or two after your s3cmd sync completes for the page to appear at your bucket’s website URL.

      8. If needed, you can continue to update your static site locally and upload any changes using s3cmd’s sync command from step 3 of this section.

      (Optional) Next Steps

      After uploading your static site to Linode Object Storage, you may want to use a custom domain for your site. To do this, you can add a CNAME entry to your domain’s DNS records that aliases it to your Object Storage bucket’s website URL. To learn about managing DNS records on Linode, see the DNS Manager and DNS Records: An Introduction guides.

      As noted before, it’s possible to trigger automatic deployments to the Object Storage service when you push new content updates to GitHub or GitLab. This is done by leveraging a CI/CD (continuous integration/continuous delivery) tool like Travis CI. Essentially, you would build your Hugo site within the Travis environment and then run the s3cmd sync command from it to your bucket.

      More Information

      You may wish to consult the following resources for additional information on this topic. While these are provided in the hope that they will be useful, please note that we cannot vouch for the accuracy or timeliness of externally hosted materials.

      Find answers, ask questions, and help others.

      This guide is published under a CC BY-ND 4.0 license.



      Source link

      How to Use Linode Object Storage


      Updated by Linode

      Contributed by

      Linode

      Note

      Object Storage is currently in a closed early access Beta, and you may not have access to Object Storage through the Cloud Manager or other tools. To gain access to the Early Access Program (EAP), open up a Customer Support ticket noting that you’d like to be included in the program, or e-mail objbeta@linode.com – beta access is completely free.

      Additionally, because Object Storage is in Beta, there may be breaking changes to how you access and manage Object Storage. This guide will be updated to reflect these changes if and when they occur.

      Linode’s Object Storage is a globally-available, S3- and Swift-compatible method for storing and accessing data. Object Storage differs from traditional hierarchical data storage (as in a Linode’s disk) and Block Storage Volumes. Under Object Storage, files (also called objects) are stored in flat data structures (referred to as buckets) alongside their own rich metadata.

      Additionally, Object Storage does not require the use of a Linode. Instead, Object Storage gives each object a unique URL with which you can access your data. An object can be publicly accessible, or you can set it to be private and only visible to you. This makes Object Storage great for sharing and storing unstructured data like images, documents, archives, streaming media assets, and file backups, and the amount of data you store can range from small collections of files up to massive libraries of information. Lastly, Linode Object Storage has the built-in ability to host a static site.

      Below you will find instructions on how to connect to Object Storage, and how to upload and access objects:

      1. First, you’ll need to create a key pair to access the service.

      2. Then, you’ll use choose from a variety of available first-party and third-party tools to access and use the service.

      Object Storage Key Pair

      The first step towards using Object Storage is to create a pair of keys for the service. This pair is composed of an access key and a secret key:

      • The access key allows you to access any objects that you set to have private read permissions.

        Note

        To use your access key when viewing a private object, you first need to generate a signed URL for the object. The signed URL is much like the standard URL for your object, but some extra URL parameters are appended to it, including the access key. Instructions for generating a signed URL can be found for each of the tools outlined in this guide.

      • Your secret key is used together with your access key to authenticate the various Object Storage tools with your Linode account. You should not share the secret key.

        Note

        Each Object Storage key pair on your Linode account has complete access to all of the buckets on your account.

      Generate a Key Pair

      1. Log in to the Linode Cloud Manager.

        Note

        Object Storage is not available in the Linode Classic Manager.

      2. Click on the Object Storage link in the sidebar, click the Access Keys tab, and then click the Create an Access Key link.

        Click on the 'Access Keys' tab.

      3. The Create an Access Key menu will appear.

        The 'Create an Access Key' menu.

      4. Enter a label for the key pair. This label will be how you reference your key pair in the Linode Cloud Manager. Then, click Submit.

      5. A window will appear that contains your access key and your secret key. Write these down somewhere secure. The access key will be visible in the Linode Cloud Manager, but you will not be able to retrieve your secret key again once you close the window.

        Your access key and secret key.

        You now have the credentials needed to connect to Linode Object Storage.

      There are a number of tools that are available to help manage Linode Object Storage. This guide explains how to install and use the following options:

      • The Linode Cloud Manager can be used to create buckets (you are currently not able to upload objects to a bucket from the Cloud Manager).

      • s3cmd is a powerful command line utility that can be used with any S3-compatible object storage service, including Linode’s. s3cmd can be used to create and remove buckets, add and remove objects, convert a bucket into a static site from the command line, plus other functions like syncing entire directories up to a bucket.

      • Cyberduck is a graphical utility available for Windows and macOS and is a great option if you prefer a GUI tool.

      Cloud Manager

      Create a Bucket

      The Cloud Manager provides a web interface for creating buckets. To create a bucket:

      1. If you have not already, log in the Linode Cloud Manager.

      2. Click on the Object Storage link in the sidebar, and then click on Add a Bucket.

        The Object Storage menu.

      3. The Create a Bucket menu will appear.

        The Create a Bucket menu.

      4. Add a label for your bucket. A bucket’s label needs to be unique within the cluster that it lives in, and this includes buckets of the same name on different Linode accounts. If the label you enter is already in use, you will have to choose a different label.

      5. Choose a cluster location for the bucket to reside in.

      6. Click Submit. You are now ready to upload objects to your bucket using one of the other tools outlined in this guide.

      s3cmd

      s3cmd is a command line utility that you can use for any S3-compatible Object Storage.

      Install and Configure s3cmd

      1. s3cmd can be downloaded using apt on Debian and Ubuntu, and Homebrew on macOS. To download s3cmd using Homebrew, run the following command:

        brew install s3cmd
        

        Note

        On macOS, s3cmd might fail to install if you do not have XCode command line tools installed. If that is the case, run the following command:

        xcode-select --install
        

        You will be prompted to agree to the terms and conditions.

        To install s3cmd on Debian or Ubuntu, run the following command:

        apt install s3cmd
        
      2. Once s3cmd has been installed, you will need to configure it:

        s3cmd --configure
        

        You will be presented with a number of questions. To accept the default answer that appears within the brackets, press enter. Here is an example of the answers you will need to provide:

        Access Key: 4TQ5CJGZS92LLEQHLXB3
        Secret Key: enteryoursecretkeyhere
        Default Region: US
        S3 Endpoint: us-east-1.linodeobjects.com
        DNS-style bucket+hostname:port template for accessing a bucket: us-east-1.linodeobjects.com
        Encryption password: YOUR_GPG_KEY
        Path to GPG program: /usr/local/bin/gpg
        Use HTTPS protocol: False
        HTTP Proxy server name:
        HTTP Proxy server port: 0
        

        Note

        It is not necessary to supply a GPG key when configuring s3cmd, though it will allow you to store and retrieve encrypted files. If you do not wish to configure GPG encryption, you can leave the Encryption password and Path to GPG program fields blank.

      3. When you are done, enter Y to save your configuration.

        Note

        s3cmd offers a number of additional configuration options that are not presented as prompts by the s3cmd --configure command. One of those options is website_endpoint, which instructs s3cmd on how to construct an appropriate URL for a bucket that is hosting a static site, similar to the S3 Endpoint in the above configuration. This step is optional, but will ensure that any commands that contain your static site’s URL will output the right text. To edit this configuration file, open the ~/s3.cfg file on your local computer:

        nano ~/.s3cfg
        

        Scroll down until you find the website_endpoint, then add the following value:

        http://%(bucket)s.website-us-east-1.linodeobjects.com/
        

      You are now ready to use s3cmd to create a bucket in Object Storage.

      Create a Bucket with s3cmd

      You can create a bucket with s3cmd issuing the following mb command, replacing my-example-bucket with the name of the bucket you would like to create. Bucket names need to be unique within the same cluster, including buckets on other Linode accounts. If you choose a name for your bucket that someone else has already created, you will have to choose a different name:

      s3cmd mb s3://my-example-bucket
      

      To remove a bucket, you can use the rb command:

      s3cmd rb s3://my-example-bucket
      

      Caution

      To delete a bucket that has files in it, include the --recursive (or -r) option and the --force (or -f) option. Use caution when using this command:

      s3cmd rb -r -f s3://my-example-bucket/
      

      Upload, Download, and Delete an Object with s3cmd

      1. As an example object, create a text file and fill it with some example text.

        echo 'Hello World!' > example.txt
        
      2. Now, transfer the text file object to your bucket using s3cmd’s put command, replacing my-example-bucket with the label of the bucket you gave in the last section:

        s3cmd put example.txt s3://my-example-bucket -P
        

        Note

        The -P flag at the end of the command instructs s3cmd to make the object public. To make the object private, which means you will only be able to access it from a tool such as s3cmd, simply leave the ‘-P’ flag out of the command.

        Note

        If you chose to enable encryption when configuring s3cmd, you can store encrypted objects by supplying the -e flag:

        s3cmd put -e encrypted_example.txt s3://my-example-bucket
        
      3. The object will be uploaded to your bucket, and s3cmd will provide a public URL for the object:

        upload: 'example.txt' -> 's3://my-example-bucket/example.txt'  [1 of 1]
        13 of 13   100% in    0s   485.49 B/s  done
        Public URL of the object is: http://us-east-1.linodeobjects.com/my-example-bucket/example.txt
        

        Note

        The URL for the object that s3cmd provides is one of two valid ways to access your object. The first, which s3cmd provides, places the name of your bucket after the domain name. You can also access your object by affixing your bucket name as a subdomain: http://my-example-bucket.us-east-1.linodeobjects.com/example.txt. The latter URL is generally favored.

      4. To retrieve a file, issue the get command:

        s3cmd get s3://my-example-bucket/example.txt
        

        If the file you are attempting to retrieve is encrypted, you can retrieve it using the -e flag:

        s3cmd get -e s3://my-example-bucket/encrypted_example.txt
        
      5. To delete a file, you can issue the rm command:

         s3cmd rm s3://my-example-bucket/example.txt
        

        Caution

        To delete all files in a bucket, include the --recursive (or -r) option and the --force (or -f) option. Use caution when using this command:

        s3cmd rm -r -f s3://my-example-bucket/
        
      6. To list all available buckets, issue the ls command:

        s3cmd ls
        
      7. To list all objects in a bucket, issue the ls command and supply a bucket:

        s3cmd ls s3://my-example-bucket
        

      Create a Static Site with s3cmd

      You can also create a static website using Object Storage and s3cmd:

      1. To create a website from a bucket, issue the ws-create command:

        s3cmd ws-create --ws-index=index.html --ws-error=404.html s3://my-example-bucket
        

        The --ws-index and --ws-error flags specify which objects the bucket should use to serve the static site’s index page and error page, respectively.

      2. You will need to separately upload the index.html and 404.html files (or however you have named the index and error pages) to your bucket:

        echo 'Index page' > index.html
        echo 'Error page' > 404.html
        s3cmd put index.html 404.html s3://my-example-bucket
        
      3. Your static site is accessed from a different URL than the generic URL for your Object Storage bucket. Static sites are available at the website-us-east-1 subdomain. Using my-example-bucket as an example, you would navigate to http://my-example-bucket.website-us-east-1.linodeobjects.com.

      For more information on hosting a static website with Object Storage, read our Host a Static Site using Linode Object Storage guide.

      Other s3cmd Commands

      To upload an entire directory of files, you can use the the sync command, which will automatically sync all new or changed files. Navigate to the directory you would like to sync, then enter the following:

      s3cmd sync . s3://my-example-bucket -P
      

      This can be useful for uploading the contents of a static site to your bucket.

      Note

      The period in the above command instructs s3cmd to upload the current directory. If you do not want to first navigate to the directory you wish to upload, you can supply a path to the directory instead of the period.

      Cyberduck

      Cyberduck is a desktop application that facilitates file transfer over FTP, SFTP, and a number of other protocols, including S3.

      Install and Configure Cyberduck

      1. Download Cyberduck by visiting their website.

      2. Once you have Cyberduck installed, open the program and click on Open Connection.

      3. At the top of the Open Connection dialog, select Amazon S3 from the dropdown menu.

        Open Cyberduck and click on 'Open Connection' to open the connection menu.

      4. For the Server address, enter us-east-1.linodeobjects.com.

      5. Enter your access key in the Access Key ID field, and your secret key in the Secret Access Key field.

      6. Click Connect.

      You are now ready to create a bucket in Object Storage.

      Create a Bucket with Cyberduck

      To create a bucket in Cyberduck:

      1. Right click within the window frame, or click Action, then click New Folder:

        Right click or click 'Action', then click 'New Folder'

      2. Enter your bucket’s name and then click Create. Bucket names need to be unique within the same cluster, including buckets on other Linode accounts. If the name of your bucket is already in use, you will have to choose a different name.

      To delete the bucket using Cyberduck, right click on the bucket and select Delete.

      Upload, Download, and Delete an Object with Cyberduck

      1. To upload objects with Cyberduck, you can simply drag and drop the object, or directory of objects, to the bucket you’d like to upload them to, and Cyberduck will do the rest. Alternatively, you can click on the Action button and select Upload from the menu:

        Click on the 'Action' button to use the file upload dialog.

      2. To make your objects publicly accessible, meaning that you can access them from the object’s URL, you need to set the proper READ permissions. Right click on the object and select Info.

      3. Click on the Permissions tab.

      4. Click the gear icon at the bottom of the window and select Everyone.

        Open the file permissions prompt by right clicking on the file and selecting.

      5. A new entry for Everyone will appear in the Access Control List. Next to Everyone, under Permissions column heading, select READ from the drop down menu.

        Set the permissions for 'Everyone' to READ.

        Your object is now accessible via the internet, at the URL http://my-example-bucket.us-east-1.linodeobjects.com/example.txt, where my-example-bucket is the name of your bucket, and example.txt is the name of your object.

      6. To download an object, right click on the object and select Download, or click Download As if you’d like to specify the location of the download.

      7. To delete an object, right click the object name and select Delete.

      Create a Static Site with Cyberduck

      To create a static site from your bucket:

      1. Select a bucket, then right click on that bucket or select the Action button at the top of the menu.

      2. Click on Info, and then select the Distribution (CDN) tab.

      3. Check the box that reads Enable Website Configuration (HTTP) Distribution:

        Check the box labeled 'Enable Website Configuration (HTTP) Distribution'

      4. You will need to separately upload the index.html and 404.html files (or however you have named the index and error pages) to your bucket. Follow the instructions from the Upload, Download, and Delete an Object with Cyberduck section to upload these files.

      5. Your static site is accessed from a different URL than the generic URL for your Object Storage bucket. Static sites are available at the website-us-east-1 subdomain. Using my-example-bucket as an example, you would navigate to http://my-example-bucket.website-us-east-1.linodeobjects.com.

        For more information on hosting a static website with Object Storage, read our Host a Static Site using Linode Object Storage guide.

      Next Steps

      There are S3 bindings available for a number of programming languages, including the popular Boto library for Python, that allow you to interact with Object Storage programmatically.

      More Information

      You may wish to consult the following resources for additional information on this topic. While these are provided in the hope that they will be useful, please note that we cannot vouch for the accuracy or timeliness of externally hosted materials.

      Find answers, ask questions, and help others.

      This guide is published under a CC BY-ND 4.0 license.



      Source link

      How To Use Object Methods in JavaScript


      Introduction

      Objects in JavaScript are collections of key/value pairs. The values can consist of properties and methods, and may contain all other JavaScript data types, such as strings, numbers, and Booleans.

      All objects in JavaScript descend from the parent Object constructor. Object has many useful built-in methods we can use and access to make working with individual objects straightforward. Unlike Array prototype methods like sort() and reverse() that are used on the array instance, Object methods are used directly on the Object constructor, and use the object instance as a parameter. This is known as a static method.

      This tutorial will go over important built-in object methods, with each section below dealing with a specific method and providing an example of use.

      Prerequisites

      In order to get the most out of this tutorial, you should be familiar with creating, modifying, and working with objects, which you can review in the “Understanding Objects in JavaScript” article.

      For additional guidance on JavaScript in general, you can review our How To Code in JavaScript series.

      Object.create()

      The Object.create() method is used to create a new object and link it to the prototype of an existing object.

      We can create a job object instance, and extend it to a more specific object.

      // Initialize an object with properties and methods
      const job = {
          position: 'cashier',
          type: 'hourly',
          isAvailable: true,
          showDetails() {
              const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";
      
              console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
          }
      };
      
      // Use Object.create to pass properties
      const barista = Object.create(job);
      
      barista.position = "barista";
      barista.showDetails();
      

      Output

      The barista position is hourly and is accepting applications.

      The barista object now has one property — position — but all the other properties and methods from job are available through the prototype. Object.create() is useful for keeping code DRY by minimizing duplication.

      Object.keys()

      Object.keys() creates an array containing the keys of an object.

      We can create an object and print the array of keys.

      // Initialize an object
      const employees = {
          boss: 'Michael',
          secretary: 'Pam',
          sales: 'Jim',
          accountant: 'Oscar'
      };
      
      // Get the keys of the object
      const keys = Object.keys(employees);
      
      console.log(keys);
      

      Output

      ["boss", "secretary", "sales", "accountant"]

      Object.keys can be used to iterate through the keys and values of an object.

      // Iterate through the keys
      Object.keys(employees).forEach(key => {
          let value = employees[key];
      
           console.log(`${key}: ${value}`);
      });
      

      Output

      boss: Michael secretary: Pam sales: Jim accountant: Oscar

      Object.keys is also useful for checking the length of an object.

      // Get the length of the keys
      const length = Object.keys(employees).length;
      
      console.log(length);
      

      Output

      4

      Using the length property, we were able to count the 4 properties of employees.

      Object.values()

      Object.values() creates an array containing the values of an object.

      // Initialize an object
      const session = {
          id: 1,
          time: `26-July-2018`,
          device: 'mobile',
          browser: 'Chrome'
      };
      
      // Get all values of the object
      const values = Object.values(session);
      
      console.log(values);
      

      Output

      [1, "26-July-2018", "mobile", "Chrome"]

      Object.keys() and Object.values() allow you to return the data from an object.

      Object.entries()

      Object.entries() creates a nested array of the key/value pairs of an object.

      // Initialize an object
      const operatingSystem = {
          name: 'Ubuntu',
          version: 18.04,
          license: 'Open Source'
      };
      
      // Get the object key/value pairs
      const entries = Object.entries(operatingSystem);
      
      console.log(entries);
      

      Output

      [ ["name", "Ubuntu"] ["version", 18.04] ["license", "Open Source"] ]

      Once we have the key/value pair arrays, we can use the forEach() method to loop through and work with the results.

      // Loop through the results
      entries.forEach(entry => {
          let key = entry[0];
          let value = entry[1];
      
          console.log(`${key}: ${value}`);
      });
      

      Output

      name: Ubuntu version: 18.04 license: Open Source

      The Object.entries() method will only return the object instance’s own properties, and not any properties that may be inherited through its prototype.

      Object.assign()

      Object.assign() is used to copy values from one object to another.

      We can create two objects, and merge them with Object.assign().

      // Initialize an object
      const name = {
          firstName: 'Philip',
          lastName: 'Fry'
      };
      
      // Initialize another object
      const details = {
          job: 'Delivery Boy',
          employer: 'Planet Express'
      };
      
      // Merge the objects
      const character = Object.assign(name, details);
      
      console.log(character);
      

      Output

      {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

      It is also possible to use the spread operator (...) to accomplish the same task. In the code below, we’ll modify how we declare character through merging the name and details objects.

      // Initialize an object
      const name = {
          firstName: 'Philip',
          lastName: 'Fry'
      };
      
      // Initialize another object
      const details = {
          job: 'Delivery Boy',
          employer: 'Planet Express'
      };
      
      // Merge the object with the spread operator
      const character = {...name, ...details}
      
      console.log(character);
      

      Output

      {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

      This spread syntax in object literals is also known as shallow-cloning.

      Object.freeze()

      Object.freeze() prevents modification to properties and values of an object, and prevents properties from being added or removed from an object.

      // Initialize an object
      const user = {
          username: 'AzureDiamond',
          password: 'hunter2'
      };
      
      // Freeze the object
      const newUser = Object.freeze(user);
      
      newUser.password = '*******';
      newUser.active = true;
      
      console.log(newUser);
      

      Output

      {username: "AzureDiamond", password: "hunter2"}

      In the example above, we tried to override the password hunter2 with *******, but the password property remained the same. We also tried to add a new property, active, but it was not added.

      Object.isFrozen() is available to determine whether an object has been frozen or not, and returns a Boolean.

      Object.seal()

      Object.seal() prevents new properties from being added to an object, but allows the modification of existing properties. This method is similar to Object.freeze(). Refresh your console before implementing the code below to avoid an error.

      // Initialize an object
      const user = {
          username: 'AzureDiamond',
          password: 'hunter2'
      };
      
      // Seal the object
      const newUser = Object.seal(user);
      
      newUser.password = '*******';
      newUser.active = true;
      
      console.log(newUser);
      

      Output

      {username: "AzureDiamond", password: "*******"}

      The new active property was not added to the sealed object, but the password property was successfully changed.

      Object.getPrototypeOf()

      Object.getPrototypeOf() is used to get the internal hidden [[Prototype]] of an object, also accessible through the __proto__ property.

      In this example, we can create an array, which has access to the Array prototype.

      const employees = ['Ron', 'April', 'Andy', 'Leslie'];
      
      Object.getPrototypeOf(employees);
      

      Output

      [constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

      We can see in the output that the prototype of the employees array has access to pop, find, and other Array prototype methods. We can confirm this by testing the employees prototype against Array.prototype.

      Object.getPrototypeOf(employees) === Array.prototype;
      

      Output

      true

      This method can be useful to get more information about an object or ensure it has access to the prototype of another object.

      There is also a related Object.setPrototypeOf() method that will add one prototype to another object. It is recommended that you use Object.create() instead as it is faster and more performant.

      Conclusion

      Objects have many useful methods that help us modify, protect, and iterate through them. In this tutorial, we reviewed how to create and assign new objects, iterate through the keys and/or values of an object, and freeze or seal an object.

      If you need to review JavaScript objects you can read “Understanding Objects in JavaScript.” If you would like to familiarize yourself with the prototype chain, you can take a look at “Understanding Prototypes and Inheritance in JavaScript.”



      Source link