VuePress + GitHub Pages 生成静态网站

短命女 2022-01-25 15:20 334阅读 0赞

### 文章目录 ###

*   *   *  一、环境
         *  二、配置
         *  三、部署 （使用 Github Pages）

--------------------

[**VuePress官网**][VuePress]  
[**VuePress指南**][VuePress 1]

**VuePress** ：Vue 驱动的静态网站生成器

--------------------

### 一、环境 ###

Node.js 版本 >= 8

**全局安装 VuePress**  
npm install -g vuepress

**创建项目文件夹，进入项目文件夹，初始化项目**  
使用 npm init 或 npm init -y（默认yes）

**新建docs文件夹**  
docs文件夹作为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹

**在 docs 中创建 .vuepress 文件夹**  
在.vuepress中创建 public 文件夹和 config.js 文件  
![在这里插入图片描述][2019053011403344.png]

--------------------

### 二、配置 ###

**package.json**  
vuepress dev docs命令运行本地服务，通过访问http://localhost:8080即可预览网站，vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build即可。  
![在这里插入图片描述][20190530114134405.png]  
**config.js 中配置网站标题、描述、主题等信息**  
[**config.js更多配置**][config.js]

module.exports = { 
        title: '',
        description: '',
        head: [ // 注入到当前页面的 HTML <head> 中的标签
        ['link', { 
            rel: 'icon',
            href: '/favicon.ico'
        }], ],
        base: '/',
        // 这是部署到github相关的配置
        markdown: { 
            lineNumbers: false // 代码块显示行号
        },
        themeConfig: { 
            logo: '/logo.png',
            // displayAllHeaders: true // 默认值：false,显示所有页面的标题链接
            nav: [ // 导航栏配置
            { 
                text: '主页',
                link: '/'
            },
            // {text: 'language',
            // items: [
            // { text: 'Chinese', link: '/language/chinese' },
            // { text: 'Japanese', link: '/language/japanese' }
            // ]
            // },
            { 
                text: '文章',
                link: '/xxx/xx'
            },
            { 
                text: '博客',
                link: ''
            },
            { 
                text: 'GitHub',
                link: ''
            }],
            sidebar: 'auto',
            // 侧边栏配置
            sidebarDepth: 2,
            // 侧边栏显示2级
            lastUpdated: 'Last Updated',
    
            // sidebar: [
            // '/',
            // '/page-a',
            // ['/page-b', 'bbbbbbbbbb'],
            // ['/page-c', 'cccccccccc'],
            // { 
            // title: 'Group 1',
            // // collapsable: false,
            // children: [
            // '/page-a',
            // '/page-b',
            // '/page-c'
            // ]
            // },
            // { 
            // title: 'Group 2',
            // // collapsable: false,
            // children: [
            // '/page-b',
            // '/page-c'
            // ]
            // },
            // ],
        }
    };

**首页**  
默认的主题提供了一个首页（Homepage）的布局(用于这个网站的主页)。想要使用它，需要在你的根级 README.md的home: true，然后添加数据。

---
    home: true
    heroImage: /hero.png
    actionText: Get Started →
    actionLink: /guide/
    features:
    - title: Simplicity First
      details: Minimal setup with markdown-centered project structure helps you focus on writing.
    - title: Vue-Powered
      details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
    - title: Performant
      details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
    footer: MIT Licensed | Copyright © 2018-present Evan You
    ---

**PWA配置**  
……

完成了基础搭建后，就可以在docs目录下新建 .md 文件写文章了

**自定义容器**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbnFpYW45OTk_size_16_color_FFFFFF_t_70]  
**支持Emoji**  
[**Emoji**][Emoji]  
![在这里插入图片描述][20190530115335918.png]  
**Badge**

内置的组件，你可以在标题中，使用这个组件来为某些 API 添加一些状态：

### Badge <Badge text="beta" type="warn"/> <Badge text="0.10.1+"/>

![在这里插入图片描述][20190530120257899.png]  
更多配置详情请见 [**VuePress指南**][VuePress 1]

--------------------

### 三、部署 （使用 Github Pages） ###

新建仓库：[USERNAME.github.io][] （USERNAME必须是你 Github 的账号名称）

在项目根目录下创建 [deploy.sh][] 文件，内容如下：

# 确保脚本抛出遇到的错误
    set -e
    
    # 生成静态文件
    npm run build
    
    # 进入生成的文件夹
    cd docs/.vuepress/dist
    
    # 如果是发布到自定义域名
    # echo 'www.example.com' > CNAME
    
    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>  REPO=github上的项目
    # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages
    
    cd –

**设置package.json**

{ 
        "scripts": { 
            "deploy": "bash deploy.sh"
          },
    }

运行 `npm run deploy` 即可自动构建部署到github上

[VuePress]: https://vuepress.vuejs.org
[VuePress 1]: https://vuepress.vuejs.org/zh/guide/
[2019053011403344.png]: /images/20220125/c66106c69f9f4c7f908101a5aa6fca03.png
[20190530114134405.png]: /images/20220125/aa8ac46cff1d4d67863b1d4acbbf898f.png
[config.js]: https://vuepress.vuejs.org/zh/guide/basic-config.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbnFpYW45OTk_size_16_color_FFFFFF_t_70]: /images/20220125/2c096ed057324bb0b92d7d5653efcfdb.png
[Emoji]: https://www.webfx.com/tools/emoji-cheat-sheet/
[20190530115335918.png]: /images/20220125/4bb6139c0f174b709bebcd39a8338958.png
[20190530120257899.png]: /images/20220125/4d3623b7f8464f2fb67b04c7c2c08ef3.png
[USERNAME.github.io]: http://USERNAME.github.io
[deploy.sh]: http://deploy.sh