Blog Development

Purpose: The purpose of this page is to detail how I planned and developed the Eclectic Archive, complete with the resources I used. Starting a blog can be a bit daunting, and I intend for this page to be a resource for those new to HTML and CSS, plus a sort of timeline for blog development. Updates will come spontaneously. :]

Concept & Creation

Prior to starting the Eclectic Archive, I went through a short planning phase. I first needed a title, and then a general theme for my site content. I knew I wanted to write about and document old toy series, random technology, and some other niche topics... So my blog would serve as an archive of sorts. An archive of what? Without being too self-deprecating, I settled on the adjective "eclectic". And thus, the EA was born.

Learning HTML & CSS

I've previously dabbled with HTML in college, but I definitely needed a refresh. Instead of learning via online resources, I took an "old-web inspired" approach and gathered some older HTML and CSS books. Thankfully, HTML remains pretty similar through its new versions, so my old coding books were more than enough to get my bearings. The specific books that I studied were:

If you want to NOT follow in my footsteps, learning online is likely easier and more accessible. Google will always be there for you! Each of these books covered some now-defunct software and applications, and while I can't easily utilize them now, it was still fun to read about. :]

Site Design

Once I knew how to build some basics in HTML, and I had my intial concept down, the next step I took was to draw out a rough sketch for my site layout. Think sidebars, nav bars, divs... I didn't get too wild with it, honestly, because at its core I want the EA to prioritize function over form. In my sketch I also had scribbled some ideas for sidebar images, site header images, and so on. To keep the vibe old-webby, per usual, I recreated these images in MS Paint before adding them to my site.

On the same sketch, I tried to break down how I wanted my blog to be organized. It's not the most thrilling exercise, but it helped to think of the topics I wanted to cover in the future. I knew I wanted to write short posts about things, so "Posts" would serve as the host for all of those links. I wanted my home page to give a little info on what I cover in my blog, and some recent posts. "Files" was meant to be a place where I would upload what I deemed to be "lost media" or older materials I want to immortalize on the web. "About" would talk about my motivations for the site, my plans for the future, and myself. With those 4 sections planned out, I felt ready to begin.

I also want to mention file directory planning-- I did not do this, and instead dumped all my files into the main Neocities directory. I think you can guess how that went. :P It was messy by manageable, but until it wasn't, and then I spent hours sorting things into folders and updating image links. My advice: you don't need a complex system by any means, but keep your files organized and separate in some way! It will save you so much time down the line.

Based on my initial sketch, I got right to development. To start, I set up my divs. I updated the < head > tags to display different tab names, and then began developing the < body >. I only have 2 visible divs: the floating sidebar, and the main column where you can see content. To display my blog logo on each page, I write it in before each div. For my sidebar, I put the primary links needed to navigate my site, as well as a little widget that tells you when a page was last updated. Sidebar icon and follow me/profile link are also part of it. My main column largely remains empty until I start writing something!

Just as a note, I have a third div within my pages-- the wrapper! It's main purpose is to line up my 2 visible divs, allowing for the 2-column effect I have.

Lastly, once I got things situated at least a little bit, I took some time to generate a color palette for my blog. This is easily the most fun planning activity of my list, and there are websites that will generate you one for free, based off an uploaded image. If you're going for a more polished and curated aesthetic, picking each color on your own might be best, but if you're casually developing, generating a color palette saves some time. For the EA, I had a more "old school computer terminal/command prompt" image as inspiration, so my site largely has bright greens and neutral grays.

Beginning Content

When I first started creating posts for the EA, I was very concerned with my presentation. I had a loooooooong initial post, and spent oodles of time meticulously editing my code and writing. Here's the thing, though-- it doesn't need to be that serious!

Unless you take the time to enable comments on your blog somehow, you're not going to get internet nitpickers flooding your inbox. I mean it! Even if comments are enabled, I doubt that would happen. I think that's the biggest appeal for me on Neocities: your blog and content are public, but they don't have the same level of interaction enabled as other forms of social media. So don't be afraid to make mistakes!

I've found, in my experience editing the EA, that bugs get uncovered as you keep creating content. So, don't expect perfection from yourself! Blogs are a big project, and the most important advice I can give you is to just have fun. :]