If you are someone who can build a mobile-first responsive website but have not yet published one to the world wide web, then yes. It also offers insight into the website publishing process for those of you less familiar with, but interested in, the process.
Why this website?
The purpose of this site is to inform you about purchasing a domain name and hosting while instructing you how to publish your sites to the internet. Initially it may take a couple hours to get things going, but once a successful connection to the remote server is made, it will only take seconds to update your site.
What will we walk through?
How to research, choose and purchase a domain name.
How to research, choose, and purchase a hosting package.
How to set up an FTP account.
How to synchronize local and remote websites.
What do you need to start?
An internet connection.
A finished website.
Access to Adobe Dreamweaver CC.
Potential problems:
Finding a domain name that you like.
Setting up the FTP account.
Getting access to Adobe Dreamweaver CC.
How much will it cost?
The tutorial is free and you should be able to obtain a domain name for $10–$15 and a starter hosting package for about $60 annually. You can download a free 30-day trial to Adobe Dreamweaver or subscribe to it for $20/month
Rent a Domain Name
A domain name is the address to your website. Examples of domain names are apple.com and adobe.com. Sure, you could stumble to those websites by browsing the web, but just like your home, it makes it much easier for visitors to arrive if they know where to go instead of driving around all night.
Choose a name for your website
Most hosting companies like QTH.com have a search tool to help find available domain names.
The search results often offer suggestions and variations if your seach isn’t available.
Search for a domain name while naming and branding the company. Don’t pick a business name you can’t get a domain name for.
A shorter domain name is better.
If possible, find a .com. It’s what most people think of when typing url’s.
Avoid-hyphens-in-the-domain-name. People tend to forget to type them in.
If you are building a site to showcase yourself, look for your actual name.
If you are looking for freelance or contract work, consider thinking up a catchy “business” name.
Rent the name for your website
Once a domain is rented nobody else can use it until the rental expires.
Domain names can be rented annually or on a multi-year basis.
If you keep up the rent payments, your domain name can be yours forever.
Search engines like Google put more weight into multi-year registrations.
If you do not want the world to know your (or a clients) contact information, consider adding private registration. Without it, all of your registration details are public knowledge through the Whois Database (including name, address, and phone number).
Rent a Hosting Package
For a website to be visible, it needs to live on a server somewhere where internet browsers like Chrome and Safari can access it. Many companies offer the rental of a folder on their server, a service known as hosting.
Rent server space.
For a site to be visible on the web, put the local site files onto a remote host server.
Then point the domain name to the site folder on the remote server.
If you rent the domain and the hosting from the same company, this will be automated.
It’s easier to manage domains and hosting from the same company (account).
You sometimes have a choice to make – Windows or Linux server. The difference is in the types of databases (Access or SQL) each supports. Most places I’ve worked at lean towards Linux servers with SQL databases.
Extras
You can usually purchase different levels of hosting.
To get started you only need the basic hosting package. You can upgrade and add other services later.
Get a Security Socket Layer (SSL) certificate if you are transferring sensitive data to or from your site (like credit cards).
Almost all modern hosting packages use something called cPanel to manage your websites.
Access cPanel
cPanel is a common interface used by most hosting companies that allows for easier management of site files, settings, and capabilities.
Accessing cPanel
cPanel can be launched by logging into your host company website and finding the cPanel link.
A shortcut is to add /cpanel to the end of your domain name in the web browser. You'll most likely get the login credentials to input from your host company via email.
Figure 2: To get quick login access to cPanel go to yourDomain.com/cPanel
Navigating cPanel
There are really only two places in cPanel we need to understand to get started; File Manager and FTP Accounts. As your comfort level grows, explore the other areas.
Figure 3: To start, look for the File Manager and FTP Accounts
File Manager
Use this area to view and manage the file structure. Add, move, and rename files and subdirectories as needed.
FTP Accounts
The first (and only) thing you’ll really need to do is to set up an FTP account. This allows for the upload of files from your local computer to your remote host.
Access File Manager
The File Manager let’s you look inside the folder structure of your host server. Top level there are a lot of things going on, but for now just focus on the public_html directory.
Public_html is where any files you want to be visible on the web should reside. You can put a site directly into the public_html folder, or you could create new folders inside of public_html, called subdirectories.
In cPanel click an icon called File Manager.
Double click the public_html directory
This is where the files from your local root folder will go to be accessible by web browsers
If you want to host multiple sites, you can add subdirectories to this folder
Create an FTP Account
The way we copy files from local computer sites to host servers is called File Transfer Protocol (FTP). FTP uploading requires three things:
An FTP address
A login (or username)
A password
The host provides the FTP address, while the username credentials granting access to folders on your host server are up to you. The next step in uploading files to your host is to create a new FTP Account and set up those credentials.
Create a new FTP User
In cPanel click the icon called FTP Accounts.
Click “Add FTP Account”
The login and password combination can be whatever you want (make sure to remember it).
You can set up multiple FTP accounts allowing you to grant other people access to your remote server without giving out your master username and password.
FTP Address
Usually, all you have to do is put ftp. in front of your domain name (i.e. ftp.apple.com). If you are not sure, you can click Configure FTP Client and see the information there.
Sync with Dreamweaver
Adobe Dreamweaver is web design software with robust file management capabilities. To help Dreamweaver keep track of site files, tell it to look in your site’s root folder, then connect it to our remote host. With these two things done, all that's left is synchronizing our local and remote sites.
Connect Dreamweaver to your local site
In Dreamweaver, go to Site > New Site
Give your Site a Name
Click the folder icon to browse to your local root folder
If it works, click Save. If it does not
work, check your credentials and
test again until it does.
Move local site files to your host server
Ensure all files associated with the site have been saved by going to File > Save All
In the Files panel, connect to the remote host by clicking the Connect to Remote Host button.
Click the Synchronize button
In the Synchronize pop-up, next to Synchronize:, choose “Entire ‘your site name’ Site”.
next to Direction, choose ‘Put Newer Files to Remote’
Click the Preview button.
When Dreamweaver detects new or modified files, click OK. This uploads them to the web server.
Type your domain name into a web browser to see your site live!
Revising and Resynchronizing your site
Your site will almost never work correctly after you upload it to a web server the first time. Surf every page of your remote site searching for broken links and missing images.
Make revisions to your local site and save all the files.
Re-synchronize your local site to your host server. (note: Dreamweaver can detect new and updated files so only those will be updated on the remote server)
Proof your remote site through a browser again, and again.
Repeat the above steps until your site works perfectly.
Wow, that's it?
That's right! Once you make it through the initial set-up, updating your site is a breeze!
Was this tutorial helpful? Please share!
About Paul Casper
As a graphic design instructor, I'm always on the lookout for more to learn and create. Feel free to email or tweet me with any topic suggestions or questions you might have. If you're looking for more design tutorials, be sure to check out my Youtube channel and website.
