Skip to content

VuePress + Obsidian + Oss 搭建个人博客

约 654 字大约 2 分钟

部署方案

2024-10-17

一、本地 Windows

1. 安装 git

Git - Downloading Package (git-scm.com)

2. 安装 Node.js

Node.js — 在任何地方运行 JavaScript (nodejs.org)

3. npm 加速

npm config set registry https://registry.npmmirror.com

4. 安装 pnpm

npm i -g pnpm

5. 安装 VuePress 和 Plume 主题

pnpm create vuepress-theme-plume@latest

6. 博客初始化

docs/README.md

---
pageLayout: home
externalLinkIcon: false
config:
  -
    type: hero
    full: true
    background: tint-plate
    hero:
      name: 遇事不决可问春风
      // tagline: xx
      text: 心中一点浩然气何处不是倒悬山
      actions:
        -
          theme: brand
          text: 博客
          link: /blog/
        -
          theme: alt
          text: Github
          link: https://github.com/ddowobb-bubu
---

docs/.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'
import { navbar } from './navbar'
import { notes } from './notes'

/**
 * @see https://theme-plume.vuejs.press/config/basic/
 */
export default defineThemeConfig({
  logo: 'https://theme-plume.vuejs.press/plume.png',

  appearance: true,  // 配置 深色模式

  // social: [
  //   { icon: 'github', link: '/' },
  // ],
  // navbarSocialInclude: ['github'], // 允许显示在导航栏的 social 社交链接
  // aside: true, // 页内侧边栏, 默认显示在右侧
  // outline: [2, 3], // 页内大纲, 默认显示 h2, h3

  /**
   * 文章版权信息
   * @see https://theme-plume.vuejs.press/guide/features/copyright/
   */
  // copyright: true,

  // prevPage: true,   // 是否启用上一页链接
  // nextPage: true,   // 是否启用下一页链接
  // createTime: true, // 是否显示文章创建时间

  /* 站点页脚 */
   footer: {
     message: 'Power by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a>',
     copyright: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2024076127号-1</a>',
   },

  /**
   * @see https://theme-plume.vuejs.press/config/basic/#profile
   */
  profile: {
    avatar: 'https://theme-plume.vuejs.press/plume.png',
    name: '布丁困困',
    description: '',
    // circle: true,
    // location: '',
    // organization: '',
  },

  navbar,
  notes,

  /**
   * 公告板
   * @see https://theme-plume.vuejs.press/guide/features/bulletin/
   */
  // bulletin: {
  //   layout: 'top-right',
  //   contentType: 'markdown',
  //   title: '公告板标题',
  //   content: '公告板内容',
  // },

  /* 过渡动画 @see https://theme-plume.vuejs.press/config/basic/#transition */
  // transition: {
  //   page: true,        // 启用 页面间跳转过渡动画
  //   postList: true,    // 启用 博客文章列表过渡动画
  //   appearance: 'fade',  // 启用 深色模式切换过渡动画, 或配置过渡动画类型
  // },

})

配置笔记列表

docs/.vuepress/navbar.ts
import { defineNavbarConfig } from 'vuepress-theme-plume'

export const navbar = defineNavbarConfig([
  { text: '首页', link: '/' },
  { text: '博客', link: '/blog/' },
  { text: '标签', link: '/blog/tags/' },
  { text: '归档', link: '/blog/archives/' },
  {
    text: '笔记',
    items: [
	    { text: 'python', link: '/notes/python/README.md' },
	    { text: '测试', link: '/notes/test/README.md' },
	    ]
  },
])
docs/.vuepress/notes.ts
import { defineNoteConfig, defineNotesConfig } from 'vuepress-theme-plume'

const python = defineNoteConfig({
  dir: 'python',
  link: '/python',
  sidebar: 'auto',
})

const test = defineNoteConfig({
  dir: 'test',
  link: '/test',
  sidebar: 'auto',
})

export const notes = defineNotesConfig({
  dir: 'notes',
  link: '/',
  notes: [ python, test ],
})

7. 编译发布

pnpm run docs:build

二、云上 OSS

数据管理 → 静态页面 配置

配置项配置
默认首页index.html
子目录首页已开通
文件 404 规则Index
默认 404 页404.html
错误文档响应码404

三、obsidian

1. 仓库配置为 docs 目录

2. 图片相关配置

3. 同步插件 Remotely Save