Now that you have almost completed your website, with only the feedback (or contact) form outstanding, it is time to transfer it to the Internet. This process is known as "uploading" (the technical term) or "publishing" (the layperson's term).
By the end of this chapter, you will have uploaded the completed portions of your website to your web host, and will have tested it "live" on the Internet.
It is possible to use this chapter even if you have not followed the earlier chapters of the BlueGriffon Tutorial to design your site, since its primary focus is the uploading process. However, if you have not even created a website yet, please start at the beginning, with the guide on how to set up a website.
You will need the following.
I mentioned in chapter 1 that you will need to get a web host and a a domain name. If you have delayed doing that because your site was not ready, you can put these things off no longer, since you will need it here.
The only possible exception to this is if you are a student following this tutorial as part of a course requirement. Your university or school may have allocated space on their own web server (ie, a computer on the Internet designed to hold websites). Get the details from your lecturer or teacher.
The information you will need from your web host are your website's FTP server address, the directory to put your website files, and your FTP (or SFTP) login name and password. In many cases, these will probably have been sent to you (eg, via email) when you first signed up with the web host.
If you cannot find the details or the email in question, contact your web host and ask them. There's no point writing to me about it. Only your web host has that information.
For the curious, "FTP" stands for "File Transfer Protocol". It is the means by which you will transfer a file from your computer to your web host's server, somewhat like the HTTP protocol described in chapter 5 which browsers use to retrieve web pages. Some web hosts offer "SFTP", which is a secure version of FTP. It encrypts everything transmitted, so that (hopefully) your password will be safe from people eavesdropping on your connection.
I realise that, although you have finished most of your website, you have not yet made the feedback (or contact) form. As I said before, this will only be done in chapter 9. There is a reason for this.
In my experience with newcomers, if they are to find any part of the web design process difficult at all, it is usually at two points. One of them is the initial uploading of their site, and the other is getting the feedback form to work properly. As such, I prefer to separate the learning of these 2 stages so that they don't take place at the same time. This lets the new webmaster solve the problems (if any) of each stage without the complications of the other confusing the issues.
Since getting the feedback form to work properly depends, in part, on your being able to publish the pages correctly to the right location, it seems sensible to first deal with the former. Once you can publish your pages without problem, and view them in a web browser, you can sort out any additional issues a feedback form poses.
Now some of you, at this point, may be concerned that visitors will arrive at your site immediately after you publish it, and make a beeline for your feedback form, only to find that it doesn't exist. Don't worry. The reality is, since your website is new, and you have not yet advertised it to anyone, no one will know it exists, let alone visit it. Not even the search engines. It is not that easy to get visitors.
In its default state, BlueGriffon (at least up to version 3.1) does not come with any built-in way to transfer your website to the Internet.
There are multiple ways to solve this. One way is to use a separate computer program, called an FTP client, to do it. There are numerous free FTP clients available around, and I have a tutorial on how to upload your website using FileZilla, which is one of those free software listed there.
Alternatively, you can also install an extension, called FireFTP, into BlueGriffon that performs the same function. The guide below shows you how you can use this second method, since the extension is provided on the BlueGriffon website and it loosely integrates into the editor (in the sense that you invoke it from a menu in BlueGriffon). However, FireFTP is arguably less user-friendly and polished than a full-fledged, standalone program like FileZilla, so if you prefer to use the latter, feel free to do so. The how to upload guide mentioned earlier is a general guide that can be used to upload any website, whether it is created using BlueGriffon or other software. And you won't lose out by following either the FileZilla tutorial or the one below. However, after uploading you should return to read the section below on testing your site.
Note that if you choose to use FileZilla to upload your site, remember to transfer the entire "images" folder,
with all its picture files, as well as all files with names ending with the ".html" and ".css"
extensions. You do not need to transfer any file with a name ending with ".bak" since those are just
old versions of your web pages that BlueGriffon saves whenever you modify a file. If you have created any
additional folders for your other pages in
chapter 7,
be sure to upload those too (that is, the folders and the files they contain).
Don't worry. It doesn't matter which program you use to upload your site. It's just a means to get your site onto the Internet. And this tutorial series does not depend on you using any specific method.
In any case, the steps below deal with how you can install the FireFTP extension.
Go to the BlueGriffon website. Click the "extras" link at the top of
the web page, and click the link to go to the page to download the FireFTP add-on. At the time I write this,
this means to click the underlined "free add-on" words. Then right-click the "fireftp-2.0.32-bluegriffon.xpi"
link. By right-click, I mean to click your right mouse button while the pointer is hovering over those words.
Note that "fireftp-2.0.32-bluegriffon.xpi" is the name of the file at the time I write this, but it's possible that by the time you read this, there will be a new version with a different number. If so, just click the "fireftp-[whatever-number-here]-bluegriffon.xpi" link that you see on the page.
Click the "Save Link As" (or the equivalent for your browser) in the menu that pops up. In the dialog box that appears, navigate to a location that you can easily remember later (eg, your desktop) and save the file. Your browser will then proceed to download it and save it there.
Once this is done, you can close your browser window/tab for the BlueGriffon site. You won't need it any more.
Start up BlueGriffon.
Click "Tools | Add-ons" from the menu. That is, click "Tools" from the menu bar, followed by "Add-ons" from the drop-down menu that appears.
The Add-ons Manager window will appear. Click the line that says "Extensions" in the left column, if it is not already selected. (If you're not sure, just click it.)
Click the "+" button at the top of the window (next to the search field).
A dialog box with the title "Select add-on to install" will appear. Navigate to the location where you saved the add-on file earlier and click it once to select it. Then click the "Open" button.
A dialog box with the title "Software installation" will appear. Click the "Install Now" button.
You will see the message "FireFTP will be installed after you restart BlueGriffon" in the Add-ons Manager. Click the "Restart now" button.
This will close your BlueGriffon window and restart the program.
The FireFTP extension will now be available from your "Tools" menu.
Click "Tools | FireFTP" from the menu.
A new window with the title "FireFTP" will appear. The left half of the window shows you the directories (the first column of the left half) and files (the second column of the left half) on your computer. The right half should be empty now, but when you connect to your account on your web host, it will display the files present there.
Since we're going to be dealing with 2 sets of website files and directories in this chapter, one on your own computer and one on your web host's computer, we will need to have some sort of system in order to avoid confusion. The convention typically used in such situations is to refer to your own computer as local and your web host's computer as remote. In other words, the left half of the FireFTP window shows your local computer, while the right half shows the remote system to which you are connected.
Navigate to your local website directory in the left half. That is, by the end of this step, the second column of the left half should show your website files, like "index.html", "sitemap.html" and the other files you created in chapter 7. Do not skip this step.
Click "Tools | Options" from the menu bar found on the top right hand side of the FireFTP window.
The Options dialog box will appear.
Click the "Show hidden files" checkbox to put a tick in it.
Click the "Downloads/Uploads" tab found at the top of the dialog box.
Click the "Automatic Mode" radio button.
Click the "Close" button.
Now click the "Create an account..." drop down box at the top of the FireFTP window and select "Create an account".
A dialog box with the title "Account Manager" will appear.
Type your FTP server address into the "Host" field. Your web host may refer to this variously as "FTP server name", "FTP hostname", or "FTP address". For instance, if your web host says to use a FTP server name of "ftp.example.com", enter "ftp.example.com" (without the quotation marks) into that field.
As you type, the program will automatically fill the "Account Name" with the same words.
Enter your login name into the "Login" field. Your web host may refer to this as your "username".
Enter your password into the "Password" field.
Click the "Connection" tab at the top of the Account Manager dialog box.
Click the "Use Current" button for the "Local" field. The directory for your local website files will automatically populate that field. If this is not correct, it probably means that you did not navigate to your local website files directory earlier.
The "Remote" field is where your web pages are supposed to be placed on your web host's computer. This information needs to be provided by your web host. It cannot be guessed. Do not put some random directory here. Ask them if you don't already have the information.
For those who don't know how to locate the relevant bit of information in your web host's email, look for where they say your web pages (or "HTML files") are to be placed. For example, some web hosts tell you to put the files in the "www" directory. If so, type "www" (without the quotation marks) into the "Remote" field. Other web hosts say that you need to use the "public_html" directory. If so, enter "public_html" (again, without the quotation marks). And so on. Remember to use the exact name they give to you. Do not change the capitalisation of the name. "WWW" is different from "www", as is "public_html" from "PUBLIC_HTML". If your web host says to publish your files in the default directory that you see when you connect by FTP, leave the "Remote" field blank.
If your web host tells you that you are using SFTP, click the drop-down box for "Security" and select the "SFTP" line. If you are using FTP, leave the "Security" field at "None". If you have a choice of using either FTP or SFTP, it's probably best to use SFTP since that is more secure.
Click the "OK" button.
Once you have finished setting up FireFTP, you are ready to publish your website.
Click the "Connect" button at the top of the FireFTP window.
Click one of the file names in your local website half of FireFTP to select it. Then type Ctrl+A (or Cmd+A on the Mac) on your keyboard. (That is, hold down the Ctrl key while typing "a".) This selects all the files and folders on your website.
Note that files with names ending with a ".bak" are the old versions of your web pages. When you modify your
page and save it, BlueGriffon saves the original version with a ".bak" extension. You do not need to upload
these files, nor do you want to, since they probably contain the mistakes that you corrected in the current version.
To unselect those files without unselecting everything else that you have already highlighted, hold down the Ctrl key
while clicking them. (Note that this Ctrl+click instruction applies to Windows. I don't know the equivalent
on a Mac.)
In the centre ("center" in US English) of the FireFTP window, between the local and remote panes, you should see two green arrows, one pointing to the left, and the other to the right.
Click the arrow pointing to the right (that is, pointing from the local computer towards the remote computer).
FireFTP will proceed to upload your files.
Click "Disconnect" from the menu. After FireFTP disconnects from your site, depending on which remote directory you were in before, it may immediately forget that it has disconnected and pop up an error message complaining that there is "No such file or directory" for the remote folder. If so, click "OK" to dismiss this spurious error.
Close the FireFTP window. (If you use Windows, you can exit FireFTP by clicking the "X" button on the top right hand side of the window.)
Now that your website is really on the Internet, it's time to do the testing that you could not properly do when it was on your own computer.
Type "http://www.example.com/", without the quotation marks, and after substituting your domain name
in place of "example.com", into your browser's address bar. Do not type it into Google or Bing
or any other search engine. Type it directly into your web browser's
address or location bar. In addition, do not type "http://www.example.com/index.html",
where the home page filename is added to the end of the URL.
The result should be that you see your home page in your browser, in spite of not tagging "index.html"
onto your domain name. If you don't, look at the error message displayed in the browser. If it says
a "404 File Not Found", "Document Not Found",
"Forbidden", or "Directory has no index file", it may mean one of the following things:
You may have named your file wrongly. For example, if you used a filename of "Index.html" (notice
the capital "I"), you will get this error. The home page must be named "index.html"
if you want this trick of typing your domain name to work.
You may have uploaded your files to the wrong directory. Don't think that this possibility does not apply to you. Web servers will only display files placed in specific folders, for security reasons. Just because you successfully uploaded your files to your server does not mean that they are in the right location.
A less likely possibility is that your web host has not set up their server to show index.html as
the default page. This is rare nowadays, since most web hosts configure their servers to follow the conventions
that the majority of webmasters are familiar with (if only to reduce the amount of technical support they have to give).
To test this possibility, type "http://www.example.com/index.html" (yes, this time with the filename)
into your browser's address bar. If this works, but "http://www.example.com/" doesn't, then you are in
this boat. You can solve the problem either by asking your web host to set the default page to "index.html"
for you, or you can find out from them how you can do this for yourself. Although I have a tutorial for
changing the
name of the default page for one commonly-used web server software (called Apache), your web host is probably using
a different program for their system. I say this because Apache recognizes "index.html" by default.
Another solution is to rename "index.html" to the name used by your web host's server software.
However, this means that any links on your site pointing to the home page with "index.html" somewhere in
the URL will break, and you will have to fix all those links. In addition, if you ever move
your site to a different web host using the standard "index.html" convention, you will face this issue anew.
On the other hand, if you get a "Domain not found", "No DNS for www.example.com" or error messages of that ilk, it could be one of 3 reasons.
Your domain name is so new that your internet (eg, broadband, dial-up or wifi) provider has not yet updated their system to recognise it. Some companies take as much as 2 days to be able to connect to newly-minted domain names. If this is the case, you'll just have to be patient and try again later.
Alternatively, your web host may not have set up the "www" subdomain for your site. Not every web host does
this automatically. To see if this is the case, type "http://example.com" (that is, your domain name without
the "www" prefix) into your browser's address bar. If this works, but the "www.example.com" version doesn't,
contact your web host to ask them how you can set up the "www" version. (For example, on some web hosts,
you may need to log into your website's control panel and click a checkbox somewhere.)
You made a typing error when entering your domain name into the browser. Before you scoff at this, check it. Typing mistakes afflict us all, whether you are a newcomer or an experienced webmaster.
Take a look at the web page. If you do not see the two column layout that you created in chapter 1, or
the buttons on the navigation menu no longer look like buttons but bullet points in a list, or the colours
on the page have reverted to white, it means that you did not upload the "styles.css" and
"tswnavbar.css" files, which control these features.
Another thing that you will need to check are the images that you placed on your pages. Make sure that all of them show up on the site as they did on your computer. If they don't, it could be due to one or more of the following reasons:
You forgot to upload them. (Did you remember to upload your images folder and its
contents?)
You uploaded them to the wrong place. (Did you upload the pictures to an images folder
on your remote site directory or did you wrongly place them into the same directory as your web pages?)
There is a problem with the link to the images. (Did you remember to put a tick in the box to "Make URL relative to page location" when you inserted the image?).
You should now embark on an exhaustive clicking of all the links you inserted into your pages, including those found on your navigation menu. They should all lead to valid destinations, except for the ones pointing to your Feedback (or Contact) Form. The latter, as expected, will result in a "File Not Found" (or words to that effect) error, since you have not yet created it yet.
(Note that if you have inserted Google AdSense advertisements into your pages, you should not click the links in those advertisements, since that will get you kicked out of their program. Check only the links that you have added yourself, to make sure they are valid.)
Once you have fixed any outstanding issues, and everything appears as it should, congratulations! With your site finally on the Internet, you are now a webmaster.
In the next chapter, you will add a feedback (or contact) form, thereby completing the website.
Copyright © 2017-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Publish (Upload) Your Website with BlueGriffon 2 and 3
