2022年是时候建一个属于自己的博客啦！

为何要建博客

在写业务时遇到困难攻破了，但因为没有做笔记，做输出。
下次再碰到又要继续百度。甚至在被面试官问到问题时，知道自己做过，但就是回答不出来。
为了不甘于做一个没有存在感的码农，你需要建立一个博客，写下自己在代码界的点点滴滴吧。

创建一个 git 项目

1. 创建一个新项目
   
   如果将博客部署于此项目，项目必须为 public！
   如果博客部署 gitub 并私有此项目，则需新建另外一个新项目

vuepress 本地搭建

1. 在已创建的项目下安装：yarn add vuepress@next
2. docs 下添加 README.md（随便写些内容）
3. 在 package.json 添加以下命令

"scripts": {
    "start": "vuepress dev docs",
    "build": "vuepress build docs"
}

4. 在.vuepress 文件夹下添加 config.js，添加以下配置

• favivo.ico 图标配置

  head：通过 `[tagName, { attrName: attrValue }, innerHTML?]` 的格式来添加标签
  head: [
      ['link', { rel: 'icon', href: '/icon.jpg' }]
  ]
  // icon.png必须位于.vuepress下的public文件夹下

• navbar 导航栏配置

在themeConfig添加navbar配置
navbar: [
    // navbarItem
    {
        text: '', // 标签名
        link: '', // 页面文件路径
        children: [], // 子项
        activeMatch: '' //
    }
     // 字符串 - 页面文件路径
      '/bar/README.md',
]

• sidebar 侧边栏配置

在themeConfig添加sidebar配置
sidebar: [
    {
        text: '', // 标签名
        link: '', // 页面文件路径
        children: [], // 子项
        activeMatch: '' //
    }
]
sidebar: {
    '': [] // 同上
}

TIP：更多vuepress 配置

5. 执行 yarn run start, （太开心了，到这里第一个本地博客已完成）

在 github 上部署博客

1. 在项目下创建 deploy-gh.sh 并添加以下代码

       #!/usr/bin/env sh

       # 确保脚本抛出遇到的错误
       set -e

       # 进入生成的文件夹
       cd docs/.vuepress/dist

       # 如果是发布到自定义域名
       # echo 'www.example.com' > CNAME

       git init
       git add -A
       git commit -m 'deploy'
       # 第一种： 适合当前项目为private部署，属于另建新库
       # 如果发布到 https://.github.io
       # git push -f [email protected]:/.github.io.git master


       # 第二种： 适合当前项目为public部署
       # 如果发布到 https://.github.io/
       # git push -f [email protected]:/.git master:gh-pages
       # 部署成功后，可在分支下查看博客网址
       
       # 这里我使用为第一种
       git push -f [email protected]:DrKaiBin/DrKaiBin.github.io.git master

       cd -
       ```

3. 添加运行命令
   "deploy-gh": "yarn run build && bash deploy-gh.sh"

4. github 配置

   • 创建新库
     

   username.github.io[usename 必须为 github 的用户名或组织名]

   • 运行命令
     yarn run deploy-gh
5. 访问已创建的新库，setting -> pages
   

大功告成

看到这，你已经成功的部署了属于自己的博客，接下来就去记录你的代码生涯吧！