使用Vuepress + Gitee 搭建静态网站

野性酷女 2023-02-23 12:12 22阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

# [VuePress][] #

# Vue 驱动的静态网站生成器 #

###### 请确保你的 Node.js 版本 >= 8.6。 ######

#### 全局安装`npm install -g vuepress` ####

#### 创建项目文件夹`mkdir vuepress-demo` `cd vuepress-demo` ####

#### 初始化项目 `npm init -y` ####

#### 改写package.json ####

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

![在这里插入图片描述][20200708081926354.png_pic_center]

#### 圈起来的都是自定义的，不一定是项目必需要的 ####

#### 修改 config.js ####

module.exports = { 
        title: '极.简',
        description: '发现生活的美',
        base: '/',
        head: [
            ['link', { 
                rel: 'icon',
                href: `/favicon.ico`
            }]
        ],
        themeConfig: { 
            nav: [
                {  text: '首页', link: '/' },
                {  text: '成果', link: '/guide/' },
                { 
                    text: 'Languages',
                    items: [
                        {  text: 'Chinese', link: '/language/chinese' },
                        {  text: 'English', link: '/language/english' }
                    ]
                },
                {  text: 'External', link: 'https://www.baidu.com' },
            ],
            sidebarDepth: 2,
            sidebar: [
                { 
                    title: '网上地址',
                    collapsable: false,
                    children: ['/guide/']
                }
            ]
        },
        dest: './docs/.vuepress/dist',
        ga: '',
        evergreen: true,
    }

#### 修改README.md ####

---
    home: true
    heroImage: /favicon.ico
    actionText: 极.简 →
    actionLink: /guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2018-present xxxxxx
    ---

#### 运行`npm run docs:dev` ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

###### 每个文件夹下的README.md就是当前目录的内容； ######

## This is guide
    content...
    
    ### title3
    content...
    
    ### title3-01
    
    ## small title
    content...

###### 通过config.js文件配置相应导航 ######

themeConfig: { 
            nav: [
              {  text: 'Home', link: '/' },
              {  text: 'Guide', link: '/guide/' },
              { 
                text: 'Languages',
                items: [
                  {  text: 'Chinese', link: '/language/chinese' },
                  {  text: 'English', link: '/language/english' }
                ]
              },
              {  text: 'External', link: 'https://www.baidu.com' },
            ]
        }

###### 配置侧边栏 ######

sidebarDepth: 2,
    sidebar: [
      { 
        title: 'Guide',
        collapsable: false,
        children: ['/guide/']
      }         
    ]

## 使用 Gitee ##

###### 打包`npm run docs:build` ######

###### 将生成的 dist 目录下的文件复制一份 ######

#### 新建仓库，名字命名为自己 gitee 的用户名，点击创建， ####

###### `git clone '项目地址'` 这时粘贴上自己刚刚复制好的文件 ######

###### `git add .` `git commit -m 'init blog'` `git push`, ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]  
我这里已经开启了。没有开启点击按钮即可部署。

#### [http://suiboyu.gitee.io/][http_suiboyu.gitee.io] ####

这样就可以了。

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

#### 参考文章 ####

###### https://blog.csdn.net/huaairen/article/details/103133685 ######

###### https://www.jianshu.com/p/2ac5727947cd ######

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200707134423654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx,size_16,color_FFFFFF,t_70#pic_center
[VuePress]: https://www.vuepress.cn/
[20200708081926354.png_pic_center]: https://img-blog.csdnimg.cn/20200708081926354.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200708082244884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200708083456224.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200708083056116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx,size_16,color_FFFFFF,t_70#pic_center
[http_suiboyu.gitee.io]: http://suiboyu.gitee.io/