The latest articles on DEV Community by Akbarsait (@akbarsait). https://dev.to/akbarsait https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F119394%2F539bd0d9-7b32-4539-8277-155e51b39280.jpg https://dev.to/akbarsait en Akbarsait Wed, 17 Apr 2024 02:39:36 +0000 https://dev.to/akbarsait/converting-blogcfc-blog-to-eleventy-26cj https://dev.to/akbarsait/converting-blogcfc-blog-to-eleventy-26cj <p>Originally posted at <a href="https://akbarsait.com/blog/2024/03/16/converting-blogcfc-to-eleventy/" rel="noopener noreferrer">akbarsait.com</a></p> <p>This post outlines the steps for migrating an existing <a href="https://github.com/teamcfadvance/BlogCFC5" rel="noopener noreferrer">BlogCFC</a> blog to a <a href="https://jamstack.org/what-is-jamstack/" rel="noopener noreferrer">JamStack</a>, with a focus on using <a href="https://www.11ty.dev/" rel="noopener noreferrer">Eleventy</a>.</p> <p><strong>Blog Posts Conversion to MD Files:</strong> First, convert the existing blog posts to Markdown files. Since all the BlogCFC posts are data-driven, this simplifies the process of converting them to MD files. Adrian Moreno has created a three-step script to make this even easier. Simply use the ColdFusion scripts and customize them as needed</p> <ul> <li><a href="https://adrianmoreno.com/2018/10/06/converting-blogcfc-posts-to-markdown.html" rel="noopener noreferrer">https://adrianmoreno.com/2018/10/06/converting-blogcfc-posts-to-markdown.html</a></li> </ul> <p><strong>Comments Handling:</strong> Next, I needed to migrate the comments from the blog. Initially, I used the built-in comments functionality that saved comments to the BlogCFC database. Later, I migrated to Disqus. Despite the low comment count, I followed these steps to manage them.</p> <ul> <li><p><strong>Comments Export from Disqus</strong>: Raymond Camden outlines the steps for converting: <a href="https://www.raymondcamden.com/2014/11/26/disqus-update-and-blogcfc-export-script" rel="noopener noreferrer">https://www.raymondcamden.com/2014/11/26/disqus-update-and-blogcfc-export-script</a></p></li> <li><p><strong>Comments Import to Eleventy</strong>: After converting the content to XML files, the next step is to create a JSON file with a name similar to the blog post’s Markdown (MD) files. Eleventy will automatically handle this JSON data within our markdown template. The process is documented through utility by Zach Leatherman. <a href="https://github.com/11ty/eleventy-import-disqus" rel="noopener noreferrer">https://github.com/11ty/eleventy-import-disqus</a><br> </p></li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight html"><code>coldfusion-builder-extension-appcore-creator.md coldfusion-builder-extension-appcore-creator.json </code></pre> </div> <ul> <li> <p>The result of the imported comments will display as follows.</p> <ul> <li><a href="https://akbarsait.com/blog/2009/1/13/blogcfc-redesign/" rel="noopener noreferrer">https://akbarsait.com/blog/2009/1/13/blogcfc-redesign/</a></li> <li><a href="https://akbarsait.com/blog/2013/11/23/getcfmljobscom-for-cfml-developers/" rel="noopener noreferrer">https://akbarsait.com/blog/2013/11/23/getcfmljobscom-for-cfml-developers/</a></li> <li><a href="https://akbarsait.com/blog/2012/1/25/configuring-and-running-railo-powered-cfml-applications-on-jelastic-cloud/" rel="noopener noreferrer">https://akbarsait.com/blog/2012/1/25/configuring-and-running-railo-powered-cfml-applications-on-jelastic-cloud/</a></li> </ul> </li> <li><p><strong>Handling New Comments</strong>: There are excellent lightweight comment utilities available for managing comments on your eleventy blog. I personally use <a href="https://utteranc.es/" rel="noopener noreferrer">Utterances</a>, but <a href="https://giscus.app/" rel="noopener noreferrer">Giscus</a> is also a great alternative.</p></li> </ul> <p><strong>Redirect and Netlify:</strong> If you’re hosting your blog on Netlify and intend to set up redirects for changes to your page URLs, create a new front-matter entry using the following script. This step is necessary only if you plan to alter the URL pattern from your previous blog to the new one.</p> <ul> <li><a href="https://willvincent.com/2022/07/27/redirects-with-11ty-and-netlify/" rel="noopener noreferrer">https://willvincent.com/2022/07/27/redirects-with-11ty-and-netlify/</a></li> </ul> <p>The <a href="https://dev.to/blog/2023/12/09/blog-poweredby-11ty/">transition</a> from BlogCFC to Eleventy was smoother than anticipated, and I successfully deployed the website on <a href="https://www.netlify.com/" rel="noopener noreferrer">Netlify</a>. <br> Thanks to Adrian Moreno, Raymond Camden and Zach Leatherman. If you have any questions, feel free to leave a comment! </p> <p><strong>Related Post:</strong></p> <ul> <li><a href="https://akbarsait.com/blog/2023/12/09/blog-poweredby-11ty/" rel="noopener noreferrer">Blog Powered by 11ty</a></li> <li><a href="https://akbarsait.com/blog/2009/1/13/blogcfc-redesign/" rel="noopener noreferrer">BlogCFC Redesign</a></li> </ul> <blockquote> <p>Title Photo by <a href="https://unsplash.com/@akbarsait?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Akbar Noormohamed</a> on <a href="https://unsplash.com/photos/Upr4-ZYhSAo?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Unsplash</a></p> </blockquote> blogcfc 11ty coldfusion cfml