Website Converstion From PHP to JS (Gatsby)
August 31st, 2019 | 3 mins read
Welcome to my Blog
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.
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.
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 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.
I had a
<?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 is used for the title of the page, and the
<h2> tag of the blog.
$date is used for date of blog.
$content is used to get the contents of the blog.
On each blog, say,
first-blog.php, I would have
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.
<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 -
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