Profile picture

Website Converstion From PHP to JS (Gatsby)

August 31st, 2019

#general#gatsby

Welcome to my Blog 

Quick Intro...

I am Dillion Megida, a frontend developer, technical writer and graphics designer.
I write on web development, mostly frontend. I try my best in explaining to the best of my knowledge - giving examples, sharing resources - in any topic I am writing about. I also write on Dev.to - Dillion Megida and Dillion Hashnode Blog.

My Blog - dillionmegida.com

I launched this blog during June, 2019 and wrote had my first article written, Dillion Megida - First Blog on the 18th of the same month where I shared a bit about my journey into Web Development and Graphics Designing.

The Conversion

I had all files written in PHP.
I tried implementing Model-View-Controller (MVC) structure. There was no Model though, as I wasn't working with any database.
I just had the controllers controlling the views.
It was a nice implementation I would be honest.

At that moment, I wasn't too professional with PHP. I've been advised by friends to learn Laravel and some other suggested frameworks, but I wanted to be JS-Focused.
My aim was to be a Javascript Full-stack developer, since Javascript was doing a lot those days. PHP was just a one-sided skill. Advancing in PHP was a bit more of a future plan 

My website was going fine until I wanted to write another article. It was almost as developing a new webpage and inserting code snippets was a big headache.
This is the major reason my blog has been idle for a while. I worked towards a solution so that I could start writing more articles.

My Implementation

I had a blog-template.php file.

<?php

$title = 'Dillion Megida - '.$blogTitle;
require_once 'public/common/headTag.php';

?>
...
<h2><?= $blogTitle ?></h2>
<p><?= $date ?></p>
<hr>
<p class="content"><?= $content ?></p>
...
<?php
...
?>

These are important parts of my file. So, on each blog, I simply state the variables - $blogTitle, $date, $content.
The $blogTitle is used for the title of the page, and the <h2> tag of the blog.
The $date is used for date of blog.
The $content is used to get the contents of the blog.

Please note that styles were stated on this page

On each blog, say, first-blog.php, I would have

<?php

$blogTitle = 'Dillion Megida - First Blog';
$date = '18th July, 2019';
$content = "
This is my first blog.
<br/>
I have a little code.
<pre>
<code class='language-javascript'>
console.log('first blog')
</code>
</pre>
"

require 'public/common/blog-template.php';

?>

This was pretty much it.
Noticed how I added code-snippets? This was possible after importing the source code of prism.js syntax highlight in my head tag.
Having <pre>s and <code>s everywhere and declaring class of language was kind of a task.

I then remembered that GitHub uses markdowns and also Dev.to which I am quite familiar with uses it. I make my formats by adding things like ## for bold, []() for links, ``` ``` for adding codes, and so on. This seemed like a solution to me.

While carrying out research on .md files and blogs, I encountered Static Site Generators. I read their implementations and to me, this was the perfect fix. But, there were (and still are) so many SSGs - Next.js, GatsbyJS, Hugo, to name a few.

I threw out a question on Twitter asking for the best SSG and many suggested Gatsby. I also checked a professional developer () Florin Pop's Blog's source code and noticed __gatsby  Gatsby to the Rescue 
I gave it some research and discovered it uses React. At that moment, I was learning React so I felt it would improve my understanding of React.

I followed the tutorials on their website - how to setup environment, how use components (and those provided by Gatsby), how to run GraphQL queries (which could transform .md files), how to programatically add data to a page, how to build and serve project, and so on.
They also made an example with a little blog.
At this point, I made up my mind. I started breaking my website into components, and grouping them together, until I achieved the website back (though with new styles). I also used GraphQL as I learnt from their tutorials.

I would be honest, learning Gatsby wasn't easy. I publicly committed to some goals on Twitter on the 3rd of this month, August, which included converting my website. You wouldn't believe that I just finished and updated my blog today, the 31st of the same month 
I'm though happy I was able to achieve this goal.

Now, I have an easy blogging platform. Easy markdowns and easy cody syntax highlighting.
Like I said earlier, this was what kept my blog idle for some days.
Now, I'd put in my best in writing more articles and helping the community the best ways I can.

You can connect to me on Twitter @iamdillion. My DMs are always open.

Thanks for reading 


Connect with me ✨