澳银投资 發表於 2023-7-16 22:38:00

基于VuePress+gitee搭建个人博客

<h1 id="搭建步骤">搭建步骤</h1>
<ul>
<li><strong>步骤 1</strong>: 创建并进入一个新目录</li>
</ul>
<pre><code class="language-shell">mkdir my-blog
cd my-blog
</code></pre>
<ul>
<li><strong>步骤 2</strong>: 初始化项目</li>
</ul>
<pre><code class="language-shell">git init
pnpm init
</code></pre>
<ul>
<li><strong>步骤 3</strong>: 将 VuePress 安装为本地依赖</li>
</ul>
<pre><code class="language-shell">pnpm add -D vuepress@next @vuepress/client@next vue
</code></pre>
<ul>
<li><strong>步骤 4</strong>: 在 <code>package.json</code> 中添加一些 scripts在新窗口打开</li>
</ul>
<pre><code class="language-json">{
"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
}
}
</code></pre>
<ul>
<li><strong>步骤 5</strong>: 将默认的临时目录和缓存目录添加到 <code>.gitignore</code> 文件中</li>
</ul>
<pre><code class="language-shell">echo 'node_modules' &gt;&gt; .gitignore
echo '.temp' &gt;&gt; .gitignore
echo '.cache' &gt;&gt; .gitignore
</code></pre>
<ul>
<li><strong>步骤 6</strong>: 创建你的第一篇文档</li>
</ul>
<pre><code class="language-shell">mkdir docs
echo '# Hello VuePress' &gt; docs/README.md
</code></pre>
<ul>
<li><strong>步骤 7</strong>: 在本地启动服务器来开发你的文档网站</li>
</ul>
<pre><code>pnpm docs:dev
</code></pre>
<p>VuePress 会在 http://localhost:8080在新窗口打开 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。</p>
<h1 id="目录结构">目录结构</h1>
<pre><code>.
├── docs
│   ├── .vuepress (可选,用于存放全局的配置、组件、静态资源等)
│   │   ├── components (可选,该目录中的 Vue 组件将会被自动注册为全局组件)
│   │   ├── theme (可选,用于存放本地主题)
│   │   │   └── Layout.vue
│   │   ├── public (存放一些公共样式，比如网站图标和头像，当然，也可以直接将图片放入图床)
|   |   ├── dist(这里存放打包好的文件，最后我们将打包好的文件上传到服务器就行)
│   │   ├── styles (这里放一些自定义样式，在这里我们可以修改主题色)
│   │   │   ├── index.styl(将会被自动应用的全局样式文件，会生成在最终的CSS文件结尾，具有比默认样式更高的优先级)
│   │   │   └── palette.styl (用于重写默认颜色常量，或者设置新的 stylus 颜色常量)
│   │   ├── templates (可选的, 谨慎配置, 存储 HTML 模板文件)
│   │   │   ├── dev.html（用于开发环境的 HTML 模板文件）
│   │   │   └── ssr.html（构建时基于 Vue SSR 的 HTML 模板文件）
│   │   ├── config.js (这里是博客的一些配置，导航栏、侧边栏、下载的插件都在这里配置)
│   │   └── enhanceApp.js (可选，客户端应用的增强)
|   ├── about(一个存放自己博客的文件夹，我们可以将不同的文章设置不同的文件夹进行分类)
|   |   ├── README.md(每个文件夹都要有一个README.md文件，否则导航栏配置不生效)
|   |   ├── 文章一.md
|   |   ├── 文章二.md
|   ├── javaScript(同上)
|   |   ├── README.md
│   └── README.md(这个md文档是首页的配置)
│
└── package.json（项目初始化时，根目录下自动生成的配置文件,定义了项目的基本配置信息及需要依赖的各个模块、指定运行脚本命令的npm命令行缩写等）
</code></pre>
<blockquote>
<p>总结：</p>
<ul>
<li>
<p>我们的配置都在 .vuepress文件夹下进行，只有首页的README.md与 .vuepress文件夹同级</p>
</li>
<li>
<p>.vuepress文件夹下 config.js 是主要的配置</p>
</li>
<li>
<p>我们自己的文章目录与 .vuepress文件夹同级</p>
</li>
<li>
<p>每个文章的文件夹下都要有一份 README.md文件，否则导航栏配置不生效</p>
</li>
</ul>
</blockquote>
<h2 id="首页">首页</h2>
<p>默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。想要使用它，需要在你的根级 README.md 的 YAML front matter 指定 home: true。首页文档参考，以下是一个如何使用的例子：</p>
<pre><code>---
home: true
heroText: 一个小白分享各类资源的地方
tagline: 公众号：柳小白
actions:
- text: 快速上手
    link: /catalog1/README1.md
    type: primary
- text: 项目简介
    link: /catalog2/
    type: secondary
features:
- title: 个人介绍
    details: 详情待确定中
