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 and Vue 2 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:
{
"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.:
{
"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:
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:
{
"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:
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:
{
"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 on GitHub to support me!
As always, feel free to report issues and open a PR to help the development!
Top comments (14)
This is amazing, thanks for sharing! I will try it out. I'm learning Vue, so it will be useful to read the code too. Will give it a sweet star.
可以的很强，我去看看。
Blogue looks pretty nice to me! :D
Thanks! :D
'Blogue' - presumably pronounced like 'Vogue' or 'Rogue'?
Uh.. To be honest, I don't know the exact pronunciation.... I call it as "blog-u"... (I made this word up by combining "Blog" and "Vue"...)
Yeah, I thought that was where the name probably came from. Unfortunately, most native English speakers will most likely read that with a pronunciation like "Vogue" - if you want "blog-u" then the spelling "Bloggue" would be a better choice (although it's admittedly a little ugly)
Oops... Thanks for pointing this out! Yeah, I'm not a native English speaker and my English is... pretty poor. I will change the name for this little project later... Although I think I might completely change to another name xD
However, thanks for pointing this issue out!
Thanks for sharing this
You're welcome!
Does it come with SEO? And can you label the project as Hacktoberfest ?
Unfortunately, no... Maybe I will add SEO in the future.
Sure.
Blogue sounds to me like France! A really amazing name, Sam!
xD But I changed the name due to @jonrandy 's comment (pronunciation issue)... Hope you like the new name too!