AmerasianWorld.com -> Jamstack

Expat Life Jun 3, 2021

Well here goes. Last week I finished migrating my 21 year old website, AmerasianWorld.com, from Ghost to Next.js. Before that, it spent nearly 14 years as an XHTML 1.1 website, yes I said 14 years. Then I moved to briefly to WordPress then Ghost and finally to Next.js. Jamstack, I am here.

My XHTML 1.1 site that lasted 14 years online!

Early web development was fun

When I first made my website in early 2000, I was using Yahoo Geocities really basic WYSIWYG graphic users interface. Then Frontpage followed by Dreamweaver. These were the early days of web developing. It was a time where all photos needed to be thumb-nailed. I was lucky since I had T1 speeds when I started my first website. Most of my photos you see on AmerasianWorld.com now were scanned in 2000.

I had so much fun.

When I graduated with my masters, I spent a year in Seattle before relocating to Vietnam. During the year, I first taught myself HTML then moved over to XHTML 1.1 and CSS.  I hand coded everything with Quanta Plus, my favorite IDE at the time. I remember having to convert all of the Dreamweaver generated code to proper XHTML 1.1. Jeffrey Zeldman's book, Designing with Web Standards, was my CSS bible at the time.

I had so much fun.

The XHTML 1.1 lasted for 14 years. Yes, I keep saying this. This shows you how robust XHTML 1.1 was. You can still the original site as is, minus the banners, on the Wayback Machine.

2006 and WordPress

Six years of web development pretty much came to an end in 2006 when I started blogging with WordPress. Yes, it is a great content management system. Made administering a website really easy. Updates were a breeze.

WordPress made me a lazy web developer. Eventually, it got to the point where using WordPress made me more of a button/link clicker than an actual developer. Instead of designing a site, I was looking for a good pre-made theme, and later, a good framework. Instead of coding, I was now figuring out how to set up the newest framework.

After a while, I got bored. During this time, I was doing freelance work for several clients. I got bored. Integrations were all with plugins. I ended up focusing more on getting my new Nginx full stack server running then actually building a good website.

An Indian friend introduced me to Jekyl in 2011 but it was a bit too late. I got burned out and decided to focus on teaching computer science. When I started teaching full time, all of my sites were left in limbo.

In between WordPress and Jamstack

Before getting to Jamstack, it should be noted that I was forced, by Google, to migrate my XTHL 1.1 to HTML 2.0. Google did not consider my site as responsive anymore meaning you could not view it easily in a mobile phone. So in 2018, I finally spent a couple days moving my XTHML 1.1 site to WordPress. I removed all the thumbnails. Got the site up and then left it as is.

I got bored.

My site got very little traffic.

I then decided to move it to Ghost since I was planning to get rid of all of my WordPress sites. I migrated it over, configured the WordPress to Ghost plugin incorrectly, and ended up with a horrible looking site.

Ghost is for blogs, AmerasianWorld.com was never intended to be a blog. The horrible looking site forced me to find a solution real quick.

It was getting traffic.

Coming to Jamstack

My first experience with Jamstack was trying to figure out what the hell Jekyl was. When my Indian friend, Patrik Sinha, the guy that founded AltNews exposing fake news in India, told me about static site generation way back in 2011. I also designed a couple sites with Bootstrap and Foundation in 2013. Unfortunately, by this time, I had no interest in anything related to IT except teaching. The webdev flame was out and remained unlit until 2019.

The in between years found me teaching ICT, Computer Science and Media/Drama with two different international schools in China and Kazakhstan. As I mentioned above, I was doing more server admin stuff than web developing (well WordPress is not really web developing anymore).

Then in 2019, at my gym, the owner and another Swiss member talked about static site generators. Even better, they "showed me" what static site generators could do.

Wow!!!

Daniel, the owner, pointed me to GatsbyJS and Gridsome. Gatsby being the static site generator for React Javascript sites. Gridsome for Vue.js sites. I fell in love with Gridsome but Daniel mentioned Nuxt.js to me, I was sold.

Then I was introduced to the Tailwind CSS framework. For the first time, in a long time, I was doing real web developing again. I fell in love with Netlify and Github.

I then realized I was no longer burned out. I created several project sites in NuxtJS + Tailwind CSS. Ran them for a couple years. Then about a couple months ago to make the move to Next.js. I knew I would need to do some React projects in the future so I spent two weeks studying Next.js. I am now working on two customer sites migrating their old websites to Next.js + Tailwind CSS.

During this process I finally decided it was time to migrate AmerasianWorld.com to Next.js. It took me roughly 40 hours to migrate the entire site. The process was sped up because I hosted my images over at Cloudinary. The website retains the old color scheme and logo from the XHTML 1.1 site. In fact, Tailwind CSS makes it easy to customize your own color schemes.

Next.js + Tailwind CSS website.
Tailwind CSS customized color scheme are based on the flags of Kazakhstan, Kyrgyzstan, Uzbekistan and Japan.

Web developing is fun again.

After five days, I pushed the code to Github. Netlify then pulled the source code and built the new site. The site performed well with Google Pagespeed Insights.

You can see the results here -> https://amerasianworld.com.

Conclusion

Now I am back. Though the site is complete, I still want to work on a better top navigation bar in the future. There is a lot more that can be done. With the migration to Next.js, this will be simpler to do.

There is much more I want to talk about. I will save it for future posts. My goal is to eventually create a site to help WordPress users make the switch to Jamstack. Yes there are many sites that offer tutorials but most of these courses but none are catered to the average layman.

More later. Ja mata.

Tags

Kevin

A Japanese Amerasian's Journey from the Caspian Sea to Vietnam. I am a RPCV Kazakhstan and a former US Marine. I am also the Tech, Social Media & Marketing guy for Baba's Kitchen.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.