VitePress个人博客构建及部署

使用VitePress构建以及使用Nginx部署

仓库初始化

# install
$ npm install -D vitepress
# init
$ npx vitepress init
# 初始换配置官方建议存储在docs文件夹下，文件多的需要，本博客没必要

构建结果目录结构

.
│ .vitepress
│  └─ config.js
│ api-examples.md
│ markdown-examples.md
│ index.md
└─ package.json

添加GIT忽略文件

node_modules
!*.md
.vitepress/cache
!*.json
.idea
!.vitepress/config.ts

修改核心配置文件

核心配置文件就一个文件=>.vitepress/config.ts文件 以下为全部配置

// 配置
import {defineConfig} from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
    // base: "./",
    // 图片真实路径是./public/img/logo.png，不使用public文件夹图片打包后不生效
    head: [['link', {rel: 'icon', href: '/img/logo.png'}]],
    title: "FollowYourHeart",
    description: "LearningNote",
    themeConfig: {
        logo: '/img/logo.png',
        // https://vitepress.dev/reference/default-theme-config
        nav: [
            {text: 'Home', link: '/'},
            {text: '博客构建', link: '/vite-press-build'},
            {text: 'EnvLearning', link: '/env'},
            {text: 'Guide', link: '/guide/'},
            {text: 'Config', link: '/config/'}
        ],
        // sidebar默认配置是数组格式，如果要支持默认配置和有目录的路由路径，需要改为对象格式，参开如下
        // sidebar: [
        //   {
        //     text: 'Examples',
        //     collapsable: false,
        //     items: [
        //       { text: 'Markdown Examples', link: '/markdown-examples' },
        //       { text: 'Runtime API Examples', link: '/api-examples' }
        //     ]
        //   },
        //   {
        //     text: 'EnvStudy',
        //     collapsable: false,
        //     items: [
        //       { text: 'linuxEnv', link: '/env' }
        //     ]
        //   }
        // ],
        sidebar: {
            // This sidebar gets displayed when a user
            // is on `guide` directory.
            "/": [
                {
                    text: 'Examples',
                    items: [
                        {text: 'Markdown Examples', link: '/markdown-examples'},
                        {text: 'Runtime API Examples', link: '/api-examples'}
                    ]
                },
                {
                    text: 'EnvStudy',
                    items: [
                        {text: 'LinuxEnv', link: '/env'}
                    ]
                }
            ],
            '/guide/': [
                {
                    text: 'Guide',
                    items: [
                        {text: 'Index', link: '/guide/'},
                        {text: 'One', link: '/guide/one'},
                        {text: 'Two', link: '/guide/two'}
                    ]
                }
            ],

            // This sidebar gets displayed when a user
            // is on `config` directory.
            '/config/': [
                {
                    text: 'Config',
                    items: [
                        {text: 'Index', link: '/config/'},
                        {text: 'Three', link: '/config/three'},
                        {text: 'Four', link: '/config/four'}
                    ]
                }
            ]
        },

        socialLinks: [
            {icon: 'Github', link: 'https://github.com/zouyaowen/freewheeling'}
        ],
        footer: {
            message: '<a href="https://beian.miit.gov.cn/" target="_blank">皖ICP备18026052号-2</a>',
            copyright: '关注公众号：北国故事'
        }
    }
})

博客部署

部署使用nginx，打包成dist目录后配置到对应的nginx目录即可，整体比较简单 默认打包命令是 npm run docs:build，也可以在package.json文件修改打包命令

Nginx安装

# 安装编译软件
yum install -y gcc-c++
yum install -y pcre pcre-devel
yum install -y openssl openssl-devel
yum install -y zlib zlib-devel

# 下载nginx软件
wget https://nginx.org/download/nginx-1.22.0.tar.gz

# 解压软件
tar -zxf nginx-1.22.0.tar.gz
cd nginx-1.22.0

# 配置nginx
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
# 构建和安装   
# 增加模块重新编译后make后替换编译产物nginx即可，make install 会重装
make && make install

# 配置环境变量
export PATH=/usr/local/nginx/sbin:$PATH
# 重新加载环境变量
source /etc/profile

# 查看Nginx配置是否正确
nginx -t

# 启动Nginx
nginx

Nginx配置文件修改

#user  nobody;
worker_processes  4;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  Application/octet-stream;

    #access_log  logs/access.log  mAIn;
    
    # 隐藏版本号
    server_tokens off;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;

    server {
        listen       80;
        server_name  freewheeling.top;
        location / {
            # 创建freewheeling存放页面
            root   freewheeling;
            index  index.html index.htm;
        }

        # 将请求转成https
        rewrite ^(.*)$ https://$host$1 permanent;
    }
    
    
    server {
        listen       443 ssl;
        server_name  freewheeling.top;
        ssl_certificate      /usr/local/nginx/freewheeling_conf/freewheeling.top.pem;
        ssl_certificate_key  /usr/local/nginx/freewheeling_conf/freewheeling.top.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        location / {
            # 此处存放打包后的dist内容
            root   /work/front_end/freewheeling/dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   freewheeling;
        } 
    }

}

配置文件修改后重新部署

nginx -s reload