返回

免费搭建个人博客，轻松拥有在线空间！

前端

选择合适的工具和技术栈

构建一个个人博客网站，并不需要复杂的服务器管理和高昂的成本。使用Github Issues和Nuxt.js框架，可以实现一个简单、优雅且无需额外存储的博客平台。这种方法充分利用了开源社区的力量，以及现代前端框架的便捷性。

使用 Github Issue 存储内容

利用GitHub提供的Issues功能作为数据源来存储文章内容，这不仅免费，而且还能借助GitHub强大的版本控制和协作能力。开发者可以将每一篇文章作为一个Issue创建，并通过标签等方式分类管理。

创建 Issues 的步骤：

  1. 访问你的GitHub仓库页面。
  2. 点击“Issues”选项卡，然后点击右上角的“New Issue”按钮。
  3. 填写标题和内容，在内容中可以使用Markdown格式来丰富文章样式。
  4. 按需添加标签进行分类。

示例代码（创建Issue）：

curl -X POST https://api.github.com/repos/username/repo/issues \
-d '{"title":"Sample Article", "body":"Here is the body of the article written in Markdown.", "labels":["blog"]}' \
-u username:token

利用 Nuxt3 构建博客前端

Nuxt.js，特别是其最新版本Nuxt 3，提供了易于使用的Vue框架结构，支持SSR（服务器端渲染），使得构建一个快速响应的网站变得简单。通过接入GitHub API获取Issue数据，可以实时展示最新文章。

配置 Nuxt3 项目

首先需要安装Nuxt.js，并设置项目基本配置文件nuxt.config.ts。

示例代码（初始化Nuxt3项目）：

npm create nuxt@latest my-blogsite
cd my-blogsite
npm install

配置 nuxt.config.ts：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      githubToken: process.env.GITHUB_TOKEN || 'your-github-token'
    }
  },
  modules: [
    '@nuxtjs/axios',
  ],
})

获取并展示Issue数据

利用Axios模块通过GitHub API获取Issues内容，并在Vue组件中渲染。确保API请求携带有效的认证信息。

示例代码（使用Axios获取Issue列表）：

export default {
  data() {
    return { articles: [] };
  },
  async mounted() {
    const response = await this.$axios.get(
      `https://api.github.com/repos/username/repo/issues?labels=blog&state=open`,
      {
        headers: {
          Authorization: `Bearer ${process.env.GITHUB_TOKEN}`
        }
      }
    );
    this.articles = response.data;
  }
};

安全建议与注意事项

  • API请求安全：确保GitHub Token存储在环境变量中，避免硬编码于源代码。
  • 数据加密传输：所有敏感操作如认证等应使用HTTPS进行。
  • 内容审查：虽然依赖GitHub Issues作为内容源简化了管理流程，但要注意定期检查和维护发布的内容。

总结

通过结合Github Issue与Nuxt.js技术栈搭建个人博客不仅成本低廉且实现快捷。这为众多开发者提供了一个展示个人作品、分享知识的平台。希望这些步骤能够帮助到需要创建在线空间的朋友。

相关资源链接：