从零搭建你的博客网站 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就是自动帮我们更新网站

我的效果