DEV Community

Zen
Zen

Posted on

Finally, I rebuild my blog (Jekyll based) with Vue 🥳

It's my new blog:

Halaman depan blog Zen

Halaman detail blog Zen

Technologies what I use:

  • Vue
  • Vue Router
  • Custom CSS (I write these in one night!) 🙃
  • Images from Freepik (I'll write the attribution soon)

You can fork this from my Github repo:

GitHub logo mzaini30 / mzaini30.github.io

Website ini berisi dengan berbagai proyek yang telah aku kerjakan.

Vue Starter

Usibg Vue Editor

Add in ~/.bashrc:

export VUE_EDITOR=subl
Enter fullscreen mode Exit fullscreen mode

Place Vue Files and Markdown

In src/pages/.

Place Static Files

In public/.

Modify Base URL (for sitemap)

In vite.config.js, in section:

const hostname = 'http://localhost:3000/'
Enter fullscreen mode Exit fullscreen mode

Markdown File Example with Head

---
title: About
---

# This is about page

Good
Enter fullscreen mode Exit fullscreen mode

Link to Other Page

<router-link to="/about">About page</router-link>
Enter fullscreen mode Exit fullscreen mode

Using Head in Vue Page

<script setup="">
 import {Head} from '@vueuse/head'
</script>

<template>
 <Head>
  <title>Hi...</title>
 </Head>

 <p>This is home</p>
</template>
Enter fullscreen mode Exit fullscreen mode



Discussion (0)