VITAL LAB

Appearance

​


Vitepress 创建网页 ​

参考链接 首先要安装nodejs

bash
sudo apt install nodejs
sudo apt install npm

创建项目

bash
mkdir blog
cd blog
conda create -n blog nodejs
conda activate blog
npm init -y

# 安装vitepress，需要一段时间，耐心等待
npm add -D vitepress

# 安装Latex插件以解析公式
npm install markdown-it-mathjax3 -D

# 安装css预处理器
npm install -D sass

# cli向导
npx vitepress init

# 为latex插件修改config.js

# 启动服务，以下命令同npx vitepress dev docs
npm run docs:dev

# 构建项目，构建的结果存储在docs/.vitepress/dist下
npm run docs:build

# 预览网页
npm run docs:preview

Vitepress 自定义主题 ​

在.vitepress/下创建theme文件夹以及如下文件

bash
theme
├── custom.css
└── index.js
config.js

我的custom.css文件内容如下

css
:root {
    /* hero标题渐变色 */
    --vp-home-hero-name-color: transparent;
    --vp-home-hero-name-background: -webkit-linear-gradient(
      60deg,
  rgb(255, 211, 110),
  rgb(71, 246, 255)
    );
  
    /*hero logo背景渐变色 */
    --vp-home-hero-image-background-image: linear-gradient(
      90deg,
  rgba(255, 211, 110, 0.6) 50%,
  rgba(71, 246, 255, 0.6) 50%
    );
    --vp-home-hero-image-filter: blur(40px);
  }

tips: vitepress官方仓库中的vars.css定义了可以覆盖的默认变量。要定位某个按钮的变量，可以通过修改部分颜色参数，确定什么颜色变量会影响该按钮，再去看哪个button调用了该颜色变量即可

index.js文件内容如下

js
import DefaultTheme from "vitepress/theme";
import "./custom.css";
 
export default {
  ...DefaultTheme,
  NotFound: () => "404", // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from createApp()
    // router is VitePress' custom router (see `lib/app/router.js`)
    // siteData is a ref of current site-level metadata.
  },
};

此外还需要在config.js中做修改，我的config.js内容如下

js
import mathjax3 from 'markdown-it-mathjax3';

const customElements = [
  'math',
  'maction',
  'maligngroup',
  'malignmark',
  'menclose',
  'merror',
  'mfenced',
  'mfrac',
  'mi',
  'mlongdiv',
  'mmultiscripts',
  'mn',
  'mo',
  'mover',
  'mpadded',
  'mphantom',
  'mroot',
  'mrow',
  'ms',
  'mscarries',
  'mscarry',
  'mscarries',
  'msgroup',
  'mstack',
  'mlongdiv',
  'msline',
  'mstack',
  'mspace',
  'msqrt',
  'msrow',
  'mstack',
  'mstack',
  'mstyle',
  'msub',
  'msup',
  'msubsup',
  'mtable',
  'mtd',
  'mtext',
  'mtr',
  'munder',
  'munderover',
  'semantics',
  'math',
  'mi',
  'mn',
  'mo',
  'ms',
  'mspace',
  'mtext',
  'menclose',
  'merror',
  'mfenced',
  'mfrac',
  'mpadded',
  'mphantom',
  'mroot',
  'mrow',
  'msqrt',
  'mstyle',
  'mmultiscripts',
  'mover',
  'mprescripts',
  'msub',
  'msubsup',
  'msup',
  'munder',
  'munderover',
  'none',
  'maligngroup',
  'malignmark',
  'mtable',
  'mtd',
  'mtr',
  'mlongdiv',
  'mscarries',
  'mscarry',
  'msgroup',
  'msline',
  'msrow',
  'mstack',
  'maction',
  'semantics',
  'annotation',
  'annotation-xml',
  'mjx-container',
  'mjx-assistive-mml',
];

export default {
  // extends: DefaultTheme,
  lastUpdated: true,
  head: [
    // 添加标签页
    ['link', { rel: 'icon', href: '/logo.ico'}]
  ],
  markdown: {
    config: (md) => {
      md.use(mathjax3);
    },
  },
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => customElements.includes(tag),
      },
    },
  },
  // 站点级选项
  title: 'title',
  description: 'description',
  themeConfig: {
    logo:'logo.ico',
    sidebar: [
      {
      text: '章节1', link: '/path/to/index',
      items:
      [                    
      { text: 'text1', link: '/path/to/text1' },
      { text: 'text2', link: '/path/to/text2' },
      ]
      },

      {
      text: '章节2', link: '/path/to/index',
      items:
      [                    
      { text: 'text3', link: '/path/to/text3' },
      ]
      },
    ]
  }
};

