使用vuepress-6小时搭建一个完全免费的个人网站
使用vuepress-6小时搭建一个完全免费的个人网站
分享一个通过vuepress搭建个人博客
当然也可以自己写不用vuepress，自己写代码然后通过githubPages也是可以的，只是使用vuepress相对来说时间快一点，他生成的网站也是响应式的。
这是我的个人博客：https://1crazy.github.io/，其实非常简单：我只用了1天时间就完成了，下面给大家讲一下如何开始。
一、个人网站的作用：
个人相册，笔记，个人小说，员工手册，公司制度文档，等等
像UmiJS，DvaJS的文档也是使用的vuepress，可以参考一下他的网站
我们可以随意的更换侧边栏的信息，比如公司概况、企业文化、家庭相册、自己的文章等等，当然我们自己写更换布局。
二、什么是vuepress
简单介绍一下，vuepress是尤雨溪18年4月12日发布的vue静态网站生成器，支持vue语法，内置webpack，每一个由VuePress生成的页面都是通过SSR预渲染的HTML，也因此具有非常好的加载性能和搜索引擎优化。
三、相关文档
下面列出来的非常简单，后面我也会给大家讲解一下用到的操作，当然大家也可以查看官方文档，为了方便查看，我列出它们的中文文档
git
node.js
vuepress
github pages
npm
markdown
webpack
vue
四、开始个人网站
1. 首先我们全局安装vuepress
npm i vuepress -g
安装vuepress
2. 将vuepress克隆至本地仓库
git clone git@github.com:docschina/vuepress.git
克隆至本地
3. 克隆以后的目录
完成好了以后，我们可以看到文件夹中多了一个vuepress文件夹
docs文件夹
在这个文件夹目录下，我们还是需要安装一下依赖生成node_modules文件夹，使用
npm i
生成nodemodules文件夹
简单介绍一下，在上面docs文件夹下就是我们需要自己写的东西，当然个人博客我们使用markdown语法书写就好了，首先我们先看一下效果，我们进入docs文件夹
vuepress dev生成本地访问链接【注意备用IE，建议使用最新版谷歌浏览器】
生成本地服务器
本地访问网址
本地访问图片
这个是vuepress的默认主题，我们后面就需要在 config.js里面进行配置更改就好了，当然如果需要自己写组件的话，就在components文件夹下面书写就好了
4. 关于默认主题中config.js文件中themeConfig的配置
其实配置很简单，可以参考一下vuepress官方文档，写的非常详细
下面是我的一些themeConfig:配置信息以及我的docs目录结构，.md文件就是我们写博客的地方了，其中里面的vuepress文件夹不用管它，没有是正常的，他是通过vuepress build生成的静态文件，后续我们将其文件夹内的东西push至github上面就好了
我的目录结构
themeConfig: {
repoLabel: 'github',
// editLinks: true,
docsDir: 'docs',
//获取最后一次提交博客时间
lastUpdated: true, // 最后更新时间
displayAllHeaders: true, // 默认值：false
// selectText: '选择语言',
// editLinkText: '编辑此页',
lastUpdated: '上次更新',
locales: {
'/': {
label: '简体中文',
selectText: '选择语言',
lastUpdated: '上次更新',
nav: [
{
text: '博文',
// link: '/index/HTMLCSS/'
items: [
{ text: 'html&css', link: '/index/html-css/css.md' },
{ text: 'javascript', link: '/index/javascript/javascript.md' },
{ text: 'nodejs', link: '/index/nodejs/nodejs.md' },
{ text: '其它', link: '/index/others/rap2.md' }
]
},
{
text: '项目总结',
link: '/project/project.md'
},
{
text: '小练习',
link: '/practice/practice.md'
},
{
text: '简书',
link: 'https://www.jianshu.com/u/422ccfa02512'
},
{
text: 'github',
link: 'https://github.com/1Crazy/1Crazy.github.io'
}
],
},
},
sidebar: {
'/index/': [
// 侧边栏在 /index/ 目录上
'/index/',
{
title: 'html&css',
collapsable: true, // 不可折叠
children: ['/index/html-css/css.md']
},
// 侧边栏在 /javascript/ 目录上
{
title: 'javascript',
collapsable: true, // 不可折叠
children: [
'/index/javascript/javascript.md'
]
},
// 侧边栏在 /node.js/ 目录上
{
title: 'nodejs',
collapsable: true, // 不可折叠
children: [
'/index/nodejs/nodejs.md',
'/index/nodejs/spider.md',
]
},
// 侧边栏在 /others/ 目录上
{
title: '其它',
collapsable: true, // 不可折叠
children: [
'/index/others/rap2.md',
'/index/others/cmder.md',
]
},
],
// 侧边栏在 /practice/ 目录上
'/practice/': [
['/practice/practice.md','练习'],
['/practice/practice1.md','练习1']
],
// 侧边栏在 /project/ 目录上
'/project/': [
['/project/project.md','工作总结'],
['/project/project1.md','工作总结1']
]
},
}
}五、github上创建仓库
仓库名字一定要写成你的: github名.github.io这种形式。然后将build好的静态vuepress文件里面的文件push上去就好了，之后就可以通过域名访问你的网址了，注意刚push上去，因为githubPages可能需要一定的时间，大概5分钟左右就可以看到你生成的网站了，赶快试试吧。
https://1crazy.github.io/ 像这样，自己的【github名.github.io】就可以了
创建仓库
六、需要注意地方
目前vuepress官方是1.x 的文档，由于目前 1.x 仍处于 alpha 阶段，在到达 beta 阶段之前，有些 API 可能会变化、应用也可能不够稳定，所以看文档时可以看下面这个
