Elucidator blog starter

Blog starter build with Vue 3 + Vite + Typescript

Introduction

Elucidator blog starter is a starter blog built with Vuejs 3, Vite, and Typescript. You can create publish your post just with markdown file. This starter has so many features for develop your own blog and it's fast ⚡. If you have some experience in vuejs and want to create a personal blog, you can use this starter for create your own blog. If you get bored with this design, you can create your own design. Not to forget, this css framework blog starter was built with WindiCSS (Next generation utility-first CSS framework).

Features

Elucidator blog starter has several features such as:

Utilities Vue Composition API using Vueuse
Document head manager for Vue 3 Vueuse head
Next generation utility first CSS framework using WindiCSS
Style with SCSS
File system based route generator using Vite Plugin Pages
Auto importing component using Unplugin Vue Components
Markdown with Vue for Vite using Vite Plugin Md
Access thousands icons as Vue component in Vite using Unplugin Icons
Progress bar like youtube, github, etc using Nprogress
Code syntax highlighter using Prismjs
Comment the article using Vue Disqus
Share your article using Vue Social Sharing
Auto importing several package using Unplugin Auto Import
Typescript support :D
Dark mode support :D

Components

In this blog starter, we have several components to easier own your blog, and if you have an idea to add some components, you can make a pull request in this repository on github.

Articles Component
Latest Component
Share Component
Tag Component
To Top Button
Pagination

Comment System

Since this starter use disqus for comment system, first you should get the shortname, you can get the shortname from the official website disqus and if you have the shortname, make sure you have to fill the value in the .env file. For more detail, you can read the documentation from Vue Disqus.

Usage and Installation

Development

I used pnpm for the package manager, you can adjust with your favorite package manager.

pnpm dev

Build

pnpm build

After finish the build process, you will see dist folder successfully generated.

Install with degit

You can install this starter with degit.

pnpm i -g degit

degit satyawikananda/elucidator-blog-starter your-project-name

Working with Docker

Prerequisites

Docker Desktop

You can follow the installation instructions here https://docs.docker.com/desktop/

Run app on docker

Build container

docker-compose up -d

Open your browser and go to

http://localhost:3000

If you want to change the port, see instructions here

Edit manually Dockerfile at line 32
EXPOSE 3000
Rebuild container with command
docker-compose up --build

Done, try it!

About The Name

Elucidator is a kirito's sword from the anime Sword Art Online(SAO), and I like that anime, therefore i named this template with Elucidator :D.

Contributing

Want this project make better? you can contributing in this project to, contribution are welcome :D

License

Code licensed under MIT License.

Credit

This starter was heavily inspired by Anthony Fu's Vitesse.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{I Gusti Ngurah Satya Wikananda}
💻 📖 🎨 🤔 🚧

_{Ahmad Saugi}
💻

_{Iwan firmawan}
💻 📖 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

shawn-yee/vue-windicss