Not much has changed since I started publishing on the web in 1998. HTML written back then still works, and the most successful bloggers still earn their success not only for the quality of their writing or the design of their blogs but because they just write.
If you’re building a simple blog or website — not a highly interactive web application — here’s my advice for 2020: quit the endless pursuit of the perfect design or static site generator or whatever. You don’t need them. Just write your thoughts, add some HTML, and publish the damn thing.
What I’ve learned over 20+ years and several starts and stops1 as a web developer/dilettante blogger is that if you want to publish on the web, focus on the content. It truly doesn’t matter what CMS or static site generator you use or even what your website looks like, particularly if you’re writing about technology or other nerdery.
Every now and then, I get questions about this site — its design, how it’s ‘run’, etc. If you need a nudge in the right direction, here’s how I did it, and here’s what you should do, too:
Open a text editor. Write semantic HTML in a sane, human-centric (not machine-centric) order. Do not write any CSS. Try to avoid classes and IDs. Instead of
<div class="nav">, try a semantic HTML5 element like
Save your file and open your new web page in a browser. Imagine CSS doesn’t exist and you’re stuck with whatever the browser gives you forever. Is your site well-organized? Is it easy to read and to navigate? Are the most important elements on your page appropriately prominent? Do you need CSS? If not, you’re done! Now go write.
Do you have multiple page “types” (e.g., blog post, blog index, about me, home page)? Do this for all of those types. Don’t forget to keep making your HTML semantic. Copy and paste similar bits (navigation, etc.) from pages you’ve already created. Yes, if you make changes to one, you will have to change both.
Once you’ve done all of these, put a
<style>tag linking to a single vanilla CSS file in the header of your simplest page. Start adding styles, beginning with text styling. Can you still tell that links are links? Is it still easy to find the navigation? Do headers look like headers? Good.
Did you have to pollute your HTML with a lot of classes to accomplish what you wanted to accomplish, design-wise? This might be OK, but you probably added too many. Can you accomplish the same thing using semantic elements instead? Do it.
<style>tag to the other pages. Do they look pretty decent? They should. Add whatever additional styles those pages need.
Yes, it does suck having to copy and paste all these repeated blocks all over the place. Find a static site generator or use something like CodeKit so you can use simple includes rather than configuring the mess that is most static site generators. I use a static site generator for my site for fun but don’t really need one.
That’s it. Write some HTML. Sprinkle in a little CSS for personality. And write your thoughts down. It’ll feel weird. It won’t be up to your standards (this post isn’t up to mine). But it’ll feel good once it’s out there.
I’ve been using Netlify for hosting/publishing. I love it. Lots of smart folks use GitHub Pages. Just be sure to publish behind a domain you own so you can switch hosts if you decide to do something else later. (Try to avoid changing hosts. Just write.)