发表更新9 分钟读完 (大约1307个字)

GitHub Pages + VuePress 构建静态网站

GitHubPages 搭建

GitHub Pages，由 GitHub 网站服务，为众多 GitHub 用户提供了良好的服务器部署环境以及域名的工具。使用用户名创建一个名为 username.github.io 的仓库即可，如 veenveenveen.github.io，然后通过VuePress搭建静态网站后进行部署。

VuePress 搭建

1. VuePress简介

VuePress 是以 Vue驱动的简约静态网站生成工具，通过编写markdown文档并将文件编译为html文件来构建静态网站。

2. 环境搭建

新建文件夹(以Desktop/Web/VeenWeb为例)，在该文件夹下创建package.json文件，内容如下

1
2
3
4
5
6
7
8
9
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^0.14.8"
  }
}

然后安装vuepress,执行下面的命令会生成node_modules依赖包

1
npm install -D vuepress

创建docs目录并在该目录下创建一个markdown文件

1
2
3
4
# 创建一个 docs 目录
mkdir docs
# 切换到docs目录创建一个 markdown 文件
echo '# Hello VuePress' > README.md

此时可以运行下面命令查看效果 ( localhost:8080 )

1
npm run dev

此时只显示了”Hello VuePress”的一个带搜索框的页面，此时说明环境已经搭建完成。

An image

3. 目录结构

笔者的目录结构如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
VeenWeb                     - 主工程目录
└─ docs                     - 主要的开发目录
   └─ .vuepress             - vuepress配置目录
      └─ dist               - 静态资源默认生成目录
      └─ public             - 公共资源目录
         └─ imgs                   
            ├─icon.png          
      ├─ config.js          - js配置文件
      ├─ override.styl      - css覆盖，配置显示颜色等样式
      ├─ style.styl         - 同上
   └─ about                 - 导航栏（关于）
   └─ article               - 导航栏（文章）
      └─ essay              
      └─ other          
      └─ technology         
   └─ home                  - 导航栏（首页）
   ├─ README.md             - 网站默认首页
├─ node_mudules             - node依赖包
├─ deploy.sh                - 自动部署脚本
├─ package.json             - webpack 配置文件

4. 简单配置

运行下面的命令生成静态资源，会在docs目录下生成.vuepress目录，该目录默认是隐藏的，可以使用ls -al查看

1
npm run build

.vuepress目录下创建配置文件config.js，该文件是
配置 VuePress 站点的基本文件。文件的一些内容如下，更加详细的配置可以参考VuePress官网。

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    // 左上角标题
    title: 'veen',
    // 描述
    description: ' ',
    // 头部部署，网页小图标
    head: [
        // ico 配置
        ['link', { rel: 'icon', href: '/icon.png' }]
    ]
}

5. 主题配置

  • 主页 要配置主页，需要修改根目录的 README.md 文件，如 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    --- 
    home: true
    <!-- heroImage:  -->
    actionText: Get Started →
    actionLink: /home/
    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: 文档库 | Copyright © 2018 veenveenveen
    ---

    int main() { 
        while(alive) {
            study();
        } 
        return 0;
    }
    此时看到的内容如下

An image

  • 导航栏配置 可以通过 themeConfig.nav 配置导航栏
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    module.exports = {
        // 主题部署
        title: 'veen'
        description: ' ',
        head: [...],
        themeConfig: {
            /** 
             * 右侧导航条
             * text - 显示字段
             * link - 链接：注意前后带 / 符号
             */
            nav: [
                {
                    text: '主页',
                    link: '/home/'
                },
                /**
                 * 多级菜单
                 * 开头 text 为一级标题
                 * 数组内 text 为二级标题
                 * link 为链接，注意带 /
                 */
                {
                    text: '文章',
                    items: [
                        {
                            text: '技术',
                            link: '/article/technology/'
                        },
                        {
                            text: '随笔',
                            link: '/article/essay/'
                        },
                        {
                            text: '其他',
                            link: '/article/other/'
                        }
                    ]
                },
                {
                    text: '关于',
                    link: '/about/'
                    // link: '/about/'
                },
                // 链接到网站
                {
                    text: 'Github',
                    link: 'https://www.github.com/veenveenveen'
                },
            ]
        }
    }
    效果图如下

An image

  • 侧边栏配置 可以通过 themeConfig.sidebar 配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    module.exports = {
        // 主题部署
        title: 'veen'
        description: ' ',
        head: [...],
        themeConfig: {
            nav: [...],
            /**
             * 侧边栏配置：侧边栏组
             */
            sidebar: {
                // ------- 文章 -------

                // 侧边栏在 /article/technology/ 目录上
                '/article/technology/': [
                    {
                        title: '技术',
                        collapsable: true,
                        children: [
                            ['', 'README']
                        ]
                    },
                    {
                        title: '开发',
                        collapsable: true,
                        children: [
                            ['one', 'one'],
                            ['two', 'two']
                        ]
                    },
                    {
                        title: '前端',
                        collapsable: true,
                        children: [
                            ['three', 'three'],
                        ]
                    }
                ],
                // 侧边栏在 /article/essay/ 目录上
                '/article/essay/': [
                    {
                        title: '随笔',
                        collapsable: false,
                        children: []
                    },
                    ['', 'README']
                ],
                // 侧边栏在 /article/other/ 目录上
                '/article/other/': [
                    {
                        title: '其他',
                        collapsable: false,
                        children: []
                    },
                    ['', 'README']
                ],

                // ------- 关于 -------

                // 侧边栏在 /about/ 目录上
                '/about/': [
                    {
                        title: '关于',
                        collapsable: false,
                        children: []
                    },
                    ['', '技术文档'],
                    ['WebSetup', '搭建步骤'],
                    ['MarkDown', 'Markdown介绍'],
                    ['Question', '问题解决']
                ]
            },
            // 侧边栏自动显示的深度  默认深度是 1，它提取 h2 标题。将其设置为 0 将禁用标题链接，最大值为2，同时提取 h2 和 h3 标题。
            sidebarDepth: 1
        }
    }
    侧边栏效果图

An image

6. 部署

上面介绍了环境搭建，配置导航栏，侧边栏，具体markdown的编写就要自己来写了。
部署脚本deploy.sh如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
# 自动部署脚本  

# 构建
npm run build
# 导航到构建输出目录
cd docs/.vuepress/dist

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

# 推到你仓库的 master 分支
git push -f git@github.com:veenveenveen/veenveenveen.github.io.git master

每次编写完后直接在主工程目录下执行./deploy.sh即可。（先检查一下deploy.sh是否可执行，如果无法执行，可以使用命令chmod 777 deploy.sh修改。）

  • 参考文档

https://pages.github.com/

http://caibaojian.com/vuepress/

https://github.com/LiangJunrong/document-library/blob/master/other-library/Website/GithubPages/DocumentLibrary.md#chapter-one

GitHub Pages + VuePress 构建静态网站

https://veenveenveen.github.io/2021/03/26/about/GitHub Pages + VuePress 构建静态网站/

作者

吃饭不加糖

发布于

2021-03-26

更新于

2021-03-27

许可协议

#

评论

最新文章

分类

标签

ASR3
Flutter1
VuePress1
gitalk1
hexo2
web2
×