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

1. Docker Desktop

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

Run app on docker

1. Build container

docker-compose up -d

2. Open your browser and go to

http://localhost:3000

3. 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!