VuePress搭建个人博客

VuePress 是一个以 Markdown 为中心的静态网站生成器，一个 VuePress 站点本质上是一个由 Vue在和 Vue Router驱动的单页面应用 (SPA)。路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 markdown-it 编译为 HTML ，然后将其作为 Vue 组件的模板。

在VuePress2.0环境下运行，部署使用的1.x版本方法。

一、 VuePress搭建与配置

1. 创建并进入一个新目录，可手动创建

      mkdir vuepress-starter && cd vuepress-starter
   

2. 进行初始化

     npm init
   

3. 将 VuePress 安装为本地依赖

     npm install -D vuepress@next
   

4. 创建docs目录，并在docs目录下创建README.md文档（默认为站点首页）

   配置内容如下所示：

   ---
   home: true
   heroText: 啦啦啦
   tagline: 今天是个好天气
   actions:
    - text: 快速上手
    link: /learn/
    type: primary
   
   features:
   - title: 简洁至上a
    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
   - title: Vue驱动b
    details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
   - title: 高性能c
    details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
   footer: MIT Licensed | Copyright © 2018-present Evan You
   ---
   

   更多关于首页的配置请参考：VuePress首页配置项

5. 在 package.json 中添加一些 scripts

   {
    "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    }
   }
   

6. 在本地启动服务器

   npm run docs:dev
   

7. 在docs文件夹下创建目录如下

   WnaRYV.png

8. 在.vuepress目录下的config.ts/config.js文件中进行VuePress的配置

   import { defineUserConfig } from 'vuepress'
   import type { DefaultThemeOptions } from 'vuepress'
   
   export default defineUserConfig<DefaultThemeOptions>({
   
    lang: 'zh-CN', // 站点语言
    title: 'Hello World ！', // 站点标题
    description: '这是我的第一个 VuePress 站点', // 站点描述
    base: '/', // 部署站点的基础路径
   
    // 配置当前使用的主题，当前为默认主题
    themeConfig: {
   
    logo: 'https://vuejs.org/images/logo.png', // Logo图片的Url或相对路径，图片将会显示在导航栏的左端
   
    // 导航栏配置，最深两级嵌套
    navbar: [
    // NavbarItem
    {
    text: 'Learn',
    link: '/learn/', // 不指定md文件，默认指向目录下的README.md
    },
    // NavbarGroup
    {
    text: 'Life',
    children: ['/life/life01.md', '/life/life02.md', '/life/life03.md'],  // 不设置text,默认使用文档中的标题
    },
    // 字符串
    '/README.md',
    ],
   
    // 侧边栏，value: false/'auto'/*Array/*Object
    // 侧边栏数组：所有页面会使用相同的侧边栏
    // 侧边栏对象：不同子路径下的页面会使用不同的侧边栏
    sidebar: {
    '/learn/': [
    {
    text: 'Learn',
    children: ['/learn/html.md', '/learn/css.md', '/learn/javascript.md'], // 子路径，默认使用页面标题命名
    },
    ],
    '/life/': [
    {
    text: 'Life',
    children: ['/life/life01.md', '/life/life02.md', '/life/life03.md'],
    },
    ],
    },
    },
   })
   

   更多关于主题的配置请参考：VuePress默认主题配置

9. 启动服务器

---

二、在VuePress中展示Vue组件

1. 在.vuepress下创建components文件夹

   在文件夹中编写组件，目录结构如下图所示：

   WK2NtS.png

2. 在.vuepress目录下创建clientAppEnhance.ts文件

   用于组件全局注册，代码如下图所示：

   import { defineClientAppEnhance } from '@vuepress/client'
   
   // 批量导入组件并进行注册
   // 读取当前文件夹下components文件夹下.vue文件
   const requireComponents = require.context('./components/', false, /\.vue$/)const componentsObj = {}
   requireComponents.keys().forEach((filePath) => {  
    const componentName = filePath.split('/')[1].replace(/\.vue$/, '')
    const componentConfig = requireComponents(filePath)
    componentsObj[componentName] = componentConfig.default || componentConfig
   })
   
   export default defineClientAppEnhance(({ app, router, siteData }) => {
    for (let key in componentsObj) {
    app.component(componentsObj[key].name, componentsObj[key])
    }
   })
   

3. 在md文件中直接引用组件

   <Comp1 />
   

---

三、 VuePress部署

（实际上是将打包的.vuepress/dist文件上传到远程仓库地址）

1. 在github中创建名为<USERNAME>.github.io的远程仓库

   USERNAME表示自己的github用户名，如下图所示：

   Wna6wn.png

2. 在 docs/.vuepress/config.ts 中设置正确的 base

   如果打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。

   如果打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

3. 在项目最外层目录下创建deploy.sh 文件

   如下图所示（将USERNAME修改为自己的github仓库用户名）:

   
   #!/usr/bin/env sh
   
   # 确保脚本抛出遇到的错误
    set -e
   
   # 生成静态文件
   # npm run docs:build
   
   # 进入生成的文件夹
   cd docs/.vuepress/dist
   
   # 如果是发布到自定义域名
   # echo 'www.example.com' > CNAME
   
   git init
   
    # 如果发布到 https://<USERNAME>.github.io
   git remote add origin https://github.com/cloudsTwo/cloudsTwo.github.io
   
   # 如果发布到 https://<USERNAME>.github.io/<REPO>
   # git remote add git@github.com:<USERNAME>/<REPO>.git main
   
   git branch -M main
   git add .
   git commit -m 'steps'
   git push -u origin main
   
   cd -
   

4. 运行deploy.sh文件

   上传到git仓库成功后打开链接 https://<USERNAME>.github.io即可看见编写的markdown文档。

5. 如果deploy.sh文件运行不成功

   使用npm run docs:build命令打包后进入.vuepress/dist文件夹，将文件夹下的内容推送到git远程仓库地址https://github.com/<USERNAME>/<USERNAME>.github.io.git master，稍等几分钟后打开对应网站即可看见更新，如下图所示：
   

   WK3CFO.png
   Wna4lF.png

   关于更多VuePress部署方式请参考：

   VuePress1.x部署

   VuePress2.0部署

---

四、将VuePress发布在io子路径上

步骤基本同第三步，部分修改如下所示（将打包的dist文件发布到子仓库及其gh-pages分支上），未修改部分同上：

1. 在github中创建仓库

   仓库名为需要进入的io子路径名，如下图（此处已提前创建这个仓库）：

   
   image-20210816172002094.png

2. 在.vuepress目录下的config.ts/config.js文件中base配置

   设置base为站点名，如下图所示：

   
   image-20210816172232417.png

3. 重新打包，运行deploy.sh文件，将打包的dist文件夹推送到github仓库主分支上

4. 修改deploy.sh文件

   将git push -f https://github.com/cloudsTwo.github.io.git 的命令修改为git push -f https://github.com/cloudsTwo/vuepress_show_page.git main:gh-pages（个人仓库地址）

5. 运行修改后deploy.sh文件，将打包的dist文件夹推送到github仓库gh-pages分支上

6. 完成后在 GitHub 项目中点击 Setting 按钮，找到 GitHub Pages - Source，点击check it out here

   出现页面如下所示：

   
   image-20210816173107903.png

7. 部署成功，点击链接查看示例：https://cloudstwo.github.io/vuepress_show_page/

参考自：https://www.jianshu.com/p/63f15e298222