Video tutorial: Uploading your Tumult Hype document to a Web Server and Embedding Within Another HTML Page

Uploading to an FTP server

This quick video shows you the exact steps you need to take to get your Tumult Hype document exported + hosted on your server. If you are instead looking for a tutorial for embedding within another CMS or service, view our complete Exporting Guide.

FTP stands for 'File Transfer Protocol' and is the standard method of uploading files to web servers. For instructions on uploading to a webserver, read on:

There are only three things you'll need to get started:

  1. A web host to upload to, like Nearly Free Speech or Webfaction.
  2. An FTP program. You can find a list of good Mac FTP programs here. In this example, I'm using 'Transmit'.
  3. An exported Tumult Hype document.

First, make sure you can view your Hype document on your computer. Click the Preview icon in the toolbar and make sure everything works well.

Next, we'll export your Tumult Hype document to the Desktop. Go to File > Export to HTML5 > Folder. Select 'Desktop' as the location, then select the checkboxes 'Also save .html file' and 'Create Enclosing Folder'. This is the 'Export' process, which is explained further in the Exporting Documentation.

Connect to your FTP server using your FTP program. Cyberduck is a free FTP client that works well, but Transmit is our favorite. Once you connect, you can drag and drop your exported .html file and the resources folder to your server. In a web browser, insert the full URL of your document (make sure you include the .html file's name) and press enter to view your Tumult Hype project.

Now that you're a pro, you can automate the process of uploading your Hype document with Transmit using this guide:

Embedding within another HTML Page

If you'd like to embed your uploaded Tumult Hype document into another webpage, watch the following video:

The key to embedding your document in another web page is using the "Absolute URL", which is explained at 3:10. Click here to see that section.

Optimize your document

  • To ensure you have browser caching and compression enabled, read this thread.

  • If you're working on a large project, check out this tutorial, which contains some techniques for ensuring your visitors see your site quickly.

3 Likes