创建个人博客

创建个人博客

1.在github上创建仓库

 

 

至此，仓库创建成功.

---

在gitee上创建仓库

 

 

2.将仓库克隆到本地

git clone 仓库地址     (使用ssh)

 

 

3.进入vuepress-theme-reco网站

3.1安装vuepress-theme-reco这个主题，

npx
​
npx @vuepress-reco/theme-cli init
npm
​
# 初始化
npm install @vuepress-reco/theme-cli -g
theme-cli init
yarn
​
# 初始化
yarn global add @vuepress-reco/theme-cli
theme-cli init

在这里我执行的是第三个

 

 

会显示下面这些，大家根据自己的博客信息进行填写就可以

 

至此，这个主题就安装完成了

3.2根据1.0文档了解博客的配置信息，并根据个人需要进行配置

3.3 安装插件并配置

3.3.1 安装，看板娘

上图看

 

插件的下载

如果你有一个已经发布在 npm 的喜欢的插件，你可以使用以下命令来下载并安装它

yarn add <pagkageName> -D
# or
npm i <packageName> -D

注意

这里的包名需要全称，并不能省略 vuepress-plugin-

例：

 

安装好之后，在package.json中会显示这种依赖，

 

，这便代表安装完成了，接下来就是配置了，

再回到文档中

 

根据文档内容，自行配置即可

下面是我的配置

 

3.4配置README.md

---
home: true
heroText: 前端小白熊
bgImage: '/baixiong.png'
bgImageStyle: {
  width:'auto',
  height: '450px',
}
isShowTitleInHome: false
actionText: Guide
actionLink: /views/other/guide
---

好了，基本就完成了，现在，咋们先在本地试试看

打开终端，输入yarn dev进行本地调试，经过调试 发现本地没有问题，然后准备推送到gitee,

推送到gitee

1.配置base

.vuepress/config.js
​
​
module.exports = {
 base:'/blog/',
}

2.使用yarn build 打包,成功之后会在根目录下生成一个public文件夹

3.每次推送都要add commit很麻烦，我们写一个.sh脚本，然后每次执行这个脚本

#!/usr/bin/env sh
​
# 确保脚本抛出遇到的错误
set -e
​
# 生成静态文件
# npm run docs:build
​
# 进入生成的文件夹
cd ./public
​
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
​
git init
git add -A
git commit -m 'deploy'
​
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
​
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@gitee.com:xxxx/xxxx.git master:gh-pages
​
cd -

好了，我们双击这个脚本开始运行。再返回gitee,刷新，然后进入gh-pages分支

 

 

点击服务，进如圈中项

 

 

点击启动，你的项目就挂载到gitee上了

好了完成了