一个小时用vuepress搭建出属于你自己的博客

breezy
620 阅读5分钟

写在前面

这里我用的是vuepress-theme-reco主题，可以先康康我的博客Landscape in the Mist，如果你喜欢这个主题的话再继续看下去叭！

其实我搭建这个博客用了不止一个小时，中间踩了很多坑，不过大都是由于没仔细看文档导致的，大家一定有问题先看文档! vuepress-theme-reco, VuePress

搭建步骤

初始化

这里推荐用yarn，我最开始用的是npm，但是不知道什么原因中间卡了很久

yarn global add @vuepress-reco/theme-cli //引入vuepress-theme-reco
theme-cli init	//用官方的模板初始化项目

接下来会显示一些信息填写，如果现在没想好可以一路回车，之后这些信息都是可以更改的

经过这两个步骤，主题就安装好了，是不是特别方便特别快！

运行

接下来来看看效果吧

yarn
yarn dev

69da43b89d9dcccc0c11c86507a24e2.png

如果你喜欢这个主题就可以不用更改了，往里面加文章就行，对了，那个右下角的狗子默认页面是没有的，如果你想往里面加一些组件的话就继续看下去吧

亿点点改变

看板娘

也就是右下角那个狗子，不只有狗子，还有:

themes.png

这个是官方插件，文档中有详细设置说明，引入依赖就行

yarn add @vuepress-reco/vuepress-plugin-kan-ban-niang //引入依赖

配置

在config.js下的moudule.export加入这些

plugins: [
    [
      '@vuepress-reco/vuepress-plugin-kan-ban-niang',{
        theme: [
          'miku', 'whiteCat', 'haru1', 'haru2', 'haruto', 'koharu', 'izumi', 'shizuku', 'wanko', 'blackCat', 'z16'
        ],
        clean: false,
        messages: { 
          welcome: '欢迎来到我的博客', home: '心里的花，我想要带你回家。', theme: '好吧，希望你能喜欢我的其他小伙伴。', close: '你不喜欢我了吗？痴痴地望着你。' 
        },
        messageStyle: { right: '68px', bottom: '290px' },
        width: 250,
        height: 320
      }
    ],
  ],

再次运行就能看见这个组件啦，想做更多修改的话看文档吧kanbanniang

音乐播放器

也是官方插件，引入依赖

yarn add @vuepress-reco/vuepress-plugin-bgm-player

配置

[
      "@vuepress-reco/vuepress-plugin-bgm-player",{
           audios: [
          // 本地文件示例
          {
            name: '장가갈 수 있을까',
            artist: '咖啡少年',
            url: '/bgm/1.mp3',
            cover: '/bgm/1.jpg'
          },
          // 网络文件示例
          {
            name: '강남역 4번 출구',
            artist: 'Plastic / Fallin` Dild',
            url: 'https://assets.smallsunnyfox.com/music/2.mp3',
            cover: 'https://assets.smallsunnyfox.com/music/2.jpg'
          },
          {
            name: '用胳膊当枕头',
            artist: '최낙타',
            url: 'https://assets.smallsunnyfox.com/music/3.mp3',
            cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
          }
        ]  
      }
    ],

播放器位置和缩小浮动模式都是可以设置的，具体看bgmPlayer

效果图

image.png

主题色更改

可能你不太喜欢默认的绿色主题色，改！在.vuepress文件下新建styles/palette.styl文件

image.png

$accentColor =                       // 主题颜色
$textColor =                         // 文本颜色
$borderColor =                       // 边框线颜色
$codeBgColor =                       // 代码块背景色
$backgroundColor =                   // 悬浮块背景色

选择你要修改的部分往文件上加就行了

背景图修改

背景图分两部分，一个是打开网页就能看到的首页背景图，一个是平时浏览文章的背景图，推荐用gif，嗷嗷帅

首页背景图

修改根路径下README.md文件，往 YAML front matter 添加bgImage和bgImageStyle属性就行了

为啥是根路径下README.md文件?因为它的 YAML front matter 指定了home: true

image.png

image.png

其它页面背景图

往根路径下README.md文件最后面加上style就行了

<style>
body{
  background-image: url(这里填路径);
  }
</style>

导航栏

导航栏分为最上面的全局导航栏和侧边栏

全局导航栏

可能你想往里面增减一些东西，修改configs.js里themeconfig的nav即可，因为这个主题几乎继承 VuePress 默认主题的一切功能，所以具体配置可以看vuepress官方文档

侧边栏

侧边栏在themeConfig的sidebar里设置具体看文档

我自己是将所有文章都分类放在侧边栏了，像这样

image.png

如果你也想像我这样，按照这种格式写就行了

image.png

向下跳转

或许你发现了我的博客首页有个箭头，点击页面会向下滑，这个是参照使用vuepress-theme-reco搭建自己的博客,具体操作是在根路径README.md加入如下代码

<style>
.anchor-down {
  display: block;
  margin: 12rem auto 0;
  bottom: 45px;
  width: 20px;
  height: 20px;
  font-size: 34px;
  text-align: center;
  animation: bounce-in 5s 3s infinite;
  position: absolute;
  left: 50%;
  bottom: 30%;
  margin-left: -10px;
  cursor: pointer;
}
@-webkit-keyframes bounce-in{
  0%{transform:translateY(0)}
  20%{transform:translateY(0)}
  50%{transform:translateY(-20px)}
  80%{transform:translateY(0)}
  to{transform:translateY(0)}
}
.anchor-down::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(135deg);
  position: absolute;
  bottom: 10px;
}
.anchor-down::after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: rotate(135deg);
}
</style>

<script>
export default {
  mounted () {
    const ifJanchor = document.getElementById("JanchorDown"); 
    ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);
    let a = document.createElement('a');
    a.id = 'JanchorDown';
    a.className = 'anchor-down';
    document.getElementsByClassName('hero')[0].append(a);
    let targetA = document.getElementById("JanchorDown");
    targetA.addEventListener('click', e => { // 添加点击事件
      this.scrollFn();
    })
  },

  methods: {
    scrollFn() {
      const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度
      document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置
    }
  }
}
</script>

部署到github

创建仓库

右上角点击创建仓库

image.png

填写了仓库名之后创建仓库

image.png

修改config.js

在module.exports里加入base:'/blog1/'(这里的路径要和仓库名完全一致)

打包

yarn build

完成后会发现文件夹下多了个public文件夹

上传到仓库

每次想更新文章都输好几条命令提交显然不方便，这里写个脚本deploy.sh放在根路径下

# deploy.sh文件
# 确保脚本抛出遇到的错误
set -e

# 进入生成的文件夹
cd ./public

git init
git add -A
git commit -m '--first commit'

# 如果发布到 https://<USERNAME>.github.io/<REPO>(REPO就是之前创建的仓库名)
git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

cd -

打开git bash，输入sh deploy.sh运行此脚本，代码即上传到仓库

设置为GitHub Pages

点击setting下的pages，设置Branch(根据自己的实际情况设置)

image.png

image.png

image.png

等一会上面会出现Your site is live at xxx,xxx就是地址，点进去看没问题就大功告成了！

不过由于众所周知的原因，有时候访问是会比较慢的，也可以选择再部署到gitee

部署到gitee

右上角选择从github导入仓库

image.png

url输入仓库对应的url，路径也要和仓库路径相同，即和base设置的一样

image.png

建立好之后在此仓库点击服务的Gitee Pages，进行部署，不过之后每次在github上有更新都需要回到gitee点击同步按钮，更简便的方法可以参照github博客自动同步到gitee（保姆级教程）

image.png

avatar
文章
阅读
粉丝