Moved My Blog Website From WordPress To Dev.to With VueJS
Published: 2020-07-22 14:17:23

I normally write my technical articles on [sulmanweb.com](https://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](https://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:
{% link codespent/start-your-blog-with-a-dev-to-backend-13e2 %}
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 {% user codespent %} 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:
{% github sulmanweb/sulman-website %}

The website can be seen at [sulmanweb.com](https://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](https://highlightjs.org/) to highlight the code blocks in the post.

## Backend

To get the posts from dev.to I referenced to this [documentation](https://docs.dev.to/api/).

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

To get a post from slug I used:
[https://docs.dev.to/api/#operation/getArticleByPath](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!