GitHubPages 搭建
GitHub Pages，由 GitHub 网站服务，为众多 GitHub 用户提供了良好的服务器部署环境以及域名的工具。使用用户名创建一个名为 username.github.io 的仓库即可，如 veenveenveen.github.io，然后通过VuePress搭建静态网站后进行部署。
VuePress 搭建
1. VuePress简介
VuePress 是以 Vue驱动的简约静态网站生成工具，通过编写markdown文档并将文件编译为html文件来构建静态网站。
2. 环境搭建
新建文件夹(以Desktop/Web/VeenWeb为例)，在该文件夹下创建package.json文件，内容如下
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
"devDependencies": {
"vuepress": "^0.14.8"
}
}
然后安装vuepress,执行下面的命令会生成node_modules依赖包
npm install -D vuepress
创建docs目录并在该目录下创建一个markdown文件
# 创建一个 docs 目录
mkdir docs
# 切换到docs目录创建一个 markdown 文件
echo '# Hello VuePress' > README.md
此时可以运行下面命令查看效果 ( localhost:8080 )
npm run dev
此时只显示了"Hello VuePress"的一个带搜索框的页面，此时说明环境已经搭建完成。
Snip20181212_27.png
3. 目录结构
笔者的目录结构如下
VeenWeb - 主工程目录
└─ docs - 主要的开发目录
└─ .vuepress - vuepress配置目录
└─ dist - 静态资源默认生成目录
└─ public - 公共资源目录
└─ imgs
├─icon.png
├─ config.js - js配置文件
├─ override.styl - css覆盖，配置显示颜色等样式
├─ style.styl - 同上
└─ about - 导航栏（关于）
└─ article - 导航栏（文章）
└─ essay
└─ other
└─ technology
└─ home - 导航栏（首页）
├─ README.md - 网站默认首页
├─ node_mudules - node依赖包
├─ deploy.sh - 自动部署脚本
├─ package.json - webpack 配置文件
4. 简单配置
运行下面的命令生成静态资源，会在docs目录下生成.vuepress目录，该目录默认是隐藏的，可以使用ls -al查看
npm run build
.vuepress目录下创建配置文件config.js，该文件是
配置 VuePress 站点的基本文件。文件的一些内容如下，更加详细的配置可以参考VuePress官网。
module.exports = {
// 左上角标题
title: 'veen',
// 描述
description: ' ',
// 头部部署，网页小图标
head: [
// ico 配置
['link', { rel: 'icon', href: '/icon.png' }]
]
}
5. 主题配置
- 主页 要配置主页，需要修改根目录的
README.md文件，如
---
home: true
<!-- heroImage: -->
actionText: Get Started →
actionLink: /home/
features:
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: 文档库 | Copyright © 2018 veenveenveen
---
int main() {
while(alive) {
study();
}
return 0;
}
此时看到的内容如下
Snip20181212_28.png
- 导航栏配置 可以通过
themeConfig.nav配置导航栏
module.exports = {
// 主题部署
title: 'veen'
description: ' ',
head: [...],
themeConfig: {
/**
* 右侧导航条
* text - 显示字段
* link - 链接：注意前后带 / 符号
*/
nav: [
{
text: '主页',
link: '/home/'
},
/**
* 多级菜单
* 开头 text 为一级标题
* 数组内 text 为二级标题
* link 为链接，注意带 /
*/
{
text: '文章',
items: [
{
text: '技术',
link: '/article/technology/'
},
{
text: '随笔',
link: '/article/essay/'
},
{
text: '其他',
link: '/article/other/'
}
]
},
{
text: '关于',
link: '/about/'
// link: '/about/'
},
// 链接到网站
{
text: 'Github',
link: 'https://www.github.com/veenveenveen'
},
]
}
}
效果图如下
Snip20181212_30.png
- 侧边栏配置 可以通过
themeConfig.sidebar配置
module.exports = {
// 主题部署
title: 'veen'
description: ' ',
head: [...],
themeConfig: {
nav: [...],
/**
* 侧边栏配置：侧边栏组
*/
sidebar: {
// ------- 文章 -------
// 侧边栏在 /article/technology/ 目录上
'/article/technology/': [
{
title: '技术',
collapsable: true,
children: [
['', 'README']
]
},
{
title: '开发',
collapsable: true,
children: [
['one', 'one'],
['two', 'two']
]
},
{
title: '前端',
collapsable: true,
children: [
['three', 'three'],
]
}
],
// 侧边栏在 /article/essay/ 目录上
'/article/essay/': [
{
title: '随笔',
collapsable: false,
children: []
},
['', 'README']
],
// 侧边栏在 /article/other/ 目录上
'/article/other/': [
{
title: '其他',
collapsable: false,
children: []
},
['', 'README']
],
// ------- 关于 -------
// 侧边栏在 /about/ 目录上
'/about/': [
{
title: '关于',
collapsable: false,
children: []
},
['', '技术文档'],
['WebSetup', '搭建步骤'],
['MarkDown', 'Markdown介绍'],
['Question', '问题解决']
]
},
// 侧边栏自动显示的深度 默认深度是 1，它提取 h2 标题。将其设置为 0 将禁用标题链接，最大值为2，同时提取 h2 和 h3 标题。
sidebarDepth: 1
}
}
侧边栏效果图
Snip20181212_31.png
6. 部署
上面介绍了环境搭建，配置导航栏，侧边栏，具体markdown的编写就要自己来写了。
部署脚本deploy.sh如下:
# 自动部署脚本
# 构建
npm run build
# 导航到构建输出目录
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 推到你仓库的 master 分支
git push -f git@github.com:veenveenveen/veenveenveen.github.io.git master
每次编写完后直接在主工程目录下执行./deploy.sh即可。（先检查一下deploy.sh是否可执行，如果无法执行，可以使用命令chmod 777 deploy.sh修改。）
网友评论