当前位置: 首页 > Web前端 > vue.js

2022年是时候开始您自己的博客了!

时间:2023-04-01 00:24:34 vue.js

为什么要建博客?我在写业务的时候遇到了困难,突破了,但是因为没有做笔记,没有输出。下次再见面,我会继续百度。甚至当面试官问问题的时候,我知道我做到了,但我就是答不上来。为了不甘心做一个没有存在感的码农,你需要创建一个博客,写下自己在代码世界里的点点滴滴。创建一个git项目创建一个新项目如果你把你的博客部署到这个项目,这个项目必须是public的!如果博客部署的是gitub,私有拥有这个项目,需要再新建一个项目vuepress在本地构建,安装在创建的项目下:yarnaddvuepress@nextdocs添加README.md(随便写)添加如下命令package.json"scripts":{"start":"vuepressdevdocs","build":"vuepressbuilddocs"}在.vuepress文件夹下添加config.js,添加如下配置favivo.ico图标配置头:via`[tagName,{attrName:attrValue},innerHTML?]`添加标签的格式head:[['link',{rel:'icon',href:'/icon.jpg'}]]//icon.png必须位于.vuepress下public文件夹下的navbar导航栏配置在themeConfig中添加navbar配置navbar:[//navbarItem{text:'',//标签名称link:'',//页面文件路径children:[],//childItemactiveMatch:''//}//string-页面文件路径'/bar/README.md',]sidebar侧边栏配置在themeConfigsidebar:[{text:'',//标签名称link:'',//页面文件路径children:[],//childactiveMatch:''//}]sidebar:{'':[]//同上}TIP:morevuepressconfigurationexecutionyarnrunstart,(太开心了,第一篇本地博客到这里就完成了)在github上部署博客在项目下创建deploy-gh.sh,添加如下代码#!/usr/bin/envsh#确保脚本抛出遇到的错误set-e#进入生成的文件夹cddocs/.vuepress/dist#如果发布到自定义域名#echo'www.example.com'>CNAMEgitinitgitadd-Agitcommit-m'deploy'#Section一:适合当前项目的私有部署,属于另一个新库#如果发布到https://.github.io#gitpush-fgit@github.com:/.github。io.gitmaster#第二种:适合当前项目的公开部署#如果发布到https://.github.io/#gitpush-fgit@github.com:/.gitmaster:gh-pages#部署成功后可以查看分支下的博客地址#这里我使用第一个gitpush-fgit@github.com:DrKaiBin/DrKaiBin.github.io.gitmastercd-```添加运行命令"deploy-gh":"yarnrunbuild&&bashdeploy-gh.sh"github配置创建新库username.github.io[usename必须是用户名或组织github的名称]运行命令yarnrundeploy-gh访问创建的新库,ssetting->pages大功告成看到这里,你已经成功部署了自己的博客,接下来就去记录你的代码生涯吧!