# Content Packs

<figure><img src="https://1117992216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuTGFiT4NJYmIEtmMvMTL%2Fuploads%2FH6uSA9H1gRcXqtBhCug3%2Fmedia-type-html.png?alt=media&#x26;token=1f3bea02-2004-4af7-b161-9d39e491f093" alt=""><figcaption></figcaption></figure>

## Using Static Websites

With html pages, you can create your own experience around the content you're sharing. To display content through a html page, simply add the html file and it's complementary folders to the jump drive.

### Instructions

{% stepper %}
{% step %}

### Add html files to your USB drive

Place the html file and associated sub-folders directly in the **main directory** (root) of your USB drive. Or, create a subfolder to place them in. If you're using a subfolder, use the title of the website to name it. This title will be displayed in the Butter Box portal.

<figure><img src="https://1117992216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuTGFiT4NJYmIEtmMvMTL%2Fuploads%2FRilvNRFMRt3u6ga9BB32%2FScreenshot%202025-08-16%20at%209.46.16%20PM.png?alt=media&#x26;token=f615ff87-b232-411d-9abc-7c1cc7d2cf60" alt=""><figcaption><p>USB directory when viewed in Finder on desktop</p></figcaption></figure>
{% endstep %}

{% step %}

### Connect to your Butter Box to view

Insert the USB drive into your Butter Box. When you open the Butter Box portal, tap **Explore USB**. If your files are in the root directory, this tap will open the static website. If your files are in a subfolder, navigate to the subfolder to open the website.
{% endstep %}
{% endstepper %}

### Things to Know

* The html page needs to work completely office. Everything it needs has to live right on the device where you open it. Think of it like packing a suitcase — if you don’t bring it with you, you won’t have it when you’re away from home. That means:

  * **The pages themselves** need to be saved on the computer. (eg. html files)
  * **The look and feel** (colors, fonts, menus, buttons) need to be stored too, not borrowed from the internet. (eg. styling and interactivity with CSS and javascript)
  * **Pictures, videos, and sounds** have to be copied over, not linked from somewhere else online.
  * **Special fonts or icons** (like those from Google Fonts) also need to be packed into the folder, not fetched from the web.
  * **Links between pages** should point to other saved pages in the same folder, not to the internet. You must use relative paths (e.g. `about/index.html`) instead of absolute web URLs.

  Once everything is saved locally, you can open the site’s main page and it will show up exactly the same — even if there’s no Wi-Fi or internet at all.

### Try It

* The zip file below contains a sample static website. To get a feel for how static websites work with butter—Download it. Unzip it. Then, add this set of files to your USB drive.

{% file src="<https://1117992216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuTGFiT4NJYmIEtmMvMTL%2Fuploads%2F0Dy9PPdEAtTyYZUZpDrP%2FSample%20Static%20Website.zip?alt=media&token=15868ea2-a885-4de2-b637-4101d08eb16a>" %}
