originally published on www.vuejsradar.com
note: Part 1 & 2 of this series is kept for reference. Please refer to Part 3 as I am
now moving everything to Nuxt for this site and this code will not be used.
This article is part 1 of a series looking at how you can use Vue + your IDE to build your own static blogging platform. Each part will build upon the previous one, taking you through the steps of building a CMS which is being used on this site. This code will be shared on github.com for everyone to use.
So you’ve decided you want to blog and can’t decide between WordPress, Ghost, Medium. Maybe you should reconsider and build your own custom CMS with the tools you already have!
The concept of static file CMS’s is not new, you’ve probably heard of Jekyll or Statamic… both are very awesome alternatives to traditional CMS’s like WordPress or Drupal. So what am I proposing instead? I’m going to recomend that there are lots of benefits in simply using your IDE and VueJS stack as a means of building your blog or website. In fact, this website itself (VueJS Radar) is running on my custom Vue setup which I will open source on github for everyone to follow along.
My primary motivation for this comes down to the painful experiences I’ve had with using WordPress to display content in specific ways, or integrating any type of Javascript onto a page. Typically, WordPress works great if you stay within the lines, but the moment you want to customize or just do some basic Javascript enhancements it becomes a lot harder and slower than it should be. This is all fine if you’re not a developer, WordPress or any CMS that does not require code is an amazing tool. But if you are a web developer, it actually does not make a lot of sense to use WordPress when you are able to do most of the work yourself.
Before I dive into the details, it’s important to consider the whys or pro/cons of this path.
Pros
- Can use git to deploy and manage content. eg. git push origin master
- IDE + Webpack Hot Reloading = better dev UX than a web based WYSWYG editor
- IDE = code completion + all your custom shortcuts, vim support etc…
- Easy to customize UI without having to learn a specific theming/plugin system.
- Build & Learn as you go.
- eg – Need SEO, learn SSR or pre-rendering and add it in
- Fast loading – the entire site can exist as static files without a backend.
- Leverage all the power of Vue!
Cons
- Not alot of components or plugins to solve specific CMS problems.
- Could be intimidating to new developers.
- Takes more initial time to setup + learn
- Why re-invent the wheel?
- Need to do some server / domain setup work
- Collaborative Editing is not really easy
Okay, if you’re still with me that’s great! Next, I’m going to list out a list of features I would like my site to have. Checkmarks indicate features that are already built.
Feature List
- CMS for Site Pages
- CMS for Blog Posts
- Permalinks for each blog post
- Blog Pretty URLs (slug) https://vuejsradar.com/article/my-post-name
- Site Map
- SEO Optimized
- Attribute Author to Posts
- Commenting
- Social Sharing
- Responsive
- Ability to easily publish updates to live site
- Ability to draft
- Multiple Layout types per page + blog posts
- Show Code Prettified in pre tags
This list will keep growing through each article as we identify desirable features, but we do want to make sure this list of features is focused on productivity and simplicity. Let me review the steps I’ve taken to build the current version of this site.
Prerequisites
- vue cli
- npm or yarn
- git
Steps
- Download + Setup official Vue Webpack starter template.
- Install npm package html-loader to pull in HTML content for rendering blog posts.
- Install npm package vue-disqus for commenting
- Setup vue-router w/HTML5 Setting to achieve normal urls
- Install Google code-prettify https://github.com/google/code-prettify
- Install UI Responsive Theme (I added in bootstrap 4)
- Store blog posts array of JSON data in component. (Refer below for code snippet)
- Create an Blog Vue component that can render a given post using the ID in the URL
- Add vue-disqus to the Blog Vue component layout
- Write first post 1.html where the filename maps to the blog post ID defined in step 7.
- Update vue-router to use ID in URL to load filename
- Write/Edit/Tweak blog post 1.html in IDE with Hot Reloading!
- git commit -am “The First Blog Post”
- git push origin master (Site updates automatically with git hooks)
const blogPosts = [
{
id: 1,
title: "How to build your own site+blog CMS with Vue (Part 1)",
author: {
name: "andreliem",
url: "https://twitter.com/andreliem"
}
}
]Wrapping up
With those steps we now have a basic CMS that can leverage all the power of Vue with full customization at your finger tips. I will be packaging up all of this content and sharing it on github very soon. Follow VuejsRadar on twitter for notifications or subscribe to the newsletter!