Connecting CodeAnywhere to Reclaim Hosting

In web design/development classes, you may be assigned use of the web hosting company Reclaim Hosting as well as the web service CodeAnywhere to support web programming.

After you have already created/registered an account with these companies, follow the steps below to connect your CodeAnywhere account to your Reclaim Hosting server.

IMPORTANT NOTE
If you have previously set up a web site on Reclaim Hosting, and this is not simply the first time you’ve ever used Reclaim Hosting, then one step of the process will look different. Please pay attention to the highlighted note under the section called Connect the SFTP Account. As always, ask the instructor if you run into problems.


Reclaim Hosting: Get Your Server Account Username and Password

If you currently log into Reclaim Hosting with a username, and not with an email address, then you already have the information you need, and can skip to the next step: CodeAnywhere: Connect the SFTP Account.

However, if you currently log into Reclaim Hosting with an email address, and not with a username, then you need to configure your username and password, as follows.

  1. Log into the Reclaim Hosting Client Area. You should see your account dashboard, not the cPanel hosting dashboard.
  2. Under the “Accounts” menu, choose “My Accounts” to see the list of your Reclaim Hosting accounts… which is probably just one item.
  3. In the list of accounts, click on “View Details”. You will see a screen of information about your account, including a secondary row of tabs to click on .
  4. In the row of tabs, click on “Change Password”.  You will see a screen with your username and a form to change your username password. 
    • This is your server account password, and is not the same as the password you use when log into Reclaim with your email address.
  5. Enter a new password here, confirming it in the second box, and click “Save Changes”.

This username and account information is your main server login information, which you need for CodeAnywhere.


CodeAnywhere: Connect the SFTP Account

CodeAnywhere relies on “Connections” to servers so that you can edit HTML, CSS, and other coding files. For your Reclaim Hosting, you are going to configure CodeAnywhere with the server account information.

First, log into CodeAnywhere. If this is your first time logging in, then it should ask you to create a connection using a Connection Wizard screen, like this:

The default Connection Wizard window in CodeAnywhere.

Click on label “SFTP – SSH” on the left side.

Note: If you do not see the Connections Wizard screen, and you don’t think you have any Connections set up, click on the File menu in CodeAnywhere (not in your web browser) and choose “New Connection > SFTP”.

On the SFTP-SSH screen, enter this information:

  • Connection name: this is just a reference for you. I suggest entering “Reclaim Hosting” or “Reclaim SFTP” for now.
  • Hostname: the letters “ftp.” followed by your domain name. So, if you registered the domain name “YourDomain.org” with Reclaim Hosting, then you would type in “ftp.yourdomain.org”.
  • Username: the server account username from Reclaim, as reviewed above.
  • Password: the server account password from Reclaim, as reviewed above.
  • Initial dir: type “public_html”.
  • Web URL: type “https://” followed by your domain name. For example: “https://yourdomain.org”.
  • Root Directory: type “/” for now, but we will need to update it in the final connection step.
  • Leave all other settings at their defaults.

After typing all this, your Connection Wizard should resemble this:

Click on “Connect”. CodeAnywhere will then attempt to make the connection. If it is successful, your screen should look something like this:

The top horizontal section is CodeAnywhere’s menu and toolbar. The left vertical column will Connections and the files available to you. The large dark rectangle on the right is where you will edit text files.

Now, click on “Reclaim Hosting” on the left. It will reveal one or more files or folders underneath it. If this is your first time using Reclaim Hosting, you should see something like this:

IMPORTANT NOTE
If you have previously set up a web site on Reclaim Hosting, especially using WordPress, then you may see a lot of other folders and files there. That’s fine.

Make sure, however, that you do not see a list of files/folders that includes a “public_html” folder. In that case, you may have missed a step in the configuration, above.

One more step is needed to configure the Root Directory.

  1. Right-click (or control-click) on the name “Reclaim Hosting” or “Reclaim SFTP”. A pop-up menu will appear.
  2. Choose “Create File” from the pop-up menu. A dialog box will appear, asking you to name the new file.
  3. Type in “test.html”. CodeAnywhere will create a new, blank file and open it for editing.
  4. Type the word “Hello”.
  5. Save the file, either by clicking on the “Save” icon (the second icon from the left, of a disk) or choosing “Save” from the CodeAnywhere File menu.
  6. Find and click on the “File Preview” icon — it’s the second from the right side, a white rectangle with a magnifying glass. This will open a new browser tab to a page with an error message.
  7. In the tab with the error message, look at the URL bar of your web browser. After your domain name, it will have a long set of text before it gets to the file name, something like “/home/ec2-user/ca6-rest/public_html”. Select and copy that text, including the first “/” after your domain name, but not including the last “/” before the file name you created in Step 3.
  8. Switch back to CodeAnywhere.
  9. Right-click (or control-click) on the name “Reclaim Hosting” or “Reclaim SFTP”. A pop-up menu will appear.
  10. Choose “Settings” from the pop-up menu. It will show you the configuration menu you saw earlier in the setup process.
  11. In the “Root Directory” text box, paste in the text you just copied. It should start with one single “/” and end with “/public_html”.
  12. Click “Save”.

Now, continue on to creating a “hello” page to test the connection between CodeAnywhere and Reclaim.


CodeAnywhere: Create a Hello page

Now that you have set up your Reclaim Hosting and CodeAnywhere, you can create a simple “Hello” page in HTML and CSS that looks like this example:

A simple “Hello, World” page.

In CodeAnywhere, right-click (or control-click) on the “Reclaim Hosting” connection, and you should see this pop-up menu:

Choose “Create Folder”. A pop-up window will appear asking for the folder name. Call it “hello” in all lowercase letters, like this:

Click on “OK” and the folder will appear in the list.

Now, right-click (or control-click) on the new “hello” folder, and choose “Create File”. Name it “index.html”. Then repeat this to create a second file, and name it “styles.css”. Your screen should look similar to this:

Your CodeAnywhere screen should look something like this after creating the “hello” folder with the two files “index.html” and “styles.css”.

As you have created the files, two tabs have opened above the large dark editing area on the right: index.html and styles.css. These are the files you just created.

  • index.html will contain HTML code for the content and structure of a simple web page
  • styles.css will contain simple CSS code for the appearance of index.html.

To start, copy and paste the code from the sample page like this:

  • While looking at the page in a web browser, right-click (or control-click) on the page. In the pop-up menu that appears, choose “View Page Source.”
  • Your browser will open a new tab that shows the HTML source code text. It should look like this:
HTML source for the sample page, as seen in the Firefox browser on a Mac. 
  • Select and copy the entire HTML text, including the “<html>” to the ending “</html>”.
  • Switch to CodeAnywhere and click on the index.html tab above the editing window. In this window, paste in the text you copied. It should look like this:
The CodeAnywhere interface, showing the index.html tab after pasting in the HTML text copied from the example.
  • Save the index.html file by choosing “Save” from CodeAnywhere’s “File” menu, or clicking the “Save” icon (the tiny disk icon, second icon from the left).
  • Switch back to the browser tab (not the CodeAnywhere tab) showing the HTML source code for the sample page. Near the top of it, you should see this text:

<link href="styles.css" rel="stylesheet" />

  • The text “styles.css” should be a clickable link. Click on it, and you’ll see text for basic CSS styles. Select and copy the entire text.
  • Switch to CodeAnywhere and click on the styles.css tab above the editing window. In this window, paste in the text you copied. It should look like this:
The CodeAnywhere interface, showing the styles.css tab after pasting in the HTML text copied from the example.
  • Save the styles.css file.
  • Now visit your web site at this address:

https://www.yourdomain.org/hello/

  • Replace “yourdomain.org” with the domain name you registered with Reclaim Hosting.
  • If you’ve done it correctly, then your “Hello” page should look exactly like the sample page.

Now, you can customize the typeface. The sample HTML and CSS both refer to a font called “Staatliches” loaded from Google Fonts. Visit the site and pick a different typeface. When you find one, click on the “+” icon, and a tab will appear at the bottom of the browser that says “1 family selected”. Click on the tab and the site will reveal the HTML and CSS code you need to update.

For example, if you chose the typeface “Permanent Marker” on Google Fonts, the tab would look like this:

Google Fonts sample screen after selecting “Permanent Marker.”

In Google’s “Embed Font” section, you will see a gray box with a <link> tag. In the example above, the font name is “Permanent+Marker” with a plus sign between the words. In CodeAnywhere, go to the index.html file, find the equivalent <link> tag, and update it to match the font name.

Then, in Google’s “Specify in CSS” section, you can see how the font name is identified after “font-family”. In CodeAnywhere, go to the styles.css file and update the “font-family” line to match the font name. Note that it may be different from HTML to CSS, such as using quotation marks, or using a plus sign vs. a space.

Save your files in CodeAnywhere, then reload your Hello page. It should now be in the new font.