Exploring The Static Web

---

The Geometric Algebra Explorer website has been up and running for more than 2 years now. I developed this website using the WordPress Content Management System (CMS). WordPress and its countless plugins provide many impressive features for dynamic website developers, especially if they don’t want to code much¹. I really enjoyed working with it, but it’s time for me to go static.

In this post, I share my reasons, experience, and final workflow for leaving dynamic web development with WordPress and going into the static web development side. I think this might be helpful to someone trying to do the same or wanting to develop a similar website. Enjoy!

---

Web Needs

When I started to look for a tool to create a blog for myself in 2015, I made many searches for the “best system”. Many sources pointed me towards WordPress.org. I found many good tutorials and reviews. I didn’t have a clear list of requirements back then for my blog, so I went with WordPress as being relatively easy to learn and use while providing many features.

After 2 years I found that I actually have a small and specific set of needs for my online work. I don’t currently need to buy or sell online, so plugins like WooCmmerce are not relevant. I don’t need a glamorous theme like the Themify Ultra to show my ideas. What I actually need is:

1. A simple workflow to add and edit good looking pages, posts, and menus.
2. Easy to learn and use; visual content management is preferred over coding.
3. Freedom and simplicity to include images, videos, links, mathematical equations, and nicely formatted code snippets.
4. A responsive fast loading website for better browsing experience.
5. Minimum website security management hassle.
6. As cheap as possible, and preferably free.

Web development with WordPress brilliantly satisfies the first 3 points and can be made, with some effort, to satisfy the 4th, but doesn’t satisfy the last 2.

 

Two Sides

Static websites have been there from the start. People used to create static HTML pages with some CSS and JavaScript² that would be rendered on the user’s browser. The web server just stores these static files and delivers them the whoever has access to the server on the network. There was very little room for personalized content delivery as we experience it today.

Then came dynamic web servers where web pages are generated and delivered in real-time depending on many parameters the web server receives from the user. We then need to program the server to tell it how to generate the web pages for our users based on the parameters and their data stored on a server database. As these systems matured, we got many useful dynamic web systems, like WordPress, for delivering web content without even writing a single line of code for the server. Using such dynamic visual Content Management Systems, the web designer can develop a dynamic website using plugins and visual elements that have the server code inside them. The advantages of dynamic websites are many, but so are the disadvantages.

In the past couple of years, static websites came back into focus. Some of the advantages with a static website are:

• Speed: web servers are very good at delivering static pages quickly.
• Version control: having a repository where people can collaboratively work on a project is a big win.
• Security: with no database and no processing of scripts, there’s not much to mess up.
• Maintenance: there’s no packages, libraries, modules, frameworks and caching systems to maintain. So the cost is almost zero.
• Traffic surges: unexpected traffic peaks is less of a problem as static HTML pages consume a very small amount of server resources.
• Search Engine Optimization: Search engines like fast web pages.

For many kinds of websites, like blogs, wikis, and online documentation sites, using a static website is a much better choice. One additional factor is the cost of having a dynamic vs. static website. Dynamic web hosting typically costs much more because the server needs a database and a good deal of security and maintenance efforts. For all these reasons I decided to migrate the GA Explorer into the static side of the web.

 

The Search

A multitude of static web design tools has recently arrived. A major class of tools includes Jekyll, Hugo, Middleman, Gatsby, and Hexo³. This class of tools, called the JAMstack, simply uses some form of static web template (a collection of pre-defined web pages with similar visual style and navigation) to generate the final web pages from text input. Most of these tools can take HTML or Markdown text input for generating blog posts and pages. To create a new static website using such tools is a good experience. But because they have no visual interface, they almost always need non-trivial configuration and coding to customize the generated pages. I found it quite difficult and time-consuming, although possible, to migrate my online WordPress website to Jekyll, for example⁴. To remedy the lack of visual interface of the JAMstack tools, many Flat File CMS‘s exist on top of them. I haven’t tried any of them myself, but I expect a huge interest and fierce competition in the coming years⁵.

For my personal needs, the JAMstack and Flat File CMS tools are not suitable for many reasons. They require a fair amount of coding and configuration, a time-consuming learning and exploration process, in addition to the difficulty of migrating my existing work.

