Creating a Personal Blog with Vue.js - Part 1: Getting Started
Tags: vue, tutorial
Published: 2021-01-03 09:14:17

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](https://vuejs.org). 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](https://samzhangjy.github.io)! It's using the very same code just like in this tutorial.

## Starting Our Project

I assume you have [Vue CLI](https://cli.vuejs.org/) installed. If not, follow [the docs](https://cli.vuejs.org/guide/installation.html) 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`:

![Creating Project](https://dev-to-uploads.s3.amazonaws.com/i/pnkfhnwrtuv51halxak4.png)

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

![CLI Interface](https://dev-to-uploads.s3.amazonaws.com/i/okuko64h9alkvtbv6583.png)

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

![Selecting Features](https://dev-to-uploads.s3.amazonaws.com/i/wqolfsv2xdxi25i6kw02.png)

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.

![My Features](https://dev-to-uploads.s3.amazonaws.com/i/9dq1xmu2oc2m04xigqt9.png)

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:

![Page Example](https://dev-to-uploads.s3.amazonaws.com/i/69v9i4jsqh9vwhuxp5m0.png)

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](https://vuetifyjs.com/en/), a Vue UI framework for [Material Design](https://material.io), [BootstrapVue](https://bootstrap-vue.org/), a mix of Vue and [Bootstrap](https://www.getbootstrap.com), [Quesar Framework](https://quasar.dev/), 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](https://vuesax.com/), a framework
components for Vue.js. It has a very unique design, not following any design guidelines, but very beautiful.

![Vuesax](https://dev-to-uploads.s3.amazonaws.com/i/1lm1e6p2hu19zj276kci.png)

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](https://lusaxweb.github.io/vuesax/), or track the development of 4.x [here on GitHub](https://github.com/lusaxweb/vuesax-next). 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:

```js
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:

```vue
<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](https://vuesax.com/docs/components/Navbar.html) 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`:

```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:

```vue
<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:

```js
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.

```vue
<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:

![Look of the Website](https://dev-to-uploads.s3.amazonaws.com/i/6zur08z85xj0wq4nzun1.png)

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`:

```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:

```html
<!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:

![The New Look](https://dev-to-uploads.s3.amazonaws.com/i/f562ku62oe3lzbcshaec.png)

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](https://vuesax.com).

## 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.