Publish your website

Note: The sample files include the complete set of Creative Cloud Libraries and project files for this tutorial series. You can continue to build on your starting file in Part 1, or navigate to the relevant folder to use the starting file for each section.

Introduction

Welcome to the eighth and final part of this article series on creating your first website. This tutorial shows you how to set up a remote site in Dreamweaver. A remote site is usually a web server on a remote computer that holds copies of your local files. Users access the remote site when they view your pages in a browser.

This tutorial presents a very broad example of connecting to a remote server. It contains troubleshooting hints, but much depends on how your remote server is configured. When in doubt, consult your hosting company's help desk or your system administrator.

Learn about remote sites

After you create a website, the next step is to publish it by uploading the files to a remote server. This is where you store your files for testing, production, collaboration, and publication (depending on your environment).

Before you can proceed, you must have access to a remote web server—such as a hosting company's server, a server owned by the client you're working for, or an intranet server within your company. Also, some Internet Service Providers (ISPs) provide access to free web space as part of your contract for internet connection. If you don't have access to such a server, contact your ISP, your client, your system administrator, or one of the many hosting companies that provide web hosting packages. Some hosting packages are free, but usually insert advertisements into your site. An advertisement-free package can cost as little as a few dollars a month.

You also need to have a local site defined before you proceed. For more information, see Part 1 of this tutorial series, Project overview and site setup.

Note: For more information about Dreamweaver sites, see Set up a local version of your site in Dreamweaver Help.

Define a remote server

Dreamweaver site management is based on the principle that your local files are an exact duplicate of your live site on the internet. So, index.html in your bayside folder becomes the front page of your remote site. If you already have a live website that you don't want to overwrite, use your site's control panel to create a folder called bayside where you can upload the Bayside Beat files.

1. In Dreamweaver, select Site > Manage Sites.
   
   
2. In the Manage Sites dialog box, select the Bayside Responsive site.
   
   If you did not define the Bayside Responsive site, create a local folder for the site before you proceed. For more information, see Part 1 of this tutorial series, Project overview and site setup.
   
   
3. Click the Edit icon at the bottom left of the Manage Sites dialog box (see Figure 1).

4. In the Site Setup dialog box, click Servers to open the panel where you add your server definitions (see Figure 2).

Dreamweaver allows you to set up multiple server definitions for both remote and testing servers. However, only one of each type can be active at any given time.

5. Click the plus (+) button at the bottom left of the panel to add the remote server definition. This opens a new panel for you to enter the server details (see Figure 3).

6. In the Server Name text box, type a name for the server. This is used internally by Dreamweaver to identify the server, so you can choose any name you like. For example, you might want to create a definition for a server where you upload files for a client's approval, and a different server for the live site. If you have only the one server, call it Remote Server.
   
   
7. From the pop-up menu Connect using, select the method you want to use to connect to the server.
   
   The most common methods for connecting to a server on the Internet are FTP, SFTP, and FTP over SSL/TLS (also known as FTPS). Because the initials of each method are so similar, it’s easy to confuse them. If you aren't sure which to select, ask your hosting company or the server system administrator. Your choice will be limited by whatever your remote server supports.
   
   When you have made your choice, follow the instructions in the relevant section.

Connect using FTP

FTP stands for File Transfer Protocol. It’s the most basic way of connecting to a remote server. It’s less secure than the others, so you should use it only if your remote server doesn’t support SFTP or FTPS.

1. Enter the server's FTP address (for example, ftp.yourdomain.com) in the appropriate field.
   
   
2. The default port for FTP is 21. Change the value in the Port field only if instructed to do so by the administrator of your remote server.
   
   
3. Enter your username and password in the appropriate fields.
   
   
4. Click Test to test your connection.
   
   If the connection fails, verify that you have the correct username and password. Passwords are usually case-sensitive, so make sure that Caps Lock is not turned on. If that doesn't solve the problem, consult the troubleshooting section further down this page.
   
   
5. Dreamweaver automatically checks the Save Password check box. If deselect this check box, you’ll be prompted for your password each time Dreamweaver connects to the server.
   
   
6. Fill in the details for Root Directory and Web URL as described further down this page.

Connect using SFTP

SFTP stands for Secure File Transfer Protocol. It works the same way as FTP, but it uses an encrypted connection to the server, so is more secure. With SFTP, Dreamweaver offers the option of logging into the remote server using a username and password, or a private key file.