After a lot of searching and exploration, I finally returned to WordPress again. The WordPress system itself is an open source project and anyone can create a personal web server and install WordPress on it for free. In a final act of exploration, I tried searching for a WordPress plugin that can generate static HTML+CSS+JavaScript files from the dynamic WordPress website. I was surprised and pleased to find two very good plugins for this task. This was a very exciting discovery for me because it meant that I could continue developing my work with WordPress and then generate and publish the static website from it after a small amount of tweaking. Such mixed workflow would allow me to get all the benefits of both dynamic and static web development for my needs. It also meant that I could keep my previous WordPress work with minimum conversion effort and start publishing and updating my new static website in a few days, rather than months. I then had to make some final experiments to make sure which WordPress components and plugins to use for the static website to work correctly after generation. I managed to create a good and simple workflow that satisfies all my blogging and documentation needs. And the best of all, everything in the workflow is completely free.

 

Workflow

After two full weeks of exploration, here is my final workflow for my static website. I will list the steps of the two stages of initializing the tools and then updating the website. Initialization is only made once, so it’s very important to get right be patient with it. I will not provide detailed explanations but rather give a general idea about the needed steps. This way, anyone deciding to use this can explore other changes suiting specific needs.

Stage I: Initializing Your Website

Step I.1. Installing Local WordPress Server

First of all, you need to install WordPress on a local server for your personal access. No one else would be accessing this server, so it can be made as a simple Virtual Machine on your personal computer or laptop. I found a very good virtual machine that already contains a WordPress installation. You can find and download it here: www.turnkeylinux.org/wordpress

After downloading the virtual machine file you can use any Virtual Machine Application to open it as a virtual server for you to access locally. I personally use VMWare player for this task.

When you start the Turnkey WordPress virtual machine it will ask about some usernames and passwords. Enter these and keep them somewhere safe. These users and passwords will allow you to access the virtual server itself and the WordPress dashboard for developing your site. You should finally arrive at a screen with a listing of IPs like this one⁶.

The IP addresses in this screen are local to your system. You need to keep them for your access. The first IP (192.168.80.133 in this picture) is the main address of your WordPress installation. Open any browser in your PC and go to this IP and WordPress opens. Then you can work with WordPress like do online. The last IP (labeled SSH/SFTP in the picture) is very important for some tasks. You can use an FTP client application, like FileZilla, to access the file structure of your virtual server at any time. This is sometimes helpful for some maintenance tasks, but most of the time you won’t be needing it.

 

Step I.2. Configuring Local WordPress Server

You can now open WordPress from your browser and make your initial configuration. This includes installing your theme and favorite plugins. I’m using the free and beautiful Hueman Theme, which generates very well in the final static website. I also found this list of plugins very useful for my work for the final static website:

• Broken Link Checker: This plugin will monitor your WordPress blog looking for broken links and let you know if any are found.
• Column Shortcodes: Adds shortcodes to easily create columns in your posts or pages
• Crayon Syntax Highlighter: Very useful for showing formatted code in your posts and pages. It supports multiple languages, themes, highlighting from a URL, local file, or post text.
• Drop Shadow Boxes: Provides an easy way to highlight important content on your posts and pages. Includes a shortcode builder with a preview so you can test your box before adding it.
• Elementor: An advanced frontend drag and drop page builder. Create high-end, pixel perfect websites at record speeds⁷.
• Endnotes: A simple solution for adding footnotes to your WordPress posts or pages.
• EWWW Image Optimizer: Reduce file sizes for images within WordPress.
• Font Organizer: Our plugin is intended for any user in order to easily add native, Google and custom fonts; then assign them to different elements in your website effortlessly.
• Image Hover Effects Ultimate: An impressive, lightweight, responsive Image hover effects that you can use to creates modern and elegant CSS hover effects and animations.
• Max Mega Menu: a complete menu management plugin, perfect for taking control of your existing menu and turning it into a user-friendly, accessible and touch-ready menu with just a few clicks.
• Shortcodes Ultimate: A comprehensive collection of visual components for WordPress.
• Slider by WD and Smart Slider 3: Create responsive, highly configurable WordPress sliders with various effects for your WordPress site.
• TinyMCE Advanced: Enables advanced features and plugins in TinyMCE, the visual editor in WordPress.
• UpdraftPlus – Backup/Restore: Backup and restore: take backups locally, or backup to Amazon S3, Dropbox, Google Drive, Rackspace, (S)FTP, WebDAV & email, on automatic schedules.
• WP-KaTeX: The plugin allows you to put LaTeX in a [latex]...[/latex] shortcode and beautiful math appear on your post or page.
• WP-Optimize: An effective tool for automatically cleaning your WordPress database so that it runs at maximum efficiency.

You will also need to install one, or both, of these two great plugins on the local virtual WordPress server:

• WP Static HTML Output
• Simply Static

You will use these plugins in stage II for generating the files of your static website from the local WordPress virtual server. To organize and reduce the size of image thumbnails on your site, you can also install⁸:

• Force Regenerate Thumbnails
• Thumbnail Cleaner
• Regenerate Thumbnails

 

Step I.3. Migrating Online WordPress to Local WordPress

Now it’s time to migrate your WordPress website from the online version, if you already have one like me, to your local WordPress virtual server. On the online WordPress site, you need to install the Export WordPress Menus plugin to export your online menus as an XML file. Then you can use the builtin WordPress Export tool to generate one or more XML files from your online WordPress website. You can also install the WordPress Exporter plugin to export single pages, posts, or media files as you wish.

You will then import these XML files to your local virtual WordPress server while it’s connected to the internet to get a copy of all your posts, pages, media files, and menus. On the local WordPress virtual server install the WordPress Importer plugin. You can use this tutorial video for instructions on how to import your online contents using the XML files. Just make sure to check the “Download and import file attachments” checkbox to get all your contents. You will need to wait for the whole process to complete, and it may take longer if you have a large online website.

 

Step I.4. Update URLs on the Local WordPress Server

After importing your online website into your local virtual server you can expect to still have links to the online version. You don’t want these links on your final static website, however. To solve this problem you can install and use the Velvet Blues Update URLs plugin in your local WordPress virtual server to replace such links with your local WordPress server address. You can also test all your links on the local server using the Broken Link Checker plugin. After making sure everything is ok you can test your local site and make any necessary updates, configurations, and improvements.

 

Step I.5. Selecting Online Web Hosting for the Static Website

If you already have web hosting for your future static website, you can skip to the second stage of this workflow. But for those who need good suggestions, I will tell what I did.

Two good options for free static web hosting are GitHub pages and Netlify. Many bloggers and companies use one or both for their static websites. For my workflow, I use GitHub only as a repository for uploading the static website’s generated files: HTML, CSS, JavaScript, etc. As I will shortly explain in stage II, I generate my static website files from the local WordPress virtual server. I have a local GitHub repository linked with an online one under my GitHub account. I use GitHub Desktop to synchronize the local and online GitHub repositories regularly while developing my static website. I’ve created a Netlify free account that I use to deploy my GitHub online repository files as an online website. I found using Netlify offering many advantages over GitHub pages as described here and here. You can take a look at one of my sites, the GMac Guides website, hosted on Netlify here and its source web page files on GitHub here.

 

Stage II: Updating Your Website

This is the easy part of the workflow. If you have enough patience to complete stage I successfully, you can update your website using WordPress’s dashboard and plugins, then you can generate your static pages and upload to the online hosting service.

You start by using either the WP Static HTML Output or Simply Static plugin to generate your static pages and files. I found that WP Static HTML Output generates files with less size, but I  prefer Simply Static because it gives much better results for most themes and formatting plugins.

The next step is to use a good text editor, like Notepad++, to replace all URLs containing your local server address with the final web hosting server address. For example, I use Notepad++ Find in Files... menu to mass-replace text like 192.168.80.133 with gmac-guides.netlify.com in all generated files of the static website. The final step is a simple matter of uploading your generated files to the web hosting service, GitHub in my case, and publishing the website online.

 

Things to Explore

If you like this workflow you can make many more explorations of your own. For example, you can try other themes with more interesting visual styles, menu, and formatting plugins. You can also explore email-based commenting systems like Disqus. You can even explore modifying the generated web pages using other web design tools. I also found adding google analytics code to be relatively easy in this workflow.

My new GA Explorer static website is now online. I’m happy to continue using WordPress with all its power for its development while gaining all of the benefits of using the static side of the web.

---

---