- title: 学习笔记
    details: 详情待确定中
- title: 技术博客
    details: 详情待确定中
footer:初入小白 | 还望各位大佬不吝赐教
---
</code></pre>
<p>你可以将相应的内容设置为 null 来禁用标题和副标题。</p>
<p>任何 YAML front matter 之后额外的内容将会以普通的 markdown 被渲染，并插入到 features 的后面。</p>
<h2 id="导航栏title">导航栏Title</h2>
<pre><code class="language-json">export default {
title:"柳小白",
}
</code></pre>
<h2 id="导航栏logo">导航栏Logo</h2>
<p>你可以配置默认主题模式，增加导航栏 Logo ，Logo 可以被放置在公共文件目录：</p>
<pre><code class="language-json">// .vuepress/config.js
import { defaultTheme } from 'vuepress'
export default {
theme: defaultTheme({
    // Public 文件路径
    logo: '/images/hero.png',
    // URL
    logo: 'https://vuejs.org/images/logo.png',
}),
}
</code></pre>
<h2 id="导航栏配置">导航栏配置</h2>
<p>为了配置导航栏元素，你可以将其设置为 <em>导航栏数组</em> ，其中的每个元素是 <code>NavbarItem</code> 对象、 <code>NavbarGroup</code> 对象、或者字符串：</p>
<ul>
<li><code>NavbarItem</code> 对象应该有一个 <code>text</code> 字段和一个 <code>link</code> 字段，还有一个可选的 <code>activeMatch</code> 字段。</li>
<li><code>NavbarGroup</code> 对象应该有一个 <code>text</code> 字段和一个 <code>children</code> 字段。 <code>children</code> 字段同样是一个 <em>导航栏数组</em> 。</li>
<li>字符串应为目标页面文件的路径。它将会被转换为 <code>NavbarItem</code> 对象，将页面标题作为 <code>text</code> ，将页面路由路径作为 <code>link</code> 。</li>
</ul>
<pre><code class="language-json">export default {
theme: defaultTheme({
    navbar: [
      // NavbarItem
      {
      text: 'Foo',
      link: '/foo/',
      },
      // NavbarGroup
      {
      text: 'Group',
      children: ['/group/foo.md', '/group/bar.md'],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
}),
}
</code></pre>
<pre><code class="language-json">export default {
theme: defaultTheme({
    navbar: [
      // 嵌套 Group - 最大深度为 2
      {
      text: 'Group',
      children: [
          {
            text: 'SubGroup',
            children: ['/group/sub/foo.md', '/group/sub/bar.md'],
          },
      ],
      },
      // 控制元素何时被激活
      {
      text: 'Group 2',
      children: [
          {
            text: 'Always active',
            link: '/',
            // 该元素将一直处于激活状态
            activeMatch: '/',
          },
          {
            text: 'Active on /foo/',
            link: '/not-foo/',
            // 该元素在当前路由路径是 /foo/ 开头时激活
            // 支持正则表达式
            activeMatch: '^/foo/',
          },
      ],
      },
    ],
}),
}
</code></pre>
<h2 id="侧边栏配置">侧边栏配置</h2>
<ul>
<li>
<p>你可以通过页面的 sidebar frontmatter 来覆盖这个全局配置。</p>
<p>设置为 <code>false</code> 可以禁用侧边栏。</p>
<p>如果你设置为 <code>'auto'</code>，侧边栏会根据页面标题自动生成。</p>
<p>为了手动配置侧边栏元素，你可以将其设置为 <em>侧边栏数组</em> ，其中的每个元素是一个 <code>SidebarItem</code> 对象或者一个字符串：</p>
<ul>
<li><code>SidebarItem</code> 对象应该有一个 <code>text</code> 字段，有一个可选的 <code>link</code> 字段、一个可选的 <code>children</code> 字段和一个可选的 <code>collapsible</code> 字段。 <code>children</code> 字段同样是一个 <em>侧边栏数组</em> 。 <code>collapsible</code> 字段来控制它是否可折叠。</li>
<li>字符串应为目标页面文件的路径。它将会被转换为 <code>SidebarItem</code> 对象，将页面标题作为 <code>text</code> ，将页面路由路径作为 <code>link</code> ，并根据页面小标题自动生成 <code>children</code> 。</li>
</ul>
<p>如果你想在不同子路径中使用不同的侧边栏，你可以将该配置项设置为 <em>侧边栏对象</em> ：</p>
<ul>
<li>Key 为路径前缀。</li>
<li>Value 为 <em>侧边栏数组</em> 。</li>
</ul>
</li>
</ul>
<pre><code class="language-json">// .vuepress/config.js
export default {
theme: defaultTheme({
    // 侧边栏数组
    // 所有页面会使用相同的侧边栏
    sidebar: [
      // SidebarItem
      {
      text: 'Foo',
      link: '/foo/',
      children: [
          // SidebarItem
          {
            text: 'github',
            link: 'https://github.com',
            children: [],
          },
          // 字符串 - 页面文件路径
          '/foo/bar.md',
      ],
      },
      // 字符串 - 页面文件路径
      '/bar/README.md',
    ],
}),
}
</code></pre>
<p><strong>【不同子路径下的页面会使用不同的侧边栏】这种方式最常用</strong></p>
<pre><code class="language-json">// .vuepress/config.js
export default {
theme: defaultTheme({
    // 侧边栏对象
    // 不同子路径下的页面会使用不同的侧边栏
    sidebar: {
      '/guide/': [
      {
          text: 'Guide',
          children: ['/guide/README.md', '/guide/getting-started.md'],
      },
      ],
      '/reference/': [
      {
          text: 'Reference',
          children: ['/reference/cli.md', '/reference/config.md'],
      },
      ],
    },
}),
}
</code></pre>
<pre><code class="language-json">// .vuepress/config.js
export default {
theme: defaultTheme({
    // 可折叠的侧边栏
    sidebar: {
      '/reference/': [
      {
          text: 'VuePress Reference',
          collapsible: true,
          children: ['/reference/cli.md', '/reference/config.md'],
      },
      {
          text: 'Bundlers Reference',
          collapsible: true,
          children: ['/reference/bundler/vite.md', '/reference/bundler/webpack.md'],
      },
      ],
    },
}),
}
</code></pre>
<h2 id="内容搜索">内容搜索</h2>
<p>参考文档</p>
<h1 id="部署到gitee">部署到gitee</h1>
<ol>
<li>
<p>在gitee上面我们新建一个仓库（目前仅支持公开仓库开通Gitee Pages 服务），用于存放我们的博客系统。</p>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202306/2172355-20230618234004242-1005389181.jpg" alt="图1" loading="lazy"></p>
<p>仓库创建成功后如下图</p>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202306/2172355-20230618234004242-1005389181.jpg" alt="图2" loading="lazy"></p>
</li>
<li>
<p>仓库建好后，就需要将我们本地的博客系统推送至仓库。</p>
<ul>
<li>
<p>进入blog目录，打开打开gitbash命令行工具，打包博客，执行命令：</p>
<p>pnpm run docs:build</p>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202306/2172355-20230618234105748-589356811.jpg" alt="图3" loading="lazy"></p>
</li>
<li>
<p>我们可以参考gitee仓库给我们的步骤操作，将代码推送到仓库。</p>
<pre><code># 逐行执行下列命令
cd my-blog
git add .
git commit -m "初始化"
git remote add origin https://gitee.com/bigfairy/my-blog.git
git push -u origin "master"
</code></pre>
</li>
<li>
<p>执行完上面的命令后，我们的代码就推到了仓库中去</p>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202306/2172355-20230618234156947-2046716999.jpg" alt="图4" loading="lazy"></p>
</li>
<li>
<p>在仓库页面点击服务菜单，选择gitpage选项</p>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202306/2172355-20230618234228340-1547780972.jpg" alt="图5" loading="lazy"></p>
</li>
<li>
<p>选择部署分支和部署目录，然后点击启动</p>
<ul>
<li>部署分支，不用改，默认master</li>
<li>部署目录，选择docs/.vuepress/dist文件夹，刚刚我们执行打包命令生成的。</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202307/2172355-20230716221430348-399730687.jpg" alt="图6" loading="lazy"></p>
</li>
<li>
<p>部署好后就会出现一个我们的博客地址了</p>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202307/2172355-20230716221216501-1827879624.jpg" alt="图7" loading="lazy"></p>
<p>如果期望地址不展示仓库名，新建仓库名保持个人空间地址一样即可。</p>
<p>打开之后可能无法读取到静态资源，如下</p>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202307/2172355-20230716221714849-1770439647.jpg" alt="图8" loading="lazy"></p>
<p style="color: rgba(255, 0, 0, 1)">解决办法，配置部署站点的基础路径，如下:</p>
<blockquote>
<ol>
<li>
<p>Gitee Pages网站地址是https://gitee.com/用户名/仓库名称.git</p>
</li>
<li>
<p>我的gitee仓库名是my-blog，路径：docs/.vuepress/，修改config.js配置文件在export default中添加base: '/my-blog/'。</p>
</li>
</ol>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/2172355/202307/2172355-20230716221718755-1487319166.jpg" alt="" loading="lazy"></p>
<p>然后重新构建pnpm run docs:build，推送到gitee部署到gitee pages上去。最终效果如下<br>
<img src="https://img2023.cnblogs.com/blog/2172355/202307/2172355-20230717225746961-1449684393.jpg" alt="" loading="lazy"></p>
</li>
</ul>
</li>
</ol><br><br>
来源：https://www.cnblogs.com/bigfairy/p/17490045.html
頁: [1]
查看完整版本: 基于VuePress+gitee搭建个人博客