1. Select SFTP from the Connect Using drop-down menu.
   
   
2. Enter the server’s FTP address (for example, ftp.yourdomain.com) in the appropriate field.
   
   
3. The default port for SFTP is 22. Change the value in the Port field only if instructed to do so by the administrator of your remote server.
   
   
4. The default authentication method is to use a username and password. Enter the values in the appropriate fields (see Figure 4).

5. If you select the Private Key File radio button, the options change, as shown in Figure 5.

If your server supports connection using a private key file, enter your username in the Username field, then click the folder icon to the right of the Identity File field to browse for the local version of your private key file.

Some servers also require a passphrase. If necessary, enter that in the appropriate field. Dreamweaver automatically selects the Save Passphrase check box. If you deselect it, you’ll be prompted for the passphrase each time Dreamweaver connects to the server.

6. Click Test to make sure you can connect successfully to the remote server.
   
   If connection fails, make sure you have spelled everything correctly. Passwords and passphrases are usually case-sensitive. Make sure Caps Lock is not turned on.
   
   
7. Fill in the details for Root Directory and Web URL as described further down this page.

Connect using FTPS (FTP over SSL/TLS)

FTPS is a newer, more secure standard than SFTP. It connects to the remote server using the Secure Sockets Layer (SSL) or Transport Layer Security (TLS). It offers the extra security of authenticating the server’s credentials. In other words, it makes sure you’re connecting to a known server by checking the server’s security certificate.

1. From the Connect using drop-down menu, select FTP over SSL/TLS. There are two options:
   
   
   • Implicit encryption: The server terminates the connection if it doesn't receive a security request.
   • Explicit encryption: If the server doesn't receive a security request, it can choose to proceed with an insecure transaction, or to terminate/limit the connection. This connects on port 21.

Choosing either option displays the form shown in Figure 6.

2. Enter the server's FTP address (for example, ftp.yourdomain.com) in the appropriate field.
   
   
3. Implicit encryption connects on port 990, whereas explicit encryption uses port 21. Change the value in the Port field only if instructed to do so by the administrator of your remote server.
   
   
4. Enter your username and password in the appropriate fields.
   
   
5. Choose the method of checking the server’s security certificate from the Authentication drop-down menu. There are two options:
   
   
   • Trusted server: Use this if the server’s certificate is issued by a trusted certificate authority.
   • None: Use this if the server has a self-signed certificate. You're shown the certificate the first time you connect. If you accept its credentials, the certificate is added to Dreamweaver's trusted sites certificate store.
      
6. Click Test to test your connection.

If the connection fails, verify that you have the correct username and password. Passwords are usually case-sensitive, so make sure that Caps Lock is not turned on. If that doesn't solve the problem, consult the troubleshooting section further down this page.

7. Dreamweaver automatically checks the Save Password check box. If deselect this check box, you’ll be prompted for your password each time Dreamweaver connects to the server.
   
   
8. Fill in the details for Root Directory and Web URL as described in the next section.

Set the Root Directory and Web URL

The value that you need to enter in Root Directory is where many people go wrong, and it's difficult to give precise instructions because hosting companies and server administrators have different policies. The value of Root Directory should be the path you need to enter after logging into your server to get to the folder where you want to install index.html.

If you want the Bayside Beat home page to be the front page of your website, then this needs to be the path to the remote server's site root. On some servers, it's public_html. Others might use www, wwwroot, or even nothing at all. On my remote server, it needs to be /home/username/public_html. If in doubt, ask your hosting company or server administrator.

If you want the Bayside Beat home page to be in a subfolder called bayside, you need to enter the path to that folder. For example, on my server, it would be /home/username/public_html/bayside_beat.

The Web URL field should contain the URL for the folder that you defined as the Root Directory. For example, http://www.example.com/ or http://www.example.com/bayside/. Dreamweaver might have tried to guess the correct value, but it's only a guess. Do not accept the default value without checking it carefully.

If you’re connecting by SFTP, your settings should look similar to Figure 7.

Set advanced options

In most circumstances, there’s no need to change the advanced options for a server, but let’s take a quick look at them before saving the server definition.

1. Click the Advanced button at the top of the panel to display the advanced options (see Figure 8).

