记录一次基于VuePress + Github 搭建个人博客

最终效果图

网站：https://chandler712.github.io/

一.前言

VuePress 是尤雨溪推出的支持 Vue 及其子项目的文档需求而写的一个项目，UI简洁大方，官方文档详细容易上手

二.搭建：

1.新建一个工程目录为project

可以手动右键新建，也可以使用下面的命令新建文件夹：

使用git bash终端

$ mkdir project

2. 全局安装VuePress

$ npm install -g vuepress

3. project文件夹中，使用命令行初始化项目--创建一个package.json

$ npm init -y

将会创建一个package.json文件


{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4. 在project的根目录下新建docs文件作为项目文档

$ mkdir docs

5.在docs文件夹下创建.vuepress文件夹：

$ mkdir .vuepress

所有 VuePress 相关的文件都将会被放在这里

6.在.vuepress文件夹下面创建config.js

$ touch config.js

config.js是VuePress必要的配置文件，它导出一个javascript对象。

先加入如下配置后期再改：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

7. 在.vuepress文件夹下面创建public文件夹

$ mkdir public

这个文件夹是用来放置静态资源

8. 首页内容(像VuePress文档主页一样)

在docs文件夹下面创建一个README.md

$ touch README.md

默认的主题提供了一个首页，像下面一样设置home:true即可，可以把下面的设置放入README.md中，待会儿将会看到跟VuePress一样的主页。

---
home: true
heroImage: /logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
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
---

放一张图片到public文件夹中替换logo.jpg

简单的项目结构已经搭好了：

project
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json

1.在 package.json 里添加两个启动命令:

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

2.启动你的VuePress：测试效果

进入工程目录启动

$ npm run docs:dev

打开 http://localhost:8080/

三.测试完毕后构建自己的网页

1.导航栏配置：

在docs文件下建立如下文件

关于--文件guide-内容guide.md

博客--文件index

--文件html-内容one.md

--文件css-内容one.md

--文件javascript-内容javascript.md

--文件nodejs-内容nodejs.md

--文件react-内容react.md

--文件vue-内容vue.md

--文件vx-内容vx.md

--文件others-内容others.md

Python--文件python-内容python

2.导航栏配置config.js：

 themeConfig: {

       lastUpdated: 'Last Updated', // 文档更新时间：每个文件git最后提交的时间
        displayAllHeaders: true, // 默认值：false
        activeHeaderLinks: false, // 默认值：true
        nav: [
            { text: '首页', link: '/'},
            { text: 'Python', link: '/python/python.md' },
            {
              text: '博客',
 
              items: [
                  { text: 'Html', link: '/index/html/one.md' },
                  { text: 'css', link: '/index/css/one.md' },
                  { text: 'Javascript', link: '/index/javascript/javascript.md' },
                  { text: 'nodejs', link: '/index/nodejs/nodejs.md' },
                  { text: 'vue', link: '/index/vue/vue.md' },
                  { text: 'react', link: '/index/react/react.md' },
                  { text: 'vx', link: '/index/vx/vx.md' },
                  { text: 'others', link: '/index/others/others.md' },
              ]
            },
             {
                text: '链接',
                //ariaLabel: 'Language Menu',
                items: [
                  { text: 'Github', link: 'https://github.com/Chandler712/practice' },
                  { text: '博客园', link: 'https://www.cnblogs.com/chandlerwong/' },
                ]
              },
 
              {text:'关于', link:'/guide/guide.md'},
        ],
       }

3.侧边栏配置config.js：

themeConfig: {
 
        sidebar: 'auto',//自动添加标题到侧栏
        sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。
        lastUpdated: 'Last Updated', // 文档更新时间：每个文件git最后提交的时间
     sidebar: {
 
             '/index/': [
                // 侧边栏在 /index/ 目录上
                '/index/',
                {
                  title: 'Html',
                  collapsable: false, // 不可折叠
                  children: [
 
                    '/html/one.md',
 
                ]
                },
                {
                  title: 'CSS',
                  collapsable: false, // 不可折叠
                  children: [
                      '/index/css/one.md',
 
                ]
                },
                // 侧边栏在 /javascript/ 目录上
                {
                  title: 'Javascript',
                  collapsable: true, // 不可折叠
                  children: [
                    '/index/javascript/javascript.md'
                  ]
                },
                // 侧边栏在 /node.js/ 目录上
                {
                    title: 'nodejs',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/nodejs/nodejs.md',
 
                    ]
                  },
                  // 侧边栏在 /react.js/ 目录上
                {
                    title: 'react',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/nodejs/react.md',
 
                    ]
                  },
                  // 侧边栏在 /others/ 目录上
                  {
                    title: '其它',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/others/others.md',
 
                    ]
                  },
                  // 侧边栏在 /vue.js/ 目录上
                {
                    title: 'vuejs',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/vue/vue.md',
 
                    ]
                  },
                     // 侧边栏在 /vx/ 目录上
                {
                    title: 'vx',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/vx/vx.md',
 
                    ]
                  },
            ]
          }
 
            },
   }

