Moved My Blog Website From WordPress To Dev.to With VueJS

I normally write my technical articles on sulmanweb.com which was built in WordPress. The problem with WordPress was it's old, created in PHP. Also, installation in some hosting can be paid least $60 a year and then the themes for a good tech blog are around $45. Then for cache-control, analytics plugin also costs monthly.

Then arises the main problem for me that was I didn't know PHP so I couldn't do many changes in my blog even which I really wanted to change. Second, the problem was I used to create articles on dev.to and on my blog website. So I had to write in different ways that for WordPress site and dev.to site which was that hectic that I was thinking abandoning my passion.

Then I came across an article on dev.to:

Start your blog with a Dev.to backend

Patrick Hanford ・ Nov 11 '19 ・ 10 min read

#beginners #vue #javascript

This gave me the hope that I can save my passion of writing tech articles.

Plan

I made a plan to create a new blog website using the skills I knew. Still, there was a problem I can create backend but again I had to write articles for both platforms again then by

Patrick HanfordFollow

Hello, I'm a self-taught developer predominantly writing in Python & Javascript, here to write for beginners behind me, and for feedback from veterans ahead of me! I also love DevOps!

article I came to know that dev.to also provides API that gives access to my articles that I could use in my blog. So, now all I have to do is create the front-end app of my website and for blog posts, I can use dev.to articles. Then I will create a post on dev.to and will be easily used to show on my website.

Implementation:

You can view the whole implementation of my project here:

sulmanweb / sulman-website

SULMANWEB

https://sulmanweb.com

• Build in VueJS

View on GitHub

The website can be seen at sulmanweb.com.

I knew VueJS, TailwindCSS. So I created a website in these technologies. As I share mostly code blocks so I used highlight.js to highlight the code blocks in the post.

Backend

To get the posts from dev.to I referenced to this documentation.

To get all posts I used: https://docs.dev.to/api/#operation/getArticles

To get a post from slug I used:
https://docs.dev.to/api/#operation/getArticleByPath

I didn't use the api-key provided by dev.to as vuejs is a front-end app and if I used api-key then everyone will have access to that key. So I used those apis that were available without api-key.

Netlify

I deployed my app to Netlify as it's free deployment platform with various features for front-end apps like CDN, compression, minify, SSL, etc. The most important feature is prerendering(beta) from Netlify for SEO. It also allows to add scripts like analytics etc as well. So, In my opinion, Netlify is the best option to deploy SPA apps.

Conclusion

I am very happy after doing this work and the results are quite outstanding. Performance is much much better than WordPress with no cost at all apart from domain cost and much better in cache control and as it was from zero-project so no overheads at all. The total website size was 685kb only.

Also, When I saw the liquid tags of dev.to in action on my website I am over the moon. I could not do such an output in HTML in my blog without dev.to.

Thanks, Dev.to

Happy Coding!

Comments

[Jakeer]

Salamalaikum
Jazakallah khair