Converting a WordPress Blog to Flat HTML

Learn How & Why I Changed My Blog from WordPress to Flat HTML Files

Posted by Ryan Heavican on October 28, 2016

Hi Internets! You may or may not have noticed that it’s been about a month since my last Techsploits blog post. But there has been good reason for this. For the past month or so I’ve been spending much of my spare time building a new blog layout from the ground up. This has been a great experience in learning about front end web development. And importantly, this new setup will give me greater flexibility for further developing my web development, web design, and Search Engine Optimization skills.

Techsploits New Blog Layout
Techsploits' New HTML Layout in the Atom Text Editor

New Blog Development

Building the new Techsploits blog layout was a great learning process. It was also a time intensive process even though the current site consists of relatively little content and only a few page templates.

Design Research

The first step I took in building the new blog was design research. I spent a good deal of time looking for blog layouts that I found visually appealing. I also broke down the design of some of the biggest news websites on the web to see how they present articles. Once I found different design elements that I could turn into a simple and clean layout, I started building out the site.

Desktop Design

I decided to build the blog using bootstrap. Bootstrap is an HTML, CSS, and JavaScript framework that makes creating web pages very easy. Bootstrap is also geared towards mobile web development which makes building responsive sites that look good on both desktop and mobile very easy.

Techsploits New Desktop Layout
The New Desktop Layout

Mobile Design

Bootstrap is a mobile first framework. This means that developers should design their bootstrap sites for mobile screens first and then use CSS to style the site for desktop. Unfortunately I took the opposite approach with my blog.

I built my site for desktop first and then had to go back to ensure my layout was responsive for mobile. The whole process was a great learning experience. Going forward, I’ll still build my bootstrap sites for desktop first. But I’ll be able to style sites in a way that makes building out the responsive mobile styling very easy.

Techsploits New Mobile Layout
The New Mobile Layout

Hosting

I hosted Techsploits in a pretty unusual way throughout my development process. I initially used CodePen for development. I quickly regretted doing this as I kept losing work when my sessions with the site would be interrupted resulting in my work being continuously saved over. Lesson learned. From now on I’ll only use CodePen to display finished pages and will do development on a local machine with a repository.

After I finished building the site locally, I needed to find a hosting provider. The site had been initially hosted on a managed Wordpress account. First I built out the on Amazon Web Services S3, which offers free basic hosting. Then I canceled my Managed Hosting account and opened a linux hosting account with cpanel that gives me a ton of control over my hosting environment.

AWS S3 Hosting Environment
The AWS S3 Hosting that I Used for Development

Site speed

Optimizing Techsploits for speed was my first undertaking after publishing my new blog layout. I mainly used GT Metrix and Google PageSpeed insights to identify the causes of slow page load time. These tools made great suggestions like trying to eliminate as many calls to external resources, like external JavaScript or CSS, as possible. I also cleaned up my CSS during this process in order to make my CSS files as small and fast as possible.

Techsploits Site Speed
Techsploits' GT Metrix Speed Results

Search Engine Optimization

Site speed plays a big factor in SEO, but there are many other onsite factors that play into SEO. Firstly, I ensured that my HTML headings were structured properly and that my meta descriptions were well written and optimized for each page’s keywords. I also included intrasite links throughout my articles and ensured that the blog is laid out in a way that is conducive to presenting dynamic content. Now the blog just needs a great deal of quality content and backlinks to it posted in some of my favorite forums.

What's Next?

Now that my new blog layout is finalized I can get back to posting about my projects. In the coming days I’ll be posting about Windows group policy, RetroPi consoles, hackintoshes and network security. Stay tuned!