Vue3 + Markdown + CI/CD：打造专属免费 GitHub 个人博客

2024-01-05 06:51:27

前言

在当今数字化时代，个人博客已成为分享知识、洞见和与世界建立联系的宝贵平台。如果您正在寻求创建一个高度可定制、功能齐全且易于管理的个人博客，那么本文将为您提供详细的指南，教您如何使用 Vue3、Markdown 和 CI/CD 在 GitHub 上免费搭建一个专属博客。

Vue3：构建高度可定制的博客

Vue3 是一款出色的渐进式 JavaScript 框架，以其灵活性和可扩展性而著称。它允许您轻松构建交互式和可重用的用户界面组件。对于我们的博客，Vue3 将使我们能够完全控制外观和布局，创建出符合我们独特风格和偏好的网站。

Markdown：专注于内容写作

Markdown 是一种轻量级标记语言，可让您使用简单的语法编写格式化的文本。它易于学习且普遍受支持，这使其成为撰写博客文章的理想选择。通过使用 Markdown，您可以专注于内容创作，而无需担心复杂的 HTML 标记或样式。

CI/CD：自动化构建和部署

CI/CD（持续集成/持续交付）是一组实践，可帮助您自动化软件开发和部署流程。通过在每次代码更改时自动构建和部署我们的博客，CI/CD 将节省时间并降低错误风险。

步骤指南

1. 创建 GitHub 仓库

首先，在 GitHub 上创建一个新仓库。这将托管您博客的代码和内容。

2. 设置 Vue3 项目

在仓库中，初始化一个新的 Vue3 项目。您可以使用 Vue CLI 或手动设置项目。

3. 集成 Markdown 支持

安装 Vue-markdown 依赖项，并在您的 Vue 组件中集成它，以启用 Markdown 支持。

4. 设计博客布局

设计博客的布局，包括头部、侧边栏和内容区域。使用 Vue 组件创建可重用的模块，以简化开发。

5. 创建文章模板

创建使用 Markdown 语法的文章模板。包括元数据字段，如标题、作者和发布日期。

6. 设置 CI/CD 管道

使用 GitHub Actions 或其他 CI/CD 平台设置一个管道，以在每次推送代码更改时自动构建和部署您的博客。

7. 部署到 GitHub Pages

GitHub Pages 是一种免费的服务，允许您直接从 GitHub 仓库托管和部署静态网站。将您的博客仓库配置为 GitHub Pages，以将其公开。

示例代码

以下示例代码片段展示了如何使用 Vue3、Markdown 和 GitHub Pages 构建博客：

<template>
  <div>
    <header>我的博客</header>
    <main>
      <article v-markdown="article">
        ## 文章标题
        文章内容...
      </article>
    </main>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import VueMarkdown from 'vue-markdown';

export default defineComponent({
  components: { VueMarkdown },
  data() {
    return {
      article: '',
    };
  },
  created() {
    this.fetchArticle();
  },
  methods: {
    async fetchArticle() {
      const response = await fetch('./article.md');
      this.article = await response.text();
    },
  },
});
</script>