Skip to content
Search

DEV Community 👩‍💻👨‍💻

Zen
Zen

Posted on

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

#showdev

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

View on GitHub


Top comments (0)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.

Read next

gehrig profile image

November Stripe Developer Digest

Gehrig -

advicement_sa profile image

5 Advantages of Using LaTeX API for PDF Generation

IgorR -

kdevzilla profile image

I create a Wordle clone using C#

Krirk Srithaweewath -

davidmezzetti profile image

Text to speech generation

David Mezzetti -