Step 0
create an index page for our 'interactive-1' site
Let's add an 'index.html' file to our 'interactive-1' folder. in Sublime Text, make a new file like this, but update it with your name.
<!DOCTYPE html>
<html>
<head>
<title>Will's Interactive 1 Site</title>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome to Will's Interactive 1 Site</h1>
<ol>
<li>
<a href="exercise-0/favorites.html">my favorites</a>
</li>
</ol>
</body>
</html>
Save this as 'index.html' inside of 'interactive-1'
'index.html' is a name that many servers are configured to return as the default file at a location if you don't specify a particular file you want.
Notice how spring2025.will.graphics and spring2025.will.graphics/index.html load the same webpage. that's the server for the class site being setup to assume that if you don't ask for something in particular, you want the index.html of that location.
All that said, we want to add this index file so that our interactive-1 sites have a nice landing page once they are online. Notice too how we have a link on our 'index.html' that will hopefully allow us to navigate to our favorites.html, once we upload our site.
Step 1
install an FTP Client
Download and install Cyberduck.
Cyberduck is an FTP client. FTP = 'File Transfer Protocol'.
Cyberduck can connect to another computer that is running an FTP server in order to transfer files. You can only use Cyberduck to connect to servers that you have been granted access to by the person who set it up.
CCA has an FTP server where each of us have an account, we'll use Cyberduck to connect to that.
Step 2
connecting to fluxus.cca.edu
Launch Cyberduck and hit the 'Open Connection' button in the top bar. A popup will appear with a bunch of settings we need to input. These need to match with how the server CCA has setup is configured.
We'll use these settings.
In the dropdown: SFTP (SSH File Transfer Protocol)
Server: fluxus.cca.edu
Port: 22
Username: (your cca username)
Password: (your cca email password)
SSH Private Key: None
Once these are filled in, hit the 'Connect' button. If prompted to Allow or Deny choose Allow. After a few moments you should connect.
Step 3
upload interactive-1
Once you are connected to 'fluxus.cca.edu', you'll see a single folder called 'public_html'.
The people in charge of the college's server have set it up so that anything inside the 'public_html' folder will be publicly accesible on the internet. we want to upload our class site inside of this `public_html' folder.
Double click on 'public_html' in Cyberduck to have Cyberduck open it, similar to how you can navigate folders on your local computer.
Now, on your computer, navigate to your 'Sites' folder that we set up last class. open your 'Sites' folder so you can see your 'interactive-1' folder.
Drag that 'interactive-1' folder into Cyberduck to upload it. (hit allow, if Cyberduck asks). this might take a minute as the files that make up your 'interactive-1' folder are sent to CCA's server.
Step 4
go see
Once your files upload, they should now be visible at:
https://fluxus.cca.edu/~[your user name]/interactive-1
For example, putting my username into the URL in the right spot, my site is:
https://fluxus.cca.edu/~willruby/interactive-1
Notice how even though we don't specify, when we navigate to the 'interactive-1' folder, our 'index.html' is returned. compare that with https://fluxus.cca.edu/~willruby/ which we didn't make an index file for, you'll see that the server automatically generates one for us.
A Note About Updates
Now you've put the first version of your 'interactive-1' site on the World Wide Web!
You now have two versions of your class site.
- your local copy that lives on your computer. this is your 'working copy' where you'll edit and refine your work.
- your 'published' copy that lives on 'fluxus.cca.edu'. this is the public copy that other people can see and access, where you will publish the work when you want to share it for others.
In the future, when you work on your local copy inside the 'interactive-1' folder on your own computer, that doesn't automatically update the version on CCA's server. In order to update the public version on the server you'll need to use Cyberduck and upload your class site again.
This is a good thing! You have control over when a new version is shared publicly and don't have to share anything that's still in progress if you don't want to.
And remember, you don't want to upload working files like PSD's or Illustrator files to your class site. You'll only want to upload the files that actually are part of pages you make, the 'html', 'css', 'js', the images or other assets that you expect your user to actually be able to see as part of your projects or exercises. TL;DR, only upload the things you need to in order for your sites to work.
Remember, things that you upload with Cyberduck are public!