Gitee+VuePress搭建个人博客
#
重点:不需要服务器,不需要域名,不要一分钱,白嫖使我快乐哈哈哈哈哈哈
首先说一下环境要求,既然是Gitee部署的话,Gitee的账号我们得有哈,Node环境咱也得有哈,最好是能有yarn的。这里就不过多的介绍Node和安装啦,比较简单。Git的基本操作咱也得会哈。
顺便说下Yarn的下载地址https://yarnpkg.com/latest.msi
安装完之后yarn --version检测一下是否安装成功,当然你直接用npm也是可以的。
说不多说,咱们直接开整。
如果是初次安装Node的同学还得配置一下淘宝镜像,毕竟外网访问实在是太慢了哈
持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 第一步、克隆
https://gitee.com/vuepress-reco/vuepress-theme-reco?_from=gitee_search在gitee页面中克隆一份VuePress-themo-reco,这里就有人会疑惑了,咱们不是整VuePress吗,怎么克隆一份VuePress-themo-reco,VuePress-themo-reco是基于VuePress开发一款博客主题,我个人就是用的这个博客主题,感觉还蛮好的。怕有人不想打开网站克隆我这里直接给出git的命令啦~。
git clone https://gitee.com/vuepress-reco/vuepress-theme-reco.git
使用npm的同学
# init
npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog
# install
cd my-blog
npm install
# run
npm run dev
# build
npm run build
使用yarn的同学
# init
yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog
# install
cd my-blog
yarn install
# run
yarn dev
# build
yarn build
启动之后的访问localhost:8080
ok,第一步已经完成啦。
# 第二步、在Gitee中新建一个仓库
# 第三步、创建本地仓库连接远程仓库
一、Git的配置
git config --global user.name "yourname"
git config --global user.email "your_email@youremail.com"
这里建议直接配置密钥,免得推送要输入账号密码麻烦
cd ~/.ssh
如果.ssh文件夹不存在,执行指令自动创建 mkdir ~/.ssh(我已经创建了,所以不用使用这个命令)
生成RSA密钥对
ssh-keygen -t rsa -C "你的邮箱@xxx.com"
查看公钥内容
cat ~/.ssh/id_rsa.pub
将公钥内容(全部)复制并粘贴(注意:公钥内容以ssh-rsa开头)
添加公钥完成后进行测试公钥(测试SSH链接)
- ssh -T git@gitee.com
- 当终端提示welcome to Gitee.com,yourname!表示链接成功
如果上面操作出现问题,最简单的办法就是clone一下你的项目到本地,然后把my-blog文件夹下的文件拷贝到你clone下来的项目里面
git status
git add .
git commit -m"提交代码"
git push
这样应该不会出问题了。
# 第四步、部署
下述的指南基于以下条件:
- 文档放置在项目的
public
目录中; - VuePress 以本地依赖的形式被安装到你的项目中,并且配置了如下的 npm scripts:
{
"scripts": {
"dev": "vuepress dev .",
"build": "vuepress build .",
"deploy": "./deploy.sh"
}
}
Gitee Pages
- 在
docs/.vuepress/config.js
中设置正确的base
。 如果你打算发布到https://<USERNAME>.gitee.io/
,则可以省略这一步,因为base
默认即是"/"
。 如果你打算发布到https://<USERNAME>.gitee.io/<REPO>/
(也就是说你的仓库在https://github.com/<USERNAME>/<REPO>
),则将base
设置为"/<REPO>/"
。 - 在你的项目中,创建一个如下的
deploy.sh
文件(请自行判断去掉高亮行的注释):
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
yarn build
# 进入生成的文件夹
cd public
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@githee.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
然后运行
yarn deploy
1
点击发布,然后就部署成功啦!
- 2018年前端技术趋势预览
- SQL SERVER 内存分配及常见内存问题 简介
- 深入浅出事件流处理NEsper(一)
- 微软官方提供的用于监控MS SQL Server运行状况的工具及SQL语句
- 生成人工智能:创意专家新的强大工具
- JavaScript能做什么?
- SQL中利用DMV进行数据库性能分析
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建
- 独家!万达网科大裁员后将转型AI 朱战备或接班曲德君
- Git分支管理的策略梳理
- 数据场景分析 线上线下商家到底谁能干过谁?
- 张钦坤:云计算、开放平台与服务商版权责任
- biztalk 2010 dev版安装小记
- 微信小程序如何获取组件实际高度
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring源码学习笔记(7)——使用@Import导入组件
- 深度强化学习(DQN-Deep Q Network)之应用-Flappy Bird
- Could not load driverClass ${jdbc.driver}
- Js通过值获取索引下标
- Spring源码学习笔记(8)——Bean的生命周期
- hibernate系列之一
- Flutter定义tabbar底部导航路由跳转
- hibernate系列之二
- Flutter配置路由组件抽离及页面传参
- Spring源码学习笔记(9)——AOP
- spring笔记二
- spring中的AOP
- hibernate对单表的增删改查
- hibernate多表查询
- log4j的常用使用方法