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 much1. 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!
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:
- A simple workflow to add and edit good looking pages, posts, and menus.
- Easy to learn and use; visual content management is preferred over coding.
- Freedom and simplicity to include images, videos, links, mathematical equations, and nicely formatted code snippets.
- A responsive fast loading website for better browsing experience.
- Minimum website security management hassle.
- 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.
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.
A multitude of static web design tools has recently arrived. A major class of tools includes Jekyll, Hugo, Middleman, Gatsby, and Hexo3. 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 example4. 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 years5.
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 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
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 one6.
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 speeds7.
- 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:
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 install8:
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.
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.
- If you want to learn WordPress the wpSculptor YouTube channel contains excellent tutorials for you. I personally used this one back in 2015 for my work. ↩
- For a nice collection of tutorials on these tools see the Giraffe Academy YouTube channel ↩
- There are many other reasons why I don’t prefer this class of tools, some are listed here. ↩
- One tool I expect to grow in the future is Publii; an application for building static websites directly on your desktop. ↩
- You must configure your Virtual Machine Application to allow internet access to the virtual host, of course. I use NAT port mapping in VMWare to get these IPs for my virtual server ↩
- The Elementor Page Builder plugin is a beautiful addition to WordPress you can use to create very nice looking pages and posts. The official Elementor YouTube channel contains many excellent tutorials. You can also find a nice comprehensive tutorial about it here. ↩
- You can find a nice tutorial explaining these thumbnails organization plugins here. ↩