This content originally appeared on DEV Community and was authored by Sam Zhang
What is Blogue?
Blogue is a light-weight blogging site for Vue.js.
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: Blogue.
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 Blogue
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 Blogue open source. And that's why this post appeared.
Of course, Blogue 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 Blogue more customizable in the future.
How to use Blogue?
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 Blogue 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!
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": "Blogue: 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: Blogue.", // 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.
Publish your blog
If this is the first time you publish your blog, you need to install Blogue dependencies first.
Run yarn (or npm install for npm) to install Blogue dependencies.
Currently, Blogue 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 Blogue.
After building, the /dist directory contains the build assets for your blog (HTML, CSS, JavaScript, etc).
Last words
Please star or fork Blogue on GitHub to support me!
As always, feel free to report issues and open a PR to help the development!
This content originally appeared on DEV Community and was authored by Sam Zhang
Sam Zhang | Sciencx (2021-10-07T08:50:45+00:00) Blogue: A blogging site for Vue. Retrieved from https://www.scien.cx/2021/10/07/blogue-a-blogging-site-for-vue/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.