ppBlog-个人主页

为什么要做这个?

家里面有树莓派、NAS需要开内网穿透，所以租了一个服务器 但这样未免也太浪费了，于是就搭了一个网页，用来记录一下日常

1. 整体介绍

这个项目即本网站，使用了VuePress-Hope主题 在部署方面，并没有使用该主题推荐的挂在git上的方式，而是通过Docker+Nginx打包的部署方式

2. Nginx如何部署VuePress-Hope

1. 首先，修改config.ts的base

export default defineUserConfig({
    base: "/",

    lang: "zh-CN",
    title: "pptg",
    description: "pptg的个人页",
    theme,

    // 和 PWA 一起启用
    // shouldPrefetch: false,
});

2. 准备Docker打包脚本, 这里我并没有配置nexus仓库，如果有仓库可以直接push到仓库。同时，也没有配置jenkins，如果有jenkins可以在服务器上自行打包、构建、部署

# 当前版本
version=0.0.4
# 远程部署服务器地址, 保密一下
host=xx.xx.xx.xx
# 打包静态文件
npm run build
# 打包成x86的镜像
docker buildx build --platform linux/amd64 -f Dockerfile -t pp-web-site:$version .
# 保存并传输镜像到服务器
docker save -o pp-web-site.tar pp-web-site:$version
scp pp-web-site.tar root@$host:/home/pptg/pp-web-site/

3. Dockerfile如下, 主要是拷贝了一些nginx配置和静态文件到镜像内，最后放开端口，并添加启动CMD

FROM nginx:1.24
# Change TimeZone
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone

COPY ./src/.vuepress/dist/ /usr/share/nginx/html/
COPY ./nginx/nginx.conf /etc/nginx/
COPY ./nginx/http.conf /etc/nginx/conf.d/
COPY ./nginx/ssl /etc/nginx/ssl/

RUN rm /etc/nginx/conf.d/default.conf

EXPOSE 80 443

CMD ["nginx","-g","daemon off;"]

4. 最后放一下nginx的配置, 这里主要是重定向了HTTP到HTTPS，另外就是指向了网页

# HTTP
server {
    listen 80;
    # 重定向HTTP到HTTPS
    server_name impptg.com;
    return 301 https://$server_name$request_uri;
}

# HTTPS
server {
    listen 443 ssl;

    ssl_certificate /etc/nginx/ssl/impptg.com.pem;
    ssl_certificate_key /etc/nginx/ssl/impptg.com.key;
    ssl_session_timeout 10m;
    ssl_session_cache shared:SSL:10m;

    client_max_body_size 500m;

    proxy_connect_timeout 600;
    proxy_send_timeout 600;
    proxy_read_timeout 600;
    send_timeout 600;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

3. 如何在VuePress-Hope上使用iconfont

VuePress-Hope官网上给出了方法但并没有详细的代码配置，这里贴出我的配置

主要就是配置了资源的css和前缀

export default hopeTheme({
    // ...
    iconAssets: "//at.alicdn.com/t/c/font_4528826_v3241awa2p.css",
    iconPrefix: "iconfont icon-",
    // ...
})