使用vuepress-6小时搭建一个完全免费的个人网站

分享一个通过vuepress搭建个人博客

当然也可以自己写不用vuepress,自己写代码然后通过githubPages也是可以的,只是使用vuepress相对来说时间快一点,他生成的网站也是响应式的。

这是我的个人博客:https://1crazy.github.io/,其实非常简单:我只用了1天时间就完成了,下面给大家讲一下如何开始。

一、个人网站的作用:

个人相册,笔记,个人小说,员工手册,公司制度文档,等等

UmiJSDvaJS的文档也是使用的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 可能会变化、应用也可能不够稳定,所以看文档时可以看下面这个

https://v0.vuepress.vuejs.org/zh/

推荐阅读更多精彩内容