VueBlogger: A blogging site generator for Vue
Tags: javascript, vue, opensource, hacktoberfest
Published: 2021-10-07 08:50:45

## What is VueBlogger?

VueBlogger is a light-weight blogging site generator for Vue.js, built for geeks who wanted to write their blog site in Vue and write posts in Markdown.

I developed it for a reason: there isn't really a simple blogging tool for Vue. VuePress works, but it's to complicated. So for that purpose, I developed this light-weight blogging site for Vue: VueBlogger.

You can host it on any server that has Nodejs and Vue installed. Actually, you even don't need them if you already built your blog on your own laptop: just host the HTML and JavaScript files directly!

### Behind VueBlogger

At first, I just wanted to build a lightweight blog for myself. However, I found that if I publish the source code and write a tutorial on how to use it, developers can spend less time on building the blog but more time writing the posts.

So I decided to make VueBlogger open source. And that's why this post appeared.

Of course, VueBlogger is not quite complete: there might be bugs, and the UI might not work properly. However, from my own usage, there aren't any issues till now. I will try to add some more features and make VueBlogger more customizable in the future.

## How to use VueBlogger?

*Note: Make sure you have [Node.js](https://nodejs.org/) and [Vue 2](https://vuejs.org/) installed before continuing.*

### Configuration

You need to config your blog before using.

#### General Configuration

Write your configuration for the entire blog in `/posts/data/config.json`. For example:

```json
{
    "config": {
        "username": "Your username",
        "avatarPath": "Your avatar image url",
        "description": "Your blog description",
        "name": "Your name",
        "blogTitle": "Your blog title",
        "blogStartYear": 2019  // The year your blog started. Used to generate the copyrights in the footer.
    },
    "contacts": [
        {
            "name": "Contact method",
            "value": "Contact information, such as your email address",
            "link": "Contact link, such as `mailto:email@example.com`"
        }
    ]
}
```

***Please fill in all information above, or VueBlogger might crash.***

#### Projects Configuration

First, provide a list of your projects needed to be shown on your blog. Configure them in `/posts/data/projects.json`. E.g.:

```json
{
    "projects": [
        {
            "name": "Project name",
            "des": "Project description",
            "img": "Project cover image url",
            "link": "Project homepage url",
            "github": "Project GitHub url"
        }
    ]
}
```

Also, please fill in all information above.

Then, please create a file called `project-des.md` under `/posts/data/`. In this markdown file, you can write some text which will be shown in the projects page above the projects. For example:

```markdown
Below are my personal projects made in my free time.
```

You can write in MarkDown format.

#### About Yourself Configuration

You needed to provide a MarkDown file to display on the `about` page. Write something about your self in the Markdown file `/posts/data/about.md`.

Feel free to use Markdown!

#### Link Exchanges Configuration

Sometimes you wanted to share your blog with your friends, and your friends wanted to share his/her's too. With VueBlogger, you can easily add a link to your friends' blogs. Add the file `/posts/data/links.json`. The link format is as follows:

```json
{
    "links": [
        {
            "title": "Website title",
            "desc": "Website description",
            "link": "Website link"
        }
    ]
}
```

***Note: if you don't want to add any links, simpily create the file and set `links` as an empty list.***

### Writing Posts

You can write your posts in Markdown format, under `/posts/`. The file structure of `/posts/` is as follows:

```plaintext
posts                             
├─ data                           
│  ├─ about.md                    
│  ├─ config.json                 
│  ├─ posts.json                  
│  ├─ project-des.md              
│  └─ projects.json               
├─ post-1-title.md                      
├─ post-2-title.md              
├─ post-3-title.md                  
└─ post-4-title.md  
```

Yes, you need to do one more configuration on the posts: `/posts/data/posts.json`. Write down the posts you wanted to display on the blog and provide some information about it. Such as:

```json
{
    "posts": [
        {
            "title": "VueBlogger: A simple blogging site for Vue",  // Post title
            "tags": ["Vue.js", "project", "frontend"],  // Post tags
            "cover": "https://dev-to-uploads.s3.amazonaws.com/i/95lvt23xz4ozer5byomi.png",  // Post cover image url
            "des": "There isn't really a simple blogging tool for Vue. VuePress works, but it's to complicated. So for that purpose, I developed this light-weight blogging site for Vue: VueBlogger.",  // Post description
            "date": [  // Post publish date
                2021,  // Year
                10,  // Month
                6  // Day
            ],
            "id": "blogue"  // Post file name stored under `/posts/`
        }
    ]
}
```

Note that the `id` of a post is its **filename**, **NOT** its title. Wrong configuration can led to a 404 response for a mis-configured post. Be sure to check the configuration!

So, every time you wanted to publish a post, you need to add it to the configuration file. Otherwise, it won't show up at all in your blog.

### Publishing your blog

If this is the first time you publish your blog, you need to install VueBlogger dependencies first.

Run `yarn` (or `npm install` for `npm`) to install VueBlogger dependencies.

Currently, VueBlogger supports only GitHub pages to publish automatically. You need to build and publish your site manually if you wanted to host on other platforms.

First, create a repository named `<your-github-username>.github.io`, replacing `<your-github-username>` with your real GitHub username.

Then, run `source publish.sh` to build and publish your blog to GitHub pages. After running this script, your blog should be live on `<your-github-username>.github.io` in a few minutes.

### Running your blog locally

Use `yarn serve` (or `npm run serve` if you're using `npm`) to start a hot-reloading development server on `localhost:8080`.

### Building your blog manually

If you're not using GitHub Pages as your hosting provider, you'll need to build your site manually.

Run `yarn build` (or `npm run build` for `npm`) to build VueBlogger.

After building, the `/dist` directory contains the build assets for your blog (HTML, CSS, JavaScript, etc).

## Last words

Please star or fork [VueBlogger](https://github.com/samzhangjy/VueBlogger) on GitHub to support me!

As always, feel free to report issues and open a PR to help the development!