vuepress 结合 GitHub pages 打造自己的博客网站

一.前期工作

1.新建一个空的文件夹执行

npm init -y

2.安装依赖

npm install -D vuepress

3.配置 package.json

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

4.运行以下命令开始写作

npm run docs:dev

二.配置项目

项目目录

在这里插入图片描述

1.项目根目录下新建 docs 文件夹

2.docs 文件夹下新建文件 .vuepress 文件夹

.vuepress 文件夹下新建 public 文件夹用来放静态资源

public 文件夹下放两张图片下面配置会用到

favicon.ico
home.png

3.在.vuepress 文件夹下新建 config.js 用来配置网站

module.exports = {
    
    
  title: '网站标题',
  // base: 网站域名前缀对应自己的GitHub仓库名称
  // 一定要以/开头结尾，不然会出现资源找不到
  base: '/blog/',
  port: 8888, //
  description: 'description',
  markdown: {
    
    
    lineNumbers: true
  },
  // 默认语言
  locales: {
    
    
    '/': {
    
    
      // 将会被设置为 <html> 的 lang 属性 （博客文章底部更新时间也会修改为中文时间）
      lang: 'zh-CN'
    }
  },
  themeConfig: {
    
    
    lastUpdated: '上次更新',  // 博客文章底部添加更新时间
    serviceWorker: {
    
    
      updatePopup: true,
      updatePopup: {
    
    
        message: '有新的内容',
        buttonText: '点击更新'
      }
    },
    sidebarDepth: 2, // 侧边栏深度
    displayAllHeaders: true,
    // 导航栏
    nav: [
      {
    
     text: '首页', link: '/' },
      {
    
     text: '我的csdn', link: 'https://blog.csdn.net/qq_39953537' },
      {
    
     text: 'github', link: 'https://github.com/l-x-f' }
    ],
    //  侧边栏
    sidebar: [
      // 数组配置第一个参数是路径 /home/ 指的是 docs 文件夹下的home文件夹下的README.md
      // 第二个参数是侧边栏标题
      ['/home/', '欢迎页'],

      // 对象配置： 是两级目录 title 是指侧边栏一级标题
      // collapsable: false会让这个二级侧边栏一直展开
      // children里的字段又是一个数组配置，参数含义如上
        title: 'vue',
        collapsable: false,
        children: [
        //  路径  /vue/function-api  指的是 docs 文件夹下的vue文件夹下的function-api.md
          ['/vue/function-api', ' vue Function API'],
          ['/vue/amap', 'vue amap']
        ]
      }
    ]
  },
  dest: './dist',  // 打包文件夹
  head: [
    [
      'link',
      {
    
    
        rel: 'icon',
        href: '/favicon.ico' // 网站的icon 已经放到public文件夹下
      }
    ]
  ]
};

上面其他未注释配置项的含义见官网

vuepress 基本配置官网链接

3.docs 文件夹下新建文件 README.md 用来配置网站首页

---
home: true              <!--home: true 表示这是首页 -->
heroImage: /home.png    <!--heroImage:表示图片地址  上文提到已放到public文件夹下-->
actionText: 快速上手 →   <!--actionText:按钮文字 -->
actionLink: /home/      <!--按钮跳转链接 -->
features:
  - title: 简洁至上
    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
  - title: Vue 驱动
    details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
  - title: 高性能
    details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2018-present Evan You
---

效果如图

在这里插入图片描述

三.部署

提示：以下仓库地址根据自己建的仓库更换

1.配置自己的 GitHub pages

新建一个仓库如 blog （仓库地址：https://github.com/l-x-f/blog）

如图

在这里插入图片描述

点击设置 settings 找到如图

在这里插入图片描述

如图选择 master branch

在这里插入图片描述

2.项目根目录下新建 deploy.sh

#!/usr/bin/env sh

success="更新成功"

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

# 生成静态文件
npm run docs:build

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


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

# 自己的仓库地址，blog这个仓库名称和config.js里的base:/blog/保持一致
git push -f https://github.com/l-x-f/blog.git master
echo $success;

# 回到之前的文件目录
cd -

3.打包上线
项目根目录下运行

./deploy.sh

4.然后在https://l-x-f.github.io/blog/这个地址就可以看到自己的网站了

5.如果想要把网站建在你的github pages的根目录下 https://l-x-f.github.io，你的仓库名称必须是l-x-f.github.io这样的，.github.io前面是你的git账户名称，vuePress 的配置文件config.js里的base改为 base：'/’即可。