VueBlogger：Vue 的博客网站生成器

2025-06-10

VueBlogger：Vue 的博客网站生成器

什么是 VueBlogger？

VueBlogger 是 Vue.js 的轻量级博客网站生成器，专为想要在 Vue 中编写博客网站并在 Markdown 中撰写帖子的极客打造。

我开发它的原因是：Vue 上并没有真正简单的博客工具。VuePress 可以，但太复杂了。因此，我开发了这个轻量级的 Vue 博客网站：VueBlogger。

你可以将它托管在任何安装了 Nodejs 和 Vue 的服务器上。实际上，如果你已经在自己的笔记本电脑上搭建了博客，甚至不需要它们：直接托管 HTML 和 JavaScript 文件即可！

VueBlogger 背后

起初，我只是想为自己搭建一个轻量级的博客。然而，我发现，如果我公开源代码并编写一个使用教程，开发人员就可以减少搭建博客的时间，从而将更多时间投入到撰写文章中。

所以我决定将 VueBlogger 开源。这就是我写这篇文章的原因。

当然，VueBlogger 还不够完善：可能存在一些 bug，UI 也可能无法正常工作。不过，就我个人使用而言，目前还没有遇到任何问题。未来我会尝试添加更多功能，并提升 VueBlogger 的可定制性。

如何使用 VueBlogger？

注意：继续之前请确保已安装Node.js和Vue 2 。

配置

使用前您需要配置您的博客。

常规配置

在 中编写整个博客的配置/posts/data/config.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`"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

请填写以上所有信息，否则 VueBlogger 可能会崩溃。

项目配置

首先，列出你需要在博客上展示的项目。在 中进行配置/posts/data/projects.json。例如：

{
    "projects": [
        {
            "name": "Project name",
            "des": "Project description",
            "img": "Project cover image url",
            "link": "Project homepage url",
            "github": "Project GitHub url"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

另外，请填写以上所有信息。

然后，请创建一个名为project-des.mdunder的文件/posts/data/。在这个 Markdown 文件中，你可以编写一些文本，这些文本将显示在项目页面上方的项目列表中。例如：

Below are my personal projects made in my free time.
Enter fullscreen mode Exit fullscreen mode

你可以用MarkDown格式书写。

关于你自己 配置

您需要提供一个 MarkDown 文件来显示在about页面上。在 Markdown 文件中写一些关于您自己的内容/posts/data/about.md。

随意使用 Markdown！

链接交换配置

有时你想与朋友分享你的博客，而你的朋友也想分享他的博客。使用 VueBlogger，你可以轻松地添加指向朋友博客的链接。添加文件即可/posts/data/links.json。链接格式如下：

{
    "links": [
        {
            "title": "Website title",
            "desc": "Website description",
            "link": "Website link"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

注意：如果您不想添加任何链接，只需创建文件并设置links为空列表。

撰写帖子

您可以使用 Markdown 格式撰写文章，位于/posts/。 的文件结构/posts/如下：

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
Enter fullscreen mode Exit fullscreen mode

是的，您需要对帖子进行另一项配置：/posts/data/posts.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/`
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

请注意，id帖子的 是其文件名，而不是标题。错误的配置可能会导致 404 响应。请务必检查配置！

所以，每次你想发布文章时，都需要将其添加到配置文件中。否则，它根本不会显示在你的博客中。

发布你的博客

如果这是您第一次发布博客，则需要先安装 VueBlogger 依赖项。

运行yarn（或npm install）npm以安装 VueBlogger 依赖项。

目前，VueBlogger 仅支持自动发布 GitHub 页面。如果您想托管在其他平台上，则需要手动构建并发布您的网站。

首先，创建一个名为的存储库<your-github-username>.github.io，<your-github-username>用您的真实 GitHub 用户名替换。

然后，运行source publish.sh构建并发布你的博客到 GitHub 页面。运行此脚本后，你的博客应该会<your-github-username>.github.io在几分钟内上线。

在本地运行你的博客

使用yarn serve（或者npm run serve如果您正在使用npm）在 上启动热重载开发服务器localhost:8080。

手动构建您的博客

如果您没有使用 GitHub Pages 作为托管服务提供商，则需要手动构建您的网站。

运行yarn build（或npm run build）npm来构建 VueBlogger。

构建后，该/dist目录包含您博客的构建资产（HTML、CSS、JavaScript 等）。

最后的话

请在 GitHub 上为VueBlogger加星标或 fork以支持我！

与往常一样，请随时报告问题并打开 PR 来帮助开发！

鏂囩珷鏉ユ簮锛�https://dev.to/samzhangjy/blog-a-blogging-site-for-vue-3p60
Devto 翻译
PREV
面向初学者的 Golang Restful CRUD
NEXT
酒精和开发者文化