Nginx部署 ​

bash
# 安装nginx
sudo apt install nginx

# 启动nginx，输入ip或域名打开
nginx

# 查看所有80端口占用
lsof -i :80

# 删除80端口占用进程
kill <pid>

# 配置nginx
sudo vim /etc/nginx/conf.d/default.conf

# default.conf修改成如下内容
server{
    listen 80;  # 指定端口，nginx默认端口为80
    server_name <网站ip或域名1> <网站ip或域名2> <网站ip或域名3>;  # 指定域名 or IP
    location / {
        root /path/to/dist;  # 指定静态网站根目录，该dist为vitepress生成的静态文件，
        index index.html;  # 指定默认访问文件
    }
}

# 用scp把本地网页文件上传到服务器
scp -r ./.vitepress/dist root@<服务器ip>:/path/to/(dist)

或者也可以用rsync.sh脚本同步文件，写法如下

bash
#!/bin/bash
rsync -av --delete /path/to/dist root@<服务器ip>:/path/to/(dist) # 需要注明的是，本地的/path/to/dist最后不要加"/", 远程的/path/to/(dist)的"dist"直接写到父目录，即"/path/to/"即可

另外，为了避免nginx缓存，需要将nginx.conf中的sendfile设置为off, 之后重新启动nginx服务

bash
nginx -s reload

以下给出一个rsync.sh脚本参考，以下脚本可以同时同步到两个服务器上

bash
#!/bin/bash
rsync -av --delete /path/to/dist root@<服务器1>:/path/to/(dist)
rsync -av --delete /path/to/dist root@<服务器2>:/path/to/(dist)

# 定义远程服务器和命令
REMOTE_HOST1="root@<服务器1>"
RELOAD_CMD1="nginx -s reload"

# 在远程服务器上执行 nginx -s reload
echo "在idbike.top上执行 nginx -s reload..."
ssh "$REMOTE_HOST1" "$RELOAD_CMD1"

# 检查命令是否执行成功
if [ $? -eq 0 ]; then
    echo "nginx 重载成功！"
else
    echo "nginx 重载失败！"
fi

# 定义远程服务器和命令
REMOTE_HOST2="root@<服务器2>"
RELOAD_CMD2="nginx -s reload"

# 在远程服务器上执行 nginx -s reload
echo "在idbike.top上执行 nginx -s reload..."
ssh "$REMOTE_HOST2" "$RELOAD_CMD2"

# 检查命令是否执行成功
if [ $? -eq 0 ]; then
    echo "nginx 重载成功！"
else
    echo "nginx 重载失败！"
fi

SSL证书配置 ​

首先要在服务商处获得.crt和.key文件 将相关文件放入服务器文件夹后，修改default.conf文件为如下形式

c
server {
    listen 443 ssl;
    server_name <网站ip或域名1> <网站ip或域名2> <网站ip或域名3>;
    ssl_certificate  /path/to/file.crt;
    ssl_certificate_key /path/to/file.key;

    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    location / {
        root /path/to/dist;
        index index.html;
    }
}

server {
    listen 80;
    server_name <网站ip或域名1> <网站ip或域名2> <网站ip或域名3>;
    rewrite ^/(.*)$https://{域名}:443/$1 permanent;
}

自签SSL证书 ​

在搭建网站的过程中，通常需要配置SSL证书，以https协议访问网站。但是，SSL证书需要购买，免费的90天有效。

因此，如果只是内网或者网站的测试环节，完全可以选择自签SSL证书。

这里选择openssl来生成证书。

bash
mkdir /opt/cert
cd /opt/cert

# 生成server.key (私钥)
openssl genrsa -out server.key 2048

# 基于server.key 生成 server.pub (公钥)
openssl rsa -in server.key -pubout -out server.pub

# 生成证书
openssl req -new -x509 -key server.key -out server.crt -days 999999

# 备份nginx配置文件
cd /etc/nginx
cp nginx.conf{,.bk}

# 之后，修改nginx.conf中的 ssl_certificate 和 ssl_certificate_key 为 /opt/cert/server.crt 和 /opt/cert/server.key
# 取消include，location，error_page等nginx配置的注释