vue搭建博客

实现原理

使用vue打包出来的dist，把dist中的文件托管到自己的github中或者云服务器中，利用github的话，会生成一个github提供的一个链接，访问这个链接就可以看到自己的网站，如果想要一个霸气点的域名，可以去阿里云或者腾讯云买一个域名，解析这个域名，就可以用自己的域名去访问网站。

安装nodejs和vue

使用vue搭建博客必须创建vue项目，前提是先安装nodejs，去nodejs官网下载，下载好后再安装vue，建议安装vue/cli，完事后并创建vue项目，大前端们可以省略此步骤。

写项目

安装好vue项目之后，运行并写自己想要的页面，（自己还可以去网上找自己想要的vue项目模板）

项目打包和托管项目

项目写好之后，运行脚本bulid打包，会生成dist文件夹，把dist里面的文件放到github仓库中，还可以自己买一个云服务器把项目托管到服务器中，当然项目只是死页面，我是选择放到guthub中，这里只对托管到github中做讲解。

创建github仓库

进入到自己github中，创建一个github仓库，仓库名字为xxx.github.io (xxx是自己github用户名)，不过自从2020年10月1号之后，在git中创建的仓库默认分支是main分支，要注意这个，仓库创建好之后，安装git，把自己的项目托管到仓库中。

安装git

去git官网或者去电脑管家下载git，并且检查自己的电脑中有没有添加.ssh，打开c盘，进入到自己的用户中，看有没有.ssh文件夹，如果没有的话，可以去搜一下，github添加ssh的操作，完事之后，就可以把自己打包好的项目托管到github仓库中。

托管项目到github仓库

已经安装好git了，回到打包好的dist中，右键打开Git Bash Here， 然后运行一些命令，把所有文件推送到远程仓库中，先输入git init初始化本地当前dist文件中的仓库，会看到一个隐藏文件.git，如果看不到的话，在查看中打开隐藏的项目就可以看到.git文件了，这个是本地仓库，然后运行git add . 是把当前文件中所有的文件暂存到本地仓库中，继续运行git commit -m ‘随便写一些备注’ ，这个是把当前暂存的文件提交到本地仓库中，如果有提示需要输入绑定自己的github用户名和邮箱，先绑定一下，然后再运行git commit -m ‘随便写一些备注’，继续运行git remote add origin xxx (xxx代表创建的仓库中的远程链接，点击clone会看到ssh下的一个链接，复制一下，放到xxx的位置)，这个是连接github中远程仓库，最后再输入git push -u origin master,就可以把dist中的所有文件托管到github仓库中了。
命令先后顺序总结：
git init
git add .
git commit -m ‘提交的备注’
git remote add origin xxx (xxx代表仓库的远程链接，建议用ssh下的)
git push -u origin master

检查仓库并设置pages

打开仓库，切换到分支master看有没有成功，成功的话然后打开仓库的settings，在settings中找到pages选项，在里面可以看到有一个切换分支的地方，默认的none，把这个切换到master，点击save，会看到上面有guthub返回的一个链接，继续刷新当前页面，等到链接变成绿色，前面有一个对号之后，直接打开这个链接就可以看到自己的网站了。如果不想要这个链接，去买一个域名，把github返回的链接解析到域名中就可以。

购买域名和解析域名

去阿里云购买一个自己想要的域名，购买完成后要进行实名认证，实名认证可以需要几天的时间，这里直接跳过，打开控制台，找到自己的域名，点击解析会看到

按照图片中添加记录，第一个的记录值打开终端，输入命令ping xxx.github.io，就可以看到一个ip地址，把这个ip地址添加到这个里面就行了，第二个记录类型是CNAME, 这个是把xxx.github.io的链接指向到你的域名上，完成这些操作之后，在你的dist文件夹中创建一个文本文档，里面写上自己的域名

并且文件名称命名为CNAME，不要后缀名，保存好后，添加这个文件到仓库中，或者删除仓库中的master分支，把dist中的.git文件删除了，再重新进行一遍托管项目到github仓库，托管完成之后打开settings的pages，会看到自己的域名，同时把默认的none切换到master，就能看到自己的域名链接，多刷新几次，等到背景色变为绿色，前面有个对号之后，就可以直接访问了，

修改更新项目

后期肯定要修改项目，更新网站的内容，那么修改完成之后，重新bulid，建议把CNAME文件放到vue项目的根目录中，以免重新bulid之后重置没了，bulid之后再把CNAME复制到dist中，再重新进行一遍托管项目到githun仓库，切记托管之前，一定要把仓库中的master分支删除了再重新托管，完成后再次打开settings中的pages切换到master分支。

整个流程就是这么多，如果哪里有不足的地方，请各位大前端们留言，看到后我会立即修改，
欢迎来搞，感谢支持。

ps(gitee搭建vue博客)

大家都知道，github是国外的网站，访问起来肯定是很费劲的，甚至都进不去，所以也可以建议大家去用国内的gitee去搭建博客，地址是：https://blog.csdn.net/qq_45952585/article/details/122514028?spm=1001.2014.3001.5501