基于vuepress搭建一个静态站点

最新推荐文章于 2024-07-25 15:47:20 发布

xhsdnn

最新推荐文章于 2024-07-25 15:47:20 发布

阅读量2.8k

点赞数 2

分类专栏：前端开发工具文章标签： vue vuepress 静态站点 blog docs

本文链接：https://blog.csdn.net/qq_26733915/article/details/90414260

版权

前端开发工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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所指定组件的自定义布局，ShowPanel为components中的自定义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: {
				// ...
			}
		}
	}
}

nav和sidebar和前文字段含义相同。

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

三、部署

这里只说一下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，所以也可以通过configureWebpack和chainWebpack来修改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 -

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