基于vuepress搭建一个静态站点

title

零、写在前面

之前用Hexo或者Docute写过博客和文档,最近想搞搞vuepress
如果你想搭建一个自己的静态网站,无论是博客还是文档或者其他相关的,都可以使用vuepress,至于Hexo、Docute或者GitBook,可以都了解一下,总有一款适合你。

本文使用vuepress版本为1.x。

本文相关源码在Github上,演示地址在这里

一、快速体验

1.创建相关文件及文件夹

# 创建项目文件夹
mkdir vuepress-proj

# 进入文件夹
cd vuepress-proj

# 初始化package.json
npm init -y

# 安装vuepress
npm install -D vuepress@next

# 创建docs文件夹
mkdir docs

2.在package.json中加入相关脚本

package.json

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

3.在docs文件夹下新建README.md文件并写入内容

docs/README.md

# Hello VuePress!

4.启动

npm run dev

看到这个界面就成功了:
Hello VuePress

二、添加自定义内容

首先说明一下官方推荐的目录结构,详细说明在这里
在这里插入图片描述
首先按照推荐结构创建配置文件config.js

1.使用导航栏及侧边栏

config.js中添加如下代码,修改默认主题的配置,增加导航栏:

module.exports = {
    themeConfig: {
        nav: [{
            text: '唐',
            link: '/tang/'
        }, {
            text: '宋',
            link: '/song/'
        }, {
            text: '更多',
            link: '/more/'
        }],
        sidebar: {
           '/tang/': [
               ['', '简介'], {
                   title: '代表人物',
                   collapsable: false,
                   children: [
                       'libai/'
                   ]
               }
           ],
           '/song/': [
               ['', '简介'], {
                   title: '代表人物',
                   collapsable: false,
                   children: [
                       'liqingzhao/'
                   ]
               }
           ]
       }
    }
}

其中,/tang//song/''libai/等表示当前导航栏或侧边栏点击所跳转的路由地址(即相应的.md文件),按照路由创建对应的文件。

  • ''会显示为当前目录下的README.md文件。
  • ['', '简介']当前侧边栏的title简介
  • /tang/表示为tang文件夹下的README.md/tang表示为tang.md文件。

可以使用sidebar: auto自动生成侧边栏,这里采用自定义侧边栏。

效果如下:
在这里插入图片描述

2.在Markdown中使用Vue

为了使“代表人物”界面更加个性化,且整个是vue驱动的支持vue语法,所以使用部分vue语法。
docs/tang/libai/README.md

# 李白

## 个人简介

<profile-panel :info="info"></profile-panel>

## 代表作品

- [《望庐山瀑布》](./wanglushanpubu.md)

<script>
export default {
  data() {
      return {
          info: {
              url: 'libai.jpg',
              label: '唐代著名浪漫主义诗人',
              des: '李白(701年-762年) ,字太白,号青莲居士,又号“谪仙人”,是唐代伟大的浪漫主义诗人,被后人誉为“诗仙”,与杜甫并称为“李杜”,为了与另两位诗人李商隐与杜牧即“小李杜”区别,杜甫与李白又合称“大李杜”。据《新唐书》记载,李白为兴圣皇帝(凉武昭王李暠)九世孙,与李唐诸王同宗。其人爽朗大方,爱饮酒作诗,喜交友。'
          }
      }
  }
}
</script>

使用了一个<profile-panel>组件,按照上面的目录结构,在components目录下创建ProfilePanel.vue文件,默认在components目录下的组件会自动注册,可以直接使用;
一些静态的图片资源放在了public/images目录下。
效果如下:
个人介绍
值得一提的是,使用vue组件时,会默认在全局挂在一些计算属性其中$site$page分别为当前站点的信息和当前页面的信息。

3.使用layout布局

在上面的“代表作品”中有链接指向wanglushanpubu.md,这个md文件的内容为:
docs/tang/libai/wanglushanpubu.md

---
layout: ShowPanel
---

当路由到这个页面时,表示当前页面使用layout所指定组件的自定义布局,ShowPanelcomponents中的自定义vue组件,即components/ShowPanel.vue
效果为:
望庐山瀑布

4.国际化

在刚刚config.js中添加locales字段,以配置国际化。

locales: {
    '/': { // 中文
        lang: 'zh-CN',
        title: '诗词鉴赏',
        description: '静态站点 诗词鉴赏'
    },
    '/en/': { // 英文
        lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
        title: 'Appreciation of poetry',
        description: 'Static Site Appreciation of poetry'
    }
}

配置默认主题的导航栏和侧边栏支持国际化,在上述themeConfig中增加locales字段:

themeConfig: {
	locales: {
		'/': { // 默认语言,这里为中文
			nav: [{
                text: '唐',
                link: '/tang/'
            }],
			sidebar: {
				// ...
			}
		},
		'/en/': { // 英文
			nav: [{
                text: 'Tang',
                link: '/en/tang/'
            }],
			sidebar: {
				// ...
			}
		}
	}
}

navsidebar和前文字段含义相同。

相应的也要增加国际化相应的文件夹及文件,整体结构跟原结构一致,如图:
国际化目录
实现效果为:
中文
en

三、部署

这里只说一下Github上的部署,更多请看这里
原理就是使用GitHub Pages,每一个Github账号和每一个库都可以有一个静态站点;不同的是,个人的Github主页需要创建一个特殊名字的仓库<USERNAME>.github.io,部署在这里的代码可以使用https:<USERNAME>.github.io进行访问。另外,每个公有的Github仓库也有单独Pages,需要将代码部署到这个仓库的gh-pages的分支上,访问链接为https:<USERNAME>.github.io/<REPO>

1.手动部署

就是将上面写好的那些打包编译为html、js和css文件,其本质也是使用了webpack,所以也可以通过configureWebpackchainWebpack来修改webpack的配置。
执行命令:

npm run build

这里修改了dest属性,输入目录为根目录下的_site文件夹。

在想要部署的Github库上创建gh-pages分支,然后将_site中的代码全部提交到这个分支上,之后过几分钟刷新浏览器即可看到效果。
如果库名为<USERNAME>.github.io可直接提交到当前库。

2.脚本部署

根目录新建deploy.sh文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd _site

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

将注释部分进行相应修改,运行即可。

此脚本可以搭配CI使用。

四、写在后面

vuepress支持自定义布局以及自定义主题,并且可以使用很多插件以及自定义插件,功能还是很丰富的,可以用来搭搭博客、写写文档或者搞点什么东西之类的,用起来还不错。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值