Tutorials/Server Paths and Your HTML Code
From CGWiki
Contents |
Are you new here?
You just installed an FTP client and you see stuff in your account already. Yay! But my site has nothing on it! What gives? And how will I link pages together?
First, go check out the other Tutorials to learn about making (and naming!) the comic images. And learn HTML code. Then come back.
The Comic Genesis Server, Default Settings
First: On any computer, "/" refers to "the top-most (root) directory (a.k.a. folder) of the current drive or partition or server or whatever". On a standard Windows hard drive, this is C:\. On our FreeBSD server (similar on Linux, Solaris, any *BSD or other UNIX), it's just called / or "root".
Also, for any sub-directory, ".." refers to it's "parent" directory. This is fairly standard.
Standard warning: if a directory is labelled "NO TOUCH", then do not delete anything in that folder, and do not put anything in that folder. If that folder has sub-directories, they may or may not be NO TOUCH as well.
Here is the "standard" directory structure...
- /
This is root. Root should have two directories. NO TOUCH!- workspace/
This is the directory for uploads. Two files (and three sub-directories) go here:- indextemplate.html
This becomes the "first" page of your site, with the most recent comic (if that's what you want, but who wouldn't?). - dailytemplate.html
This is used to create "archive files". One file per day, only for days that have comics. - comics/
This is the "comic buffer", where you upload your actual comic image files. Ideally, you upload these ahead of time. In reality, most do it immediately before (or after) they're needed. Some authors date their comics with older dates, just for fun. It doesn't matter; all comics go here. - images/
This is NOT a sub-directory, it's a link to public_html/images/. See below... - webpages/
This sub-directory of workspace/ is for all the stuff that isn't a comic file, site graphic, necessary HTML page, etc. It's the LAST thing you should worry about.
- indextemplate.html
- public_html/
This is where the files are that the whole world can see. NO TOUCH! (Yes, really.)- images/
Does your site design include a title graphic? Navigation buttons? Your photo? They all go here. - comics/
This is where your comics will end up on the appropriate day. NO TOUCH! - d/
Can't have a comic archive without archive pages. Each page takes it's name from the day-code that the comic image has for a name. These pages are created using dailytemplate.html NO TOUCH! - workspace/
This is NOT a sub-directory, but a link back to workspace/ off of root. NO TOUCH! See below for why this is here.
- images/
- workspace/
What the Server Does For You
a.k.a. AutoKeen 101
Every night at a predetermined time (you can set that later), there is a set of server scripts that run. Together that set is called AutoKeen. (There is a new version in the works called WolfKeen.)
AutoKeen does the following:
- Looks in /workspace/comics/ (in a round-about way) to see if there is a comic for the new day (or any previous day). If there is, it gets moved -- not copied -- to /public_html/comics/, where it will stay forever. Also, the following will happen...
- Loads /workspace/indextemplate.html and parses the KeenTags. This process creates a new file -- index.html -- which is placed into /public_html/ and becomes your new, updated home page. (I am assuming you want the latest comic shown on the home page. It's not mandatory, but it's the lay of the land.)
- Loads /workspace/dailytemplate.html and parses the KeenTags to create a new archive page for this new comic. This is placed into /public_html/d/. If your dailytemplate.html uses the proper archive navigation KeenTags, then a new page for the previous comic is also made, with updated links.
- Even if there are no new comics, AutoKeen looks in /workspace/webpages/ for changes in any file. If it finds any, it parses any KeenTags in that file and puts the result (same file name) in /public_html/. If there are any sub-directories in /workspace/webpages/, they will get analyzed/parsed/copied as well.
- Finally, AutoKeen modifies /public_html/rss.xml to reflect that something on the site changed. If nothing changed, rss.xml is left alone. Note, RSS reflects the date and time of the last update. If you manually update your comic this date will change. This is not however the internal date used for your comic, so you may see the RSS feed still link the most recent comic.
AutoKeen, the way is currently built, accesses /workspace through /public_html/workspace. It is not easily fixed, as many assumptions were built into the code. WolfKeen doesn't have those assumptions.
So, What Is My Web Browser Showing Me?
The address bar in your web browser is made up of three parts:
- http
- // : Says "this is supposed to be a web site, not something else like FTP or Gopher"
- Domain (sixguys.comicgenesis.com or www.6guys.com)
- Defines the server (comicgenesis.com) and a host on the server (sixguys) to find pages in. Like saying "drive C:" on machine "my laptop".
- Path (/index.html)
- Starting with "/" (root!), the directory and page names.
Here is a very important lesson: "/" to the web browser is really "/public_html/" in your FTP client! That's why when AutoKeen creates "/public_html/index.html", your browser sees "blahblahblah.com/index.html". Web-server root and FTP root are not the same.
Okay, So... What Do I Do Now?
Simple Project: Title Image
The one downside to the standard templates is that they're so plain. First thing: spruce up the title with an image!
- Make the title image. You're on you're own there.
- Start your FTP client.
- Upload it to /public_html/images/
So, fine. It's somewhere under public_html, it should be showing up. A-ha! Page code!
This is HTML 101. The basic "show me an image" code:
<img src="imagepathhere" />
(Note: the final " /" is part of the XHTML standard. I suggest learning it now.)
So what is my image path? It depends on what page we're working on. Think about what the pages END UP as.
- indextemplate.html
Ends up as /public_html/index.html. In a browser, this is /index.html. The image is at /images/title.gif (or jpg, or png, or whatever you named the image, and capitalization counts). We have two options:- Both the HTML file and the images directory are in the browser root /, so we can do this:
<img src="images/title.gif" /> - OR we can use the whole path: /images/title.gif, leaving the root / on the front.
- OR we can make it absolute and include the domain: http://mycomic.comicgenesis.com/images/title.gif.
- Both the HTML file and the images directory are in the browser root /, so we can do this:
- dailytemplate.html
Ends up as individual archive files in /public_html/d/. In a browser, this directory is just known as /d/.- Look at the directory structure above. We have to step "up" to / and down into images/. We can do that with ../images/title.gif.
- OR we can just say "start at root": /images/title.gif
- OR we can go absolute again with the whole long URL.
As you can see, the shortest way to do it without having to actual think is to use the / root at the beginning of the path. Then all pages -- no matter where they are -- will use the same path to find that image.
Project Aftermath: It Doesn't Work on My Computer!
For ease of uploading, it is best to find some place on your hard drive and make some directories and files that look like the contents of /workspace/. Fine. But what happens if we try to preview this code "locally"?
- indextemplate.html is in that folder, which I'll call DOCUMENTS/
(DOCUMENTS may be a whole nest of folders)
- So is dailytemplate.html.
- title.gif is in images/, which is in DOCUMENTS/
So your browser loads indextemplate.html, sees / and thinks "Hm, I have to find images in the root of this drive. That's C:\. But C:\images\ doesn't exist. I give up."
The solution? Either put everything into C:\ (treat it like public_html/), or change your links, or learn to live with it. To each his own.
Power users only: Although you probably aren't wasting time here, you can set up you're own small web server and point it to DOCUMENTS. Thus, it becomes your web server's root. Open pages using the loopback IP -- 127.0.0.1 -- and they'll act like they're on the server.
Linking Between Pages
Alas, we have the same problem. On your computer -- like workspace/ -- the template files are in the same directory. To the browser, they're not. (/index.html vs. /d/...html) Two different setups equals problems if you don't keep track.
Adding More Pages, News Posts in the Archive, and more stuff
Sorry, that's for someone else to write up. I'm done.
This tutorial written by SixGuys, who created The 6 GUYS In My Head, which explains a lot, doesn't it?
Return to the Tutorials page