显示所有页面的标题链接

默认情况下，侧边栏只会显示由当前活动页面的标题（headers）组成的链接，你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接：

  themeConfig: {    displayAllHeaders: true // 默认值：false  }

活动的标题链接

默认情况下，当用户通过滚动查看页面的不同部分时，嵌套的标题链接和 URL 中的 Hash 值会实时更新，这个行为可以通过以下的配置来禁用：

themeConfig: {    activeHeaderLinks: false, // 默认值：true  }

4.完整的config.js配置

module.exports = {
    title: '个人文档',
    description: '去留无意，闲看庭前花开花落；宠辱不惊，漫随天外云卷云舒',
    head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一个自定义的 favicon(网页标签的图标)
      ],
      serviceWorker: true,
     base: '/', // 这是部署到github相关的配置  使用'/'时
                //部署到 https://<USERNAME>.github.io  USERNAME=你的用户名
       markdown: {
        lineNumbers: true // 代码块显示行号
      },
      themeConfig: {
 
        sidebar: 'auto',
        sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。
        lastUpdated: 'Last Updated', // 文档更新时间：每个文件git最后提交的时间
 
       //导航栏配置
        nav: [
            { text: '首页', link: '/'},
            { text: 'Python', link: '/python/python.md' },
            {
              text: '博客',
 
              items: [
                  { text: 'Html', link: '/index/html/one.md' },
                  { text: 'css', link: '/index/css/one.md' },
                  { text: 'Javascript', link: '/index/javascript/javascript.md' },
                  { text: 'nodejs', link: '/index/nodejs/nodejs.md' },
                  { text: 'vue', link: '/index/vue/vue.md' },
                  { text: 'react', link: '/index/react/react.md' },
                  { text: 'vx', link: '/index/vx/vx.md' },
                  { text: 'others', link: '/index/others/others.md' },
              ]
            },
 
            {
                text: '链接',
                //ariaLabel: 'Language Menu',
                items: [
                  { text: 'Github', link: 'https://github.com/Chandler712/practice' },
                  { text: '博客园', link: 'https://www.cnblogs.com/chandlerwong/' },
                ]
              },
 
              {text:'关于', link:'/guide/guide.md'},
        ],
        displayAllHeaders: true, // 默认值：false
        activeHeaderLinks: false, // 默认值：true
 
        //侧边栏配置
        sidebar: {
 
             '/index/': [
                // 侧边栏在 /index/ 目录上
                '/index/',
                {
                  title: 'Html',
                  collapsable: false, // 不可折叠
                  children: [
 
                    '/html/one.md',
 
                ]
                },
                {
                  title: 'CSS',
                  collapsable: false, // 不可折叠
                  children: [
                      '/index/css/one.md',
 
                ]
                },
                // 侧边栏在 /javascript/ 目录上
                {
                  title: 'Javascript',
                  collapsable: true, // 不可折叠
                  children: [
                    '/index/javascript/javascript.md'
                  ]
                },
                // 侧边栏在 /node.js/ 目录上
                {
                    title: 'nodejs',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/nodejs/nodejs.md',
 
                    ]
                  },
                  // 侧边栏在 /react.js/ 目录上
                {
                    title: 'react',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/nodejs/react.md',
 
                    ]
                  },
                  // 侧边栏在 /others/ 目录上
                  {
                    title: '其它',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/others/others.md',
 
                    ]
                  },
                  // 侧边栏在 /vue.js/ 目录上
                {
                    title: 'vuejs',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/vue/vue.md',
 
                    ]
                  },
                     // 侧边栏在 /vx/ 目录上
                {
                    title: 'vx',
                    collapsable: true, // 不可折叠
                    children: [
                      '/index/vx/vx.md',
 
                    ]
                  },
            ]
          }
 
            },
 
            algolia: {
                apiKey: '<API_KEY>',
                indexName: '<INDEX_NAME>'
              }
        }

5.搜索框匹配

 algolia: {                apiKey: '<API_KEY>',                indexName: '<INDEX_NAME>'             }

测试--进入工程目录

$ npm run docs:dev

四.部署到github

1.登录github账号新建一个repository

仓库名结尾以<github的用户名>.github.io

对应的config.js的配置

module.exports = {base: '/',}

不用clone到本地仓库

2.在project根目录创建脚步文件--自动部署到github

$ touch deploy.sh

!/usr/bin/env sh# 确保脚本抛出遇到的错误set -e
# 生成静态文件npm run docs:build
# 进入生成的文件夹cd docs/.vuepress/dist
 
git initgit add -Agit commit -m 'deploy'
 
git push -f git@github.com:Chandler712/Chandler712.github.io.git master
 
cd –

3.设置package.json：

{
"scripts": {

   "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
}
}

4.通过git bash 终端输入命令自动部署到github

$ npm run deploy

结束