WEBSITE HOSTING TUTORIAL:

TURN YOUR PROJECT INTO A LIVE

WEBSITE WITH THIS STEP BY STEP GUIDE

OVERVIEW

This tutorial guides you through taking a high-fidelity Axure RP project and turning it into a live website hosted on Axure Share. This is an easy, low cost solution for a portfolio or static website—all you need to purchase is a domain. The tools in Axure Share allow you to assign custom page titles, pretty URLs, and meta descriptions for Search Engine Optimization (SEO) purposes.Plugins allow for custom HTML or JavaScript, which is useful for analytics. You can learn more about Axure Share in this article.


Websites hosted on Axure Share are free in exchange for a small "Made with Axure" ad that appears briefly when the website loads. The ad only starts displaying after you unblock search engines.

 

We'll take an example website prototype, upload it to Axure Share, set the default page and pretty URLs, purchase a domain, point the domain to Axure Share, add the domain to our Axure Share account, and assign the custom domain to the project. When we're done, we'll have a fully functioning website hosted on Axure Share.

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

LET'S BEGIN

If you don't have your own Axure RP project file and want to follow along using our example project, download the AxureCreativeAgencyWeb.rp file.

MORE RESOURCES

Congratulations on your new website! Let us know about it. Please post it on this forum thread.

© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

PART 1: UPLOAD RP FILE TO AXURE SHARE

STEP 1: UPLOAD YOUR PROJECT TO AXURE SHARE

Log in to your Axure Share account or sign up for an account if you don't have one.


Open the workspace you would like the project to be located in. On the next page, click "New Project". In the Create a New Project dialog, name the project, optionally set a password, and select the rp file. Click the Create button.

 

Alternatively, you can upload your rp file from Axure RP by going to "Publish > Publish to Axure Share.


For our example website, we will name the project Creative Agency, assign it a password, and then upload the CreativeAgencyWeb.rp file.

 

STEP 2: SET THE DEFAULT PAGE

After the project is created, mouse over the gear icon at the far right and click "File + Settings". On the next page, click the "Pretty URLs" tab.

 

Click "Assign" in the "Default Page" box to open the Assign Default Page dialog. In the dropdown, select which page you want for your home page. Then, click "Set as Default".

 

By assigning a default page, the URL for your chosen page will now be www.yoursitename.com instead of www.yoursitename.com/page_name. This will also remove the sidebar from the prototype. (Note: If needed, you can open the prototype with the sidebar by navigating to www.yoursitename.com/start.html.)

 

For the Creative Agency we are choosing the Home page as the default.

 

STEP 3: ASSIGN A CUSTOM PAGE TITLE AND A PRETTY URL

The Pretty URLs page lists all the pages of the prototype, allowing for easy editing of custom page titles, pretty URLs and meta descriptions. These items are useful for SEO purposes.


Edit all pages at once, or do one at a time. Add custom page titles, pretty URLs, and meta descriptions for your project, then click save.

 

PART 2: PURCHASE A DOMAIN

STEP 1: PICK A DOMAIN NAME

If you do not already have a domain, you need to register one. First you need to pick a domain name that is available.


For this tutorial we are going to register the domain using GoDaddy. There are many domain registrars that you can choose from, pick the one you want to use.


Look for the domain search on your domain registrar's website and enter the name of the domain you would like. For our tutorial we want creativeagencyweb.com, so we enter that in the search box and click search.

STEP 2: REGISTER THE DOMAIN

Once you find a domain name that is available, you need to register the domain (purchase it).


Remember you are going to have free hosting on Axure Share. You do not need to buy web hosting. You only need to buy the domain.


You will need to choose how long to register the domain for. GoDaddy offers a variety of options when you purchase a domain including private registration and email. Other domain registrars may have additional options. Purchase what is appropriate for your situation.

PART 3: POINT YOUR DOMAIN TO SHARE.AXURE.COM

STEP 1: USE THE DNS TOOLS TO OPEN THE DNS ZONE FILE

Once you have your domain, you need to point it to Axure Share. Log in to your account and navigate to the DNS management section. Open the DNS Zone File. A Zone File is where the DNS records are stored for a domain.


For our GoDaddy account, click the Launch button in the Domains section on the My Account page. On the Domains page that opens, from the dropdown next to the domain name, click on Manage DNS. This puts us in the DNS Zone File.


Your new domain may be "Parked", so you may have to set it to "DNS only" or remove parking somehow. GoDaddy parks the domain that you just purchased, but once you follow the steps below you will automatically activate the domain and unpark it.

STEP 2: POINT CNAME TO SHARE.AXURE.COM

A CNAME record points to a domain name. CNAMEs only work on subdomains like "www" or "ftp". It is used to point your subdomain to your host.


Use your domain registrar's tools to create a CNAME record for www to point to share.axure.com.


In our GoDaddy account, scroll to find the CNAME section of the Zone File, find the www record, edit the record so that it points to share.axure.com, then save the record and then save the file. This sets www.creativeagencyweb.com to point to Axure Share.

STEP 3: REDIRECT THE ROOT DOMAIN USING FORWARDING (GO DADDY)

If you used GoDaddy to register your domain you can take advantage of the Forwarding Domains service they provide to redirect the root domain. Steps 3 and 4 explain how to use the service. If you didn't use GoDaddy, search to see if your domain registrar provides a similar service, if not, skip to Step 5.


In our GoDaddy account, exit the Zone File by clicking All Domains near the top of the page. On the Domains page, click the dropdown next to the domain name, then click Forward Domain.

STEP 4: EDIT FORWARDING

GoDaddy provides a domain name forwarding service that allows you to automatically direct your website visitors to a different website. It uses a 301 redirect from, in our case, creativeagencyweb.com to www.creativeagencyweb.com.


In GoDaddy, add forwarding for the domain and fill in the information in the Edit Forwarding dialog. We want to forward to www.creativeagencyweb.com, use a permanent 301 redirect and set it to forward only (we don't need it to mask). Also, make sure to check the box to update the nameservers and DNS settings to support this change. Sometimes the DNS settings don't update correctly, then you need to set the A record in the Zone File to 50.63.202.1 which is GoDaddy's forwarding IP address.

STEP 5: REDIRECT THE ROOT DOMAIN (NON-GO DADDY)

Another way to redirect the root domain (also known as the apex record or naked domain) is to use a free web service to do the 301 redirect. This is the easiest way to do it especially if your domain registrar does not offer their own forwarding. You could do this in GoDaddy and not do Steps 3 and 4.


An example of a free service that does this is wwwizer.com. All you need to do is set your apex A record, usually denoted as @, to point to 174.129.25.170 and the service does the redirect.


To do this in GoDaddy, get into the Manage DNS (Zone File). In the A (Host) section, edit the @ record to point to 174.129.25.170, save the record and save the file.

DOMAIN PROPAGATION

When you make changes to the CNAME and A records in your Zone File, it can take a bit of time for the changes to take effect.

 

You can use an online DNS propagation checker like whatsmydns.net to check how DNS propagation is going. For example, you could check the A record for creativeagencyweb.com or the CNAME record for www.creativeagencyweb.com.

PART 4: ADD THE DOMAIN TO AXURE SHARE

STEP 1: ADD YOUR DOMAIN TO YOUR AXURE SHARE ACCOUNT

In Axure Share, click "Domains" in the main menu along the top, then click the "Add Domain" button. In the Add New Domain dialog that appears, enter your domain, then click the "Add" button.

 

Keep in mind that each domain can only be added to one Axure Share account and the domain can only be assigned to one project.

 

STEP 2: UNBLOCK SEARCH ENGINES

Click the blue button that says Unblock Search Engines. This allows search engines to index the pages of the project assigned to this domain.

 

Note that when you unblock search engines there is a small "Made with Axure" ad that will be displayed momentarily when the website loads or when the cursor is hovered near the bottom of the page.

 

STEP 3: ASSIGN THE DOMAIN TO YOUR PROJECT

Visit the Workspaces tab. Open the workspace or folder the project is located in. Mouse over the gear icon to the right of the project's URL, and select "File + Settings". On the next page, click "Assign Custom Domain" and select your domain in the droplist.

 

STEP 4: TEST IT OUT

Test out your domain and root domain. For our tutorial site, type in www.creativeagencyweb.com and creativeagencyweb.com in the browser address bar. Note the small "Made with Axure" ad that displays at the bottom of the screen.