2. Maintain synchronization information is selected by default. This keeps track of when the files on your remote server were last updated, and allows you to use the Site Synchronization feature (see Synchronizing files in Dreamweaver Help).
   
   
3. Automatically upload files to the server on Save should rarely, if ever, be used because it overwrites your live files. If you make a mistake, it's immediately displayed on your remote site for all the world to see.
   
   
4. Enable file check-out is for use in a team environment. It allows only one person at a time to edit a page (see Checking in and checking out files in Dreamweaver Help).
   
   
5. Testing Server: These options apply only when defining a testing server for a website that uses a server-side technology, such as PHP, ASP.NET, or ColdFusion.
   
   
6. Click Save to register your server definition. This returns you to the Servers panel of the Site Setup dialog box, where your server definition is now listed (see Figure 9).

Dreamweaver selects the Remote radio button automatically.

The icons at the bottom of the Servers panel allow you to add another server, or to delete, edit, or make a copy of the selected server definition. Making a copy is useful if you need to change only a few details to connect to a different server.

You can define multiple remote servers for a site, but you can connect to only one at a time by selecting its radio button in the Remote column.

7. Click Save to close the Site Setup dialog box, and then click Done to close the Manage Sites dialog box.

Upload your local files

You can now upload your files from your local folder to the remote web server to make your pages publicly accessible.

1. The quick way to upload all the files in the current site is to select the site's local root folder at the top of the Files panel. However, the Bayside Responsive site contains the text content in Microsoft Word and rich text format, as well as folders showing the site at each stage of development.
   
   Hold down the Ctrl key (Windows) or the Cmd key (Mac), and select the following folders and files:
   
   
   • images
   • js
   • styles
   • index.html
   • sights.html
     
     
2. Click the Put Files (up arrow) icon in the Files panel toolbar (see Figure 10).

3. When Dreamweaver connects to the server, it displays a dialog box asking if you want to include dependent files in the transfer (see Figure 11).

The default is No. If you do nothing, the dialog box will close, and upload only those files that were selected in the Files panel.

Some people find the option to include dependent files convenient because it means that all files linked to those you have selected will be uploaded automatically. Think carefully before choosing Yes. You might be working on changes to your style sheet, but you aren’t ready to upload it yet. Clicking Yes will overwrite the style sheet on your live website if it’s linked to any of the files you’re uploading.

If you select the check box labeled "Don’t show me this message again," only the files selected in the Files panel will be uploaded. You can change your mind later by changing the options in the Site category of Dreamweaver Preferences.

4. Open your remote site in a browser to make sure all of the files uploaded correctly. Congratulations, you have a site online!
   
   If the Bayside Responsive site isn’t there, it almost certainly means that the value for Root Directory in your remote server definition isn’t pointing to the correct folder on the server. 

(Optional) Troubleshoot the remote server setup

If you need to edit the remote server settings, go to Site > Manage Sites, select the site from the list, and then click the pencil icon to open the Site Setup dialog box. Then select Servers from the list on the left, select the server you want to edit, and click the Edit existing server icon (see Figure 12).

A web server can be configured in many ways. The following list provides information about some common issues you may encounter in setting up a remote server and how to resolve them:

• The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access.
  
  
• For the Dreamweaver FTP implementation, you must connect to the remote system's root folder. (In many applications, you can connect to any remote directory, and then navigate through the remote file system to find the directory you want.) Be sure that you indicate the remote system's root folder (or the bayside subfolder) as the Root Directory. If you have problems connecting, and you've specified the host directory using a single slash (/), you might need to specify a relative path from the directory you are connecting to and the remote root folder. For example, if the remote root folder is a higher-level directory, you may need to use ../../ to specify the host directory.
  
  
• File and folder names that contain spaces and special characters often cause problems when transferred to a remote site. Use underscores in place of spaces, and avoid special characters—colons (:), slashes (/), periods (.), and apostrophes (') are not permitted in file or folder names.
  
  
• Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server's disk with another folder elsewhere. For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory; however, if you can connect to one part of the server but not to another, there may be an alias discrepancy.
  
  
• If you encounter an error message such as "cannot put file," your remote folder may be out of space. For more information, look at the FTP log.

In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Site > Advanced > FTP Log. For more information, see the extensive tech note on FTP troubleshooting on the Adobe website.