基于vuepress开发个人博客并部署github

2023/12/1 vue

# 前沿

# 地址

本人代码仓库:https://github.com/Lihua-cpu/BlockPage

个人博客地址:https://lihua-cpu.github.io/BlockPage/

# 展示效果

pc展示效果

github部署1

app展示效果

# 入门

# 快速开始


快速开始同 VuePress 官网 (opens new window)

npx

# 初始化,并选择 2.x
npx @vuepress-reco/theme-cli init
1
2

npm

# 初始化,并选择 2.x
npm install @vuepress-reco/theme-cli@1.0.7 -g
theme-cli init
1
2
3

yarn

# 初始化,并选择 2.x
yarn global add @vuepress-reco/theme-cli@1.0.7
theme-cli init
1
2
3

# 手动安装

npm install vuepress@next vuepress-theme-reco@next --save-dev

# or
yarn add vuepress@next vuepress-theme-reco@next
// .vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { recoTheme } from 'vuepress-theme-reco'

export default defineUserConfig({
  theme: recoTheme({
    // options
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 部署

# 官方部署

部署gitee、github是可以的,但是gitee部署需要实名认证,github则不需要.

官网:https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages

# 23-12-17目前我的部署

官网有给出多个平台部署到步骤,但是他只是给出大概部署

总结起来的脚本就是:

1、打包——build

2、进入打包的产物,将打包的产物提到另外的分支

3、部署关于这个分支的代码到githubpage上

三个步骤

如果需要到时候写一下关于“提交代码立刻触发这个脚本”的博客

因为没有写流水线打包只能手动打包啦

1、创建分支gh-pages

2、打包build

3、将打包产物提交分支gh-pages

4、开启github的page,然后将服务器指向gh-pages

1、创建分支gh-pages

github部署1

2、打包build

github部署1

3、将打包产物提交分支gh-pages

github部署1

4、开启github的page,然后将服务器指向gh-pages

github部署1

# 参考

# 1、通过iconfont使用图标

https://juejin.cn/post/7242181894116573245
1

# 2、官网

https://vuepress-theme-reco.recoluan.com/
1

# 3、从创建到部署

这个比较全面,但是有不好的就是,他的部署也是看着官方写的,如果不会部署的,直接自己build,然后把产物直接丢到github,然后就是开启github的githubPage,流水线先别写等熟悉再

https://juejin.cn/post/7041134607869149215
1
Last Updated: 2023/12/22 下午4:18:13