记录一次基于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
结束
记录一次基于VuePress + Github 搭建个人博客的更多相关文章
- Mac上基于hexo+GitHub搭建个人博客(一)
原文地址: http://fanjiajia.cn/2018/11/23/Mac%E4%B8%8A%E5%9F%BA%E4%BA%8Ehexo+GitHub%E6%90%AD%E5%BB%BA%E4% ...
- 【教程向】——基于hexo+github搭建私人博客
前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...
- 基于 Hexo 从零开始搭建个人博客（二）
阅读本篇前,请先配置好相应的环境,请仔细阅读教程 基于 Hexo 从零开始搭建个人博客(一). 原文链接:基于 Hexo 从零开始搭建个人博客(二) 前言 博客搭建过程遇到任何问题,优先在本页面搜索, ...
- 基于 Hexo 从零开始搭建个人博客（五）
阅读本篇前,请先阅读前几篇文章: 基于 Hexo 从零开始搭建个人博客(一) 基于 Hexo 从零开始搭建个人博客(二) 基于 Hexo 从零开始搭建个人博客(三) 基于 Hexo 从零开始搭建个人博 ...
- 《Hexo+github搭建个人博客》
<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...
- jekyll+github搭建个人博客总结
jekyll+github搭建个人博客 经过一天多的折腾,终于算是搭建好了自己的个人博客,看到有些社区评论说:在windows下用jekyll搭建静态博客,简直就自讨苦吃,但是都到一半了,有什么办法呢 ...
- 使用Node.js+Hexo+Github搭建个人博客（续）
一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在 ...
- 如何用hexo+github搭建个人博客
搭建环境 1.安装 Node.js: https://nodejs.org/en/ windows下点击链接,下载安装即可;Linux下更加简单,在终端下输入sudo apt-get install ...
- Hexo和github搭建个人博客 - 朱晨
GitHub账号 mac/pc 环境 12 node.jsgit 创建GitHub仓库 登陆GitHub,创建一个新的Respository Repository name叫做{username}.g ...
随机推荐
- kafka零数据丢失的配置方案
讨论一下kafka参数的配置 1.acks 参数配置 acks这个参数有三个值:0,1,-1,但是不用的参数对应的含义不同,那如果我们想要保证数据不丢失,acks 值应该设置为哪个参数呢? 0:代表生 ...
- Linkerd 2.10(Step by Step)—3. 自动轮换控制平面 TLS &Webhook TLS 凭证
Linkerd 2.10 系列 快速上手 Linkerd v2 Service Mesh(服务网格) 腾讯云 K8S 集群实战 Service Mesh-Linkerd2 & Traefik2 ...
- [转]dd大牛的《背包九讲》
P01: 01背包问题 题目 有N件物品和一个容量为V的背包.第i件物品的费用是c[i],价值是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大. 基本思路 这是最 ...
- OVN入门
参考链接 如何借助 OVN 来提高 OVS 在云计算环境中的性能 OVN简介 Open vSwitch Documentation OVSDB介绍及在OpenDaylight中的调用 OpenDayl ...
- 小程序生成商品分享二维码海报解决方案和实现方式JAVA
使用技术: Graphics , 七牛云 , 微信sdk(github上非常出名的wxjava,地址https://github.com/Wechat-Group/WxJava/)直接上干货代码,每 ...
- 求证：-1/2 <= {2x} - {x} < 1/2
证:由 x = [x] + {x},知2x = 2[x] + 2{x}. 1.若{x}落在[0,1/2),则2{x} < 1,于是有{2x} = 2{x},此时 {2x} - {x} = {x} ...
- 由Eratosthenes筛法演变出的一种素数新筛法
这两天和walls老师交流讨论了一个中学竞赛题,我把原题稍作增强和变形,得到如下一个题: 从105到204这100个数中至少要选取多少个数才能保证选出的数中必有两个不是互素的? 我们知道最小的几个素数 ...
- 一个基于activiti审批流程示例，如何与系统整合
前言 目前市场上有很多开源平台没有整合工作流,即使有,也是价格不菲的商业版,来看这篇文章的估计也了解了行情,肯定不便宜.我这个快速开发平台在系统基础功能(用户管理,部门管理-)上整合了工作流,你可以直 ...
- for循环练习之打印三角形
public class TestDemo01 { /** * 打印三角形 * 1.打印空格 * 2.打印三角形 */ public static void main(String[] args) { ...
- golang channel原理
channel介绍 channel一个类型管道,通过它可以在goroutine之间发送和接收消息.它是Golang在语言层面提供的goroutine间的通信方式. 众所周知,Go依赖于称为CSP(Co ...