Fabled.day

contents

Useful Programs

This page covers software that I’ve found useful in creating static websites on my own, as well as editing HTML and related code for other projects.

Do not consider this page comprehensive, nor does it attempt to be. It’s just an explanation of some terms, programs, why you might need them, and where you can find them. I’ll discuss my favorites and why I use them, and provide recommendations for choosing your own.

Word Processing

You need a word processing program, and method for organizing what you write there, as well as citations or links that might go with it. It’s generally a bad idea to try to write your content directly into the HTML files - with large sites, this only leads to complete utter chaos.

Begin with a writing program, but not just any, of course. I’d recommend you choose one suitable for both organizing a website and, ideally one that converts your writing into HTML code automatically itself. Generally, these will fall into one of two categories. These are:

  1. WYSIWYG editors. These are probably what you’re used to using for school, work, or other projects. They allow you to type, edit, and format text using menus, shortcuts, and such. These editors look and work a lot like word processors, with buttons to bold text and add indents, etc. Indeed, many word processors work for this purpose, provided they can produce an HTML output. WYSIWYG stands for “What You See Is What You Get,” the implication being that what you see on the screen will be (at least somewhat) similar to the final output once the document is converted into HTML (or any other format). Many millennials had their first experiences with web development via WYSIWYG software.
  2. Markdown editors. Markdown editors are entirely text-based, with nothing but plain text used to format your writing. If you’ve used (and formatted) messages on Discord, you might know what I mean. You might, for example, write _Emphasis_, producing emphasized text, or simply type enter and two hash signs (##), denoting the beginning of a secondary heading in the document. Once you’ve typed (without messing with menus) your documents, you can usually export them from the editor into HTML. I, myself, use markdown editors mostly. The ones I use have WYSIWYG elements, though. Be mindful that different apps have different markdown schema.

Beyond those two categories, there’s a vast list of potential programs for writing your site’s content (and, one would hope, keeping it well-organized). It would be an impossibility for me to list all or even most candidates for this. Instead, I include below a truncated list of those that I, myself, have used, with a bit about whether I had any luck with them and how they worked.

  • Google Docs is good for editing your work on multiple devices, and is a WYSIWYG editor. I haven’t tried this recently, so I’m not sure what the protocol would be for dragging your work from Google Docs into your coding program, except by manually copying and pasting it. Used it for seven years and eventually gave up because my drive became an overgrown garden. Might not be a problem for other folks who are more meticulous, I expect.
  • Microsoft Word will work, I guess? In the Before Times, we used it in part to make the website for my high school, and it exported whole websites, graphics and all. I barely remember how it worked. I’ve a personal hatred for it since that incident with the term paper about Lisa Frank as a postmodernist icon. Because of that, I can give no advice about Word, nor any other Microsoft Office program. I’m not boycotting Microsoft or anything impossible like that; I just gave up on their Office programs themselves after bad experiences. I cannot give advice, thus, for using this.
  • Ulysses is what I currently use. For organizational purposes, it seems designed to work best with nonfiction projects and project design tasks rather than novels. It exports (via copypaste, no less) into direct HTML, which is golden. It's only available for Mac variations, though, and costs a major pretty penny of $40 per year. It uses a markdown system rather than WYSIWYG, and that’s my main reason for picking it.
  • Scrivener wasn't worth the price for me, but I really do think it is well-suited to novels and other longer projects, perhaps fiction. I know some people use it for nonfiction, but I didn't find it easy to use for that. Writing novels? Writing fanfic? This one might be for you. It exports into HTML pretty simply (compared to other editors), too. It’s a single purchase of $60, last I checked, and is a traditional WYSIWYG editor (unless one modifies the program somehow).
  • Hemingway is supposed to be an application that trains you to write like Ernest Hemingway, with fewer adverbs and much less enjoyment. Unlike the real Ernest Hemingway, there’s no booze, though? I used it for several months but became quite unsettled with how it altered the style of my writing, so I dropped it. It’s a one-time payment of $20 for the app, which uses a WYSIWYG format.

Coding Clutch

You will, of course, also need a coding program or raw text editor that will allow you to edit HTML files (and JavaScript or CSS…) easily.

You can always use neocities’s native editor (assuming, of course, that your site is hosted on neocities, as is true for most of my visitors). Neocities has a surprisingly powerful editor in the browser, with color-coded tags in your HTML and other features that make it easy to spot errors.

Despite this, it still lacks a lot of the functionality you’d find in an editor outside the web browser. I’d really recommend that you use an external application. I occasionally still drop into neocities’s browser-based editor on mobile, though.

Some have found it tempting to use the simplest notepad text editor or whatever possible (for clout’s sake or whatever) - don’t. Don’t overcomplicate things for yourself for by embracing that kind of over engineered minimalism.

I create (or, rather, edit, for the most part now) HTML files using a free program called Visual Studio Code. This program has all kinds of shortcuts for coding HTML, CSS, and even Javascript (probably more, too - I'm still learning).

Because Ulysses (the program I write my content in) exports the documents it creates directly into HTML, I can select all (or a portion) of any document and copy it as HTML into VScode.

Some editors will allow you to copy text as HTML, or export a raw HTML file which you can then copy parts of into a styled, organized page. Ulysses does this. I still occasionally have to tweak the HTML, but that’s okay and expected. Regardless of what you use as a coding clutch, expect to do a fair bit of, well… coding.

Uploading and Graphics

Other components that might be a useful part of your workflow, but aren’t strictly necessary, include an FTP or mounting application to connect to the server where your files are hosted. You can (in most cases) upload files through the web-based file manager, if necessary, but these methods are much more convenient and quick.

I mount my entire neocities site on my MacBook using Mountain Duck, but this requires one be a neocities supporter ($5 a month). That program sadly cost $40 (thankfully once, not a subscription), but seems to work well. Mounting a neocities site is only possible if you have a supporter account, but it allows you to edit files directly on neocities using programs like Visual Studio Code, which is cool.

Obviously, while this site is geared towards exploring options for text-heavy sites, most are going to include some illustrations. You have to make/find those somewhere, ie, Canva, Procreate, Photoshop, GIMP. It’s perfectly possible to make a site entirely with linkware or free graphics - I’ve come close to doing that with my own sites, but if you’d prefer a personal aesthetic, you’ll need a program like that. I use a lot of clipart from Canva’s vast library, which works, too.

Don’t be too tempted to use (too many) web-based “free online editorz!!!$!@$” because those tend to be a hot mess of advertisements. There are other options. GIMP is open-source, as are several others that mimic Photoshop’s abilities. I don’t use them myself because I rarely need that kind of capability, but I recall it being very good. It’s also not hard to, ahem, find the One Piece, become King of the Pirates, and acquire Photoshop that way, if you catch my drift…