Blaugust 2022 – Moving from WordPress to HTML – Writing a Blog Post
Posted on August 6, 2022 by Aywren
Today I want to talk a little about how I create a blog post for a static HTML blog. It’s not the same as whipping open a WordPress website, fighting with the block editor, and pushing a button to reveal your post to the world.
It’s a bit more involved, as you might guess. And it may seem like it’s not worth the time to go through all the trouble, but it’s really not so bad once you get a system in place.
Writing the Post
The first step is, of course, writing the post.
While I can write content directly to HTML code, I’ll say no thank you to that! There’s a reason why WYSIQYG editors, such as WordPress, exist. It’s far easier to concentrate on what you’re writing when you don’t have to worry about the code behind it.
Therefore, I draft my posts in good old MS Word. You can probably use Google Docs, or something similar, as well. But I have Word, so Word I use. That looks something like this:
As you can see, I drop jpg indicators into my blog post to remind myself where images should go.
Converting the Post
Word is all nice, but it’s not HTML code. In order for an HTML file to know where to put paragraph breaks and formatting, I have to convert it. The second step is turning my Word text into HTML.
Thankfully, this is super easy using a free online tool called WordHTML. I love this thing and none of my websites would have been as easy to convert without it!
Basically you just copy and paste thet text from your Word doc into the Word Editor tab, and when you click the HTML tab, it magically creates the code for you!
Creating the HTML Page
Now that I have the code, I have to have a page! The third step is where those HTML templates come in!
I log into my Neocities account and create an HTML file for the new blog page. I continued to use the page structure from WordPress.com (year/month/day/blog-post-name/index.html), so this is a bit wonky to do, but it works. It also made sure that old pages that I moved over from the WordPress blog kept their original URLs for search engines.
I open the new index.html page and delete all the placeholder content that Neocities puts in every new page. I want a page that looks like the rest of the blog – so this is where I use my templates.
I open up the template code in a new tab, and copy everything. I then paste it into the new index.html page so that it is using the same layout as the rest of my site. That looks something like this in the HTML code editor:
Now that the layout is set up, I copy the HTML code I created using the WordHTML converter and paste my post content into the index.html. I do have to hand-code my images into the HTML code (images have to be uploaded to a specific folder on my web host).
Once saved, it turns all this mess into a proper post page like you're reading now.
I do have to do some additional small tweaks such as add a title to the page, make sure the social media preview card is working, and hook up the Disqus comment block for each post. But those are things that I’ll talk about in another post!
Finally, I have to link the new post on other pages – such as the front page of the blog, the month’s page of the blog, the categories section and update my RSS feed. The post doesn’t just show up automatically in archives like it does in WordPress!
But, for the most part, this is how I create each blog post on a static HTML site. Sounds like fun, huh?