从零搭建你的博客网站 vuepress+vercel+github

搭建静态博客网站

常见的静态网站的模板有很多wordpress,vuepress等等,这里使用的是vuepress模板

1.下载修改vuepress模板

vuepress-theme-reco官网

我这里是在github上下载的demo模板,直接在它的基础进行修改
在这里插入图片描述

下载地址

下载好之后解压,如果你想要本地运行那么你需要nodejs,我这里使用的是node14.6.0

然后输入以下命令

//安装依赖包
npm install / yarn install 
//运行项目
npm run dev

包管理工具有npm,cnpm,yarn,自带的是npm

修改的配置

需要修改的地方只有几个
README.md可以修改一些主页的属性
.vuepress下的config.js 可以修改一些全局配置
在我们就可以写博客在blogs下
docs下的需要在config.js下配置路径
在这里插入图片描述
config.js中的侧边栏 参考vuepress
在这里插入图片描述

2.上传修改好的模板上传到github

github创建好仓库之后 用git上传就可以了

//首先添加公钥
git init //初始化本地仓库
git add . //添加文件到工作区
git commit -m '' //提交到本地仓库
git remote add origin 'url'
//拉一下合并本地分支
git pull origin master --allow-unrelated-histories   //完成时会进入一个文件,直接:wq保存退出即可 需要合并一下仓库

//之后才可以上传push
git push origin master

//强制覆盖远程仓库
git push -f --set-upstream origin master:master

3.部署构建代码到vercel

vercel官网
直接用GitHub账号登录

vercel 创建新项目
在这里插入图片描述
选择需要导入的库
仓库名
配置默认即可
在这里插入图片描述

在这里插入图片描述
domains那个就给的域名 https://2019xiaoluo-github-io.vercel.app/
在这里插入图片描述

4.自己申请域名(也可以直接用vercel的)

设置自己的域名
在这里插入图片描述
在我们的域名解析里添加记录
在这里插入图片描述
refresh后就可以通过我们的域名访问了
在这里插入图片描述

5.总结

侧边栏找了很久 最后发现可以直接搜vuepress
这个用的是1.4版本

文件名不要加空格 会报错
写博客直接写好丢那个blogs中,md文档中修改最上面那些就可以了
我们直接同步到github仓库中,vercel就是自动帮我们更新网站

我的效果

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值