{"id":461,"date":"2018-09-10T11:01:36","date_gmt":"2018-09-10T16:01:36","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=461"},"modified":"2025-08-12T20:16:32","modified_gmt":"2025-08-12T20:16:32","slug":"cyberduck-101","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/cyberduck-101\/","title":{"rendered":"Cyberduck 101"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1920\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/14\/2020\/09\/joshua-coleman-fXls-tVemno-unsplash-scaled-1.jpg\" alt=\"\" class=\"wp-image-2366\" srcset=\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/09\/joshua-coleman-fXls-tVemno-unsplash-scaled-1.jpg 2560w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/09\/joshua-coleman-fXls-tVemno-unsplash-scaled-1-300x225.jpg 300w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/09\/joshua-coleman-fXls-tVemno-unsplash-scaled-1-1024x768.jpg 1024w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/09\/joshua-coleman-fXls-tVemno-unsplash-scaled-1-768x576.jpg 768w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/09\/joshua-coleman-fXls-tVemno-unsplash-scaled-1-1536x1152.jpg 1536w, https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2020\/09\/joshua-coleman-fXls-tVemno-unsplash-scaled-1-2048x1536.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Photo by&nbsp;<a href=\"https:\/\/unsplash.com\/@joshstyle?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Joshua Coleman<\/a>&nbsp;on&nbsp;<a href=\"https:\/\/unsplash.com\/s\/photos\/duck?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a>.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Public_html<\/h2>\n\n\n\n<p><br>Open Cyberduck on your computer. You <a href=\"https:\/\/nmi.cool\/webdev\/setting-up-a-domain-and-hosting\/\">configured<\/a> it already, right?<\/p>\n\n\n\n<p>The <strong>public_html<\/strong> folder is the folder we use to save our web pages. For this class, don\u2019t worry about the other folders; we won\u2019t be using them at all. The folder we do need to focus on, public_html, is referred to as the <em>root directory<\/em> of our site.<\/p>\n\n\n\n<p><strong>Note:<\/strong> When you first open your <strong>public_html<\/strong> folder there might be some default files already in the folder (a folder titled cgi-bin, a default.html file, a reclaim logo file, and a static folder). You can delete everything in your <strong>public_html<\/strong> folder so that is <strong>empty<\/strong>. <\/p>\n\n\n\n<p><strong>Root directory:<\/strong> the base folder of a website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mastering cyberduck<\/h2>\n\n\n\n<p>Uploading work to your server via Cyberduck is mostly (relatively) straightforward, but there are a few wrinkles to note and learn.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Files<\/strong> placed in the <code>public_html<\/code> folder show up in the root of your domain. That is, placing <code>testfile.html<\/code> in your <code>public_html<\/code> folder means that the file can be accessed at yoursite.com\/testfile.html<\/li>\n\n\n\n<li>Similarly, <strong>folders<\/strong> placed in <code>public_html<\/code> become directories in your URL. If you create a folder called <code>assignment-one<\/code> in <code>public_html<\/code> and then place <code>testfile.html<\/code> inside of it, the URL for that file will be yoursite.com\/assignment-one\/testfile.html<\/li>\n\n\n\n<li>Don&#8217;t include any spaces in the names of files you place on your server.<\/li>\n\n\n\n<li>Use all lowercase letters in your filenames, or use <a href=\"https:\/\/techterms.com\/definition\/camelcase\" target=\"_blank\" rel=\"noreferrer noopener\">camelCase<\/a>. Domain names aren&#8217;t case sensitive (that is apple.com, Apple.com, APPle.com, and applE.com all work), but folder and file names are (that is, apple.com\/mac will take you to a valid page, but apple.com\/MAC will not).<\/li>\n\n\n\n<li>Additionally, name your files semantically\u2014give them descriptive names, and separate multiple words with dashes. For example, page1.html is not a very good name. page-one.html is better. go-dawgs.html (or some other name reflecting the content of this page) is best.<\/li>\n<\/ul>\n\n\n\n<p>In this class, all files for a given assignment should live in the designated location of your course file structure. This is introduced in the <a href=\"https:\/\/nmi.cool\/webdev\/indexes-and-directories\/\" target=\"_blank\" rel=\"noreferrer noopener\">Homepages &amp; Course File Structure<\/a> lesson and makes it easy for your instructor to find everyone&#8217;s work in a consistent location.<\/p>\n\n\n\n<p>Additionally, the main page for each assignment should be named index.html (this is the only &#8220;magic&#8221; filename in that web browsers, that when pointed to a folder, will automatically look for and load a page named index.html). <a href=\"#footnote-1-461\" id=\"note-1-461\" rel=\"footnote\">1<\/a><\/p>\n\n\n\n<p><strong>Workflows<\/strong><\/p>\n\n\n\n<p>For the first two projects, a great workflow is to do all development locally (AKA on your laptop or desktop using a flash drive, Dropbox, Google Drive, or One Drive account) and then upload your files to the server when they&#8217;re done. To upload using Cyberduck, simply open Cyberduck and click on your site&#8217;s bookmark. Navigate to your site&#8217;s <code>public_html<\/code> folder, and then drag and drop your entire assignment folder (project-one, etc.) into the Cyberduck window. Once the upload is complete, you can now access your work at <code>yoursite.com\/webdev\/project-one<\/code>!<\/p>\n\n\n\n<p>Once your work is uploaded to your server, you can make changes to your files in two ways.<\/p>\n\n\n\n<p>First, you can continue to work on the files on your local machine and then upload them when you&#8217;re done. <strong>This is the recommended way to work on your files for this class.<\/strong> The main benefit is that you can noodle around in private and then make your work publicly visible only when you&#8217;re ready. That is, there&#8217;s no auto-syncing between the files on your local machine and those on your server. The main benefit of this workflow is it&#8217;s pretty hard to make a big mistake; the second method comes with a couple of risks that we have outlined below. Those risks are real, so, again, the workflow I recommend is this first one: edit the local file and then upload it to your server whenever you make those changes public.<\/p>\n\n\n\n<p>The second (riskier) option works only if you&#8217;ve made Visual Studio Code the default editor in Cyberduck (to do so, go to the menu bar and select Cyberduck &gt; Preferences or hit&nbsp;<em>\u2318 + ,<\/em> and select Editor (the pencil icon), click the dropdown menu, click Choose&#8230;, select Visual Studio Code, and be sure to check the box for &#8220;Always use this application.&#8221;<\/p>\n\n\n\n<p>Once you&#8217;ve done that, you can click on any file in Cyberduck and click &#8220;Edit.&#8221; Make your changes, then hit save and wait for the &#8220;Upload Complete&#8221; notification\u2014your changes are now live on your site!<\/p>\n\n\n\n<p>There are, however, <strong>two perils with this method<\/strong>. The first is that you&#8217;re editing your site live, with no backup. Accidentally delete something, and it&#8217;s gone forever. Write some great code or content, but then there&#8217;s an issue with your server, and again, gone forever. Also, you&#8217;re working in public. Right now, your site likely doesn&#8217;t have much traffic, but it&#8217;s something to be cognizant of.<\/p>\n\n\n\n<p>The second peril is more real, and you need to understand the way Cyberduck achieves the magic of editing files live on your server with Visual Studio Code. When you click edit, Cyberduck downloads a temporary working copy of the file you&#8217;ve chosen to edit and saves it to your computer in a cache folder (a randomly named folder that exists just for this type of thing). Then, when you click save, it uploads the edited cached copy back to your server.<\/p>\n\n\n\n<p>The place where this can bite you is this: if you use this method, but then fail to close the cached\/temporary copy in Visual Studio Code and disconnect from the server, Visual Studio Code will still show you this file even though Cyberduck no longer holds any association between it and the file on your server. It&#8217;s not uncommon for students to work in a non-associated cached copy and not understand why their site isn&#8217;t updating. This can get messy quickly, but thankfully, it has an easy solution:&nbsp;<strong>always<\/strong> close the cached copy of anything you&#8217;re &#8220;editing&#8221; in Visual Studio Code through Cyberduck.<\/p>\n\n\n\n<p>Again, the easiest way to avoid this messiness is to edit the local copy of your files, save them to your storage unit, and then upload them to your server when you&#8217;re ready to make them public! Once you feel super comfortable with the process you can test out the second method, but until then the first method is the simplest way to go!<\/p>\n<div class=\"footnotes\"><hr \/><ol><li id=\"footnote-1-461\" class=\"footnote\"><p>And yes, I know this breaks the semantic naming rule I just mentioned.<a href=\"#note-1-461\" class=\"footnote-return\">&#8617;<\/a><\/p><\/li><!--\/#footnote-1.footnote--><\/ol><\/div><!--\/#footnotes-->","protected":false},"excerpt":{"rendered":"<p>Public_html Open Cyberduck on your computer. You configured it already, right? The public_html folder is the folder we use to save our web pages. For this class, don\u2019t worry about the other folders; we won\u2019t be using them at all. The folder we do need to focus on, public_html, is referred to as the root [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-461","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=461"}],"version-history":[{"count":5,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/461\/revisions"}],"predecessor-version":[{"id":6217,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/461\/revisions\/6217"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}