Creating a Personal Blog with Vue.js - Part 1: Getting Started

Hello and welcome to my brand-new tutorial on building a personal blog using Vue & Markdown! In this tutorial, you are going to create a full-featured personal blog using Vue.js and deploy it to GitHub Pages! So before starting this tutorial, you might want to check out the Vue.js Docs. After you learned how to use the basic features of Vue.js, let's continue!

If you wanted to see what the project looks when it's finished, head over to my blog! It's using the very same code just like in this tutorial.

Starting Our Project

I assume you have Vue CLI installed. If not, follow the docs to install Vue CLI. We will use it through out our tutorial later on.

OK, so you've got all set, let's create our project. Type in vue create <project-name> in your terminal, replacing the placeholder name to your favorite name. I'll just use personal-blog:

Press enter, and you'll probably see an interface similar to this:

Select Manually select features using arrow keys, and press enter, you will see a form like this:

Toggle CSS Pre-processors and Router. Make sure you have the other two defaults toggled on. Then press enter. You can choose your features of selected extensions then, and below are mine.

Then press enter. The CLI tool will automatically create an empty project for you. After the installation is over, run cd <project-name> to get into your project folder.

First, run our project to make sure we've got everything all right with command npm run serve. Wait a few seconds, and then go to http://localhost:8080/ in your browser. You will see a page like this:

OK, so now we've got the website working, we need to work on styles next.

Choosing an UI Library

Choosing an UI library is very important. It defines the main design and look of your website, so we must be careful. Of course, you can write your own CSS and stuff, but that's too complected. The common Vue UI frameworks are Vuetify, a Vue UI framework for Material Design, BootstrapVue, a mix of Vue and Bootstrap, Quesar Framework, a Vue.js framework following the design guidelines. But, these are too normal. Since we are building a personal blog, we must have an unique design. So I chose Vuesax, a framework
components for Vue.js. It has a very unique design, not following any design guidelines, but very beautiful.

The version of Vuesax we are going to use is 4.x, which is still in Alpha state. But the components already made are enough to create a simple interface for us. You can see the current major version (3.x)'s docs here, or track the development of 4.x here on GitHub. To install it, open a new tab in your terminal and cd into your project, run npm install vuesax@next to install Vuesax 4. After installing, we are going to create a basic bone for our blog.

Creating the Basic Website

Emptying the Project

OK, so now we got to the code. Open HelloWorld.vue in the src/components folder, and delete everything in there. Then go to App.vue in the src folder, remove everything again. Then, we will delete About.vue in src/views at this moment, because we don't need it. After this process, you will probably see an error message in your console. Don't worry, it's because Vue can't find the file About.vue that we've just deleted. In src/router/index.js, remove the /about route:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Now check the website again. It turned into a blank website. Great! That's what we wanted. So now we can work on our own site.

Working On the Blog

Let's rename our src/components/HelloWorld.vue to Index.vue now. Then you will get an error again because we didn't rename it inside src/views/Home.vue. Let's rename it:

<template>
  <div>
    <Index/>
  </div>
</template>

<script>
import Index from '@/components/Index.vue'

export default {
  name: 'Home',
  components: {
    Index
  }
}
</script>

Note that I made a few more changes like removing the class home on the div element, removing the Vue logo image, and removing the msg property on component Index. So now the website should work again. Let's go on.

Making a Navbar

Every website needs a navbar on the top for navigation, and so do our blog. Lucky for us, Vuesax had already crafted a Navbar component for us. So with that, we can easily create our navbar component.

First, create a new file Navbar.vue in src/components. This will be the file we'll be working on to get our navbar working.

Then, import Navbar.vue inside Index.vue:

<template>
  <div>
    <Navbar/>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'Index',
  components: {
    Navbar
  }
}
</script>

Okay, so now we can finally work on our navbar. Let's get our basic template set:

<template>
  <div></div>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

Hang on, we'll get to the navbar part soon. But now, we need to import Vuesax to our project. Edit src/main.js to the code below:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css'

Vue.config.productionTip = false

Vue.use(Vuesax, {})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Now we've added Vuesax to our project, let's make the navbar. I just copy and edited a few based on the navbar example given in the docs.

<template>
  <div>
    <vs-navbar shadow-scroll fixed center-collapsed v-model="active">
      <template #left>
        <h3>Hello World</h3>
      </template>
      <vs-navbar-item :active="active == 'home'">
        Home
      </vs-navbar-item>
      <template #right>
        <vs-button flat>Posts</vs-button>
      </template>
    </vs-navbar>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data: () => {
    return {
      active: 'home'
    }
  }
}
</script>

The website at this moment looks like this:

The font looks awful, uh? Will, the poppins font came to rescue! I've uploaded it into the GitHub link at the bottom of this tutorial, so you can download it there if you want. Paste the whole fonts folder into public folder, and create a new folder called styles. Then, create a new CSS stylesheet called main.css inside it. The code below just gives the basic font support and adds a container and a divider, nothing special. Move it to main.css:

@font-face
{
  font-family: Poppins;
  src: url("../fonts/Poppins/Poppins-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  font-family: Poppins;
}

.container {
  margin-left: 50px;
  margin-right: 50px;
}

hr {
  border-width: 1px;
  border-style: solid;
  border-color: #EEF2F5;
  margin-bottom: 10px;
}

Then, add a new line to index.html in the public folder:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- This line below -->
    <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>styles/main.css"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

All right, now reload the webpage and it will be fresh:

Neat, right? Well, that's the importance of looking for the correct font. I chose the Poppins because it's very similar to the font they used on the Vuesax Website.

Summing Up

So that's all for this part of this tutorial. We've created a basic navbar using the Vuesax framework and built a dead-simple tiny-little website that only has a navbar. And as always, if you have any questions on this tutorial, feel free to leave a comment below. Bye! I'll see ya next time.

Comments

[abdullahdickys]

where is the part 2?

[Sam Zhang]

Ah, well.... Actually I've almost forgot about this project... I've checked out the deps for this project, and most of them are outdated or unmaintained for a long while. I will be most likely to start a new one from zero in the near future... thx!

[Jaime Aleman]

What a bummer, I was excited to see a Part 2 :(