vue搭建博客

使用vue2.0/3.0搭建博客,前端情绪员

  • 实现原理
  • 安装nodejs和vue
  • 写项目
  • 项目打包和托管项目
  • 创建github仓库
  • 安装git
  • 托管项目到github仓库
  • 检查仓库并设置pages
  • 购买域名和解析域名
  • 修改更新项目
  • ps(gitee搭建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仓库中。
vue搭建博客_第1张图片

托管项目到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返回的链接解析到域名中就可以。

购买域名和解析域名

去阿里云购买一个自己想要的域名,购买完成后要进行实名认证,实名认证可以需要几天的时间,这里直接跳过,打开控制台,找到自己的域名,点击解析会看到
vue搭建博客_第2张图片

按照图片中添加记录,第一个的记录值打开终端,输入命令ping xxx.github.io,就可以看到一个ip地址,把这个ip地址添加到这个里面就行了,第二个记录类型是CNAME, 这个是把xxx.github.io的链接指向到你的域名上,完成这些操作之后,在你的dist文件夹中创建一个文本文档,里面写上自己的域名
vue搭建博客_第3张图片
并且文件名称命名为CNAME,不要后缀名,保存好后,添加这个文件到仓库中,或者删除仓库中的master分支,把dist中的.git文件删除了,再重新进行一遍托管项目到github仓库,托管完成之后打开settings的pages,会看到自己的域名,同时把默认的none切换到master,就能看到自己的域名链接,多刷新几次,等到背景色变为绿色,前面有个对号之后,就可以直接访问了,
vue搭建博客_第4张图片

修改更新项目

后期肯定要修改项目,更新网站的内容,那么修改完成之后,重新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

你可能感兴趣的:(vue.js,github,git)