Migrating from Wordpress to AstroJS

Wordpress to AstroJS

You can also Read an Indonesia version of this Article at my Personal Blog.

Migrasi dari Wordpress ke AstroJS

I have been using Wordpress for almost 20 Years and it was so Easy to setup back then, compared to building my own CMS or using any other Alternatives. You could start by using its famous 5 Minute Installation which was such a breeze to setup and then you will have your own Blog for the whole world to see.

But I hated having to use a Web Hosting with CPanel back in the Day. It felt so restrictive, so I decided to migrat my Websites to DigitalOcean around 10 Years ago, they had a 1-Click Starter that cost around 5$/month. Again the Migration was super easy because Wordpress already had all the tools to export my Data from the Web Hosting. I had more trouble trying to setup the Apache Server and the SSL Certificates.

I haven’t really paid attention or written on my sites for 10 Years, so when I tried to get Back I was so overwhelmed. The Ubuntu Server was on version 16 which has been on End of Support since 2021. The PHP Engine was also on a old Version and most of the Wordpress Plugins and Themes were either outdated, not supported using the PHP Version I was on or have been left by their Developers.

Also, trying to use the Wordpress GUI to write felt like too much. So many buttons and clutter and information, I just couldn’t continue using it.

I decided to just make a Static Site and since I have been hearing so many great stories about AstroJS, well just had to give it a try. Especially since I have been using Javascript and NodeJS for +10 Years now.

How lucky for me to find this Article which made it even easier.

The only difference was that I choose to use an existing Template called AstroWind and choose to use it in a NX Monorepo so that I could put all my Websites into one Repository and use the same Template on each one with NX’s Import. I also had to use @nxtension/astro and Github’s CI.

AstroJS Lighthouse Result

Here is the Code Snipper for the Disqus.astro

---
export interface Props {
  url: string;
  identifier: string;
}

const { url, identifier } = Astro.props;
---

<div class="disqus-container">
  <div id="disqus_thread"></div>
</div>

<script is:inline define:vars={{ url, identifier }}>
  /**
   *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
   *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */

  window.disqus_config = function () {
    this.page.url = url; // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = `${identifier} ${url}`; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
  };
  if (!window.DISQUS) {
    (function () {
      // DON'T EDIT BELOW THIS LINE
      const d = document,
        s = d.createElement('script');
      s.src = 'https://xyz.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
  } else {
    window.DISQUS.reset({
      reload: true,
      config: disqus_config,
    });
  }
</script>

<noscript
  >Please enable JavaScript to view the <a
    href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a
  ></noscript
>

<style>
  .disqus-container {
    max-width: 900px; /* Adjust the width as needed */
    margin: 0 auto;
    padding: 1rem; /* Optional: Add padding */
  }
  #disqus_thread {
    width: 100%;
  }
</style>

And here is the code to Add it

import Disqus from '~/components/common/Disqus.astro';

// Generate the canonical URL and identifier for Disqus
const canonicalUrl = post.disqusGuid as string;
const identifier = post.disqusId as string; // Or use any other unique identifier for the post
---

<Disqus url={canonicalUrl} identifier={identifier} />