使用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 可能会变化、应用也可能不够稳定,所以看文档时可以看下面这个
- WCF技术剖析之十八:消息契约(Message Contract)和基于消息契约的序列化
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[上篇]
- 成为更好程序员的8种途径
- 探秘Tomcat——启动篇
- ai量化系统架构的思考
- 探秘Tomcat——连接器和容器的优雅启动
- 谈谈分布式事务之三: System.Transactions事务详解[上篇]
- WCF技术剖析之十九:深度剖析消息编码(Encoding)实现(上篇)
- 谈谈分布式事务之二:基于DTC的分布式事务管理模型[下篇]
- 孙明俊:人工智能之算力演进
- 探秘Tomcat——一个简易的Servlet容器
- 2017年与机器学习相关的10大Python开源库
- 控制并发访问的三道屏障: WCF限流(Throttling)体系探秘[上篇]
- 探秘Tomcat——从一个简陋的Web服务器开始
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法