部署个人静态博客分几步？

最新推荐文章于 2024-03-12 20:30:10 发布

PeaJow

最新推荐文章于 2024-03-12 20:30:10 发布

阅读量144

点赞数

文章标签：前端 docker nginx

本文链接：https://blog.csdn.net/weixin_54487074/article/details/129649888

版权

一、白嫖博客源码

在GitHub或者Gitee上download一套自己喜欢的源码(符合自己技术栈)

如果你会一点vue，这里推荐https://github.com/airene/vitepress-blog-pure，很不错

对目录的理解：

.vitepress
- them：和vue的src同理
  - index.js：等同于vue3的Main.ts
    - Layout：主页
    - component：绑定组件到全局（后续/pages/*.md会用到）
- config.js：配置文件（修修改改，主要是标题、描述和原有的评论功能）
pages：Headers栏
- title：设置标题，会和在config.js中的title一起使用
- <***/>：引用绑定的组件
posts：存放文章的地方(*.md)
- -date、title、tags、description- 在网页上不显示（也显示），主要是配置作用
public、.gitignore、package.json、tsconfig.json、…（有用，但不一定需要更改）

二、Docker配置文件

使用docker部署，且考虑到后续"可能"会添加其它项目，就使用docker-compose进行配置，后续可以多项目同时跑

主目录为/site，博客目录为/site/vitepress
1./site/docker-compose.yml

version: "3"
services:
  blog:
    build:
      context: ./vitepress
      dockerfile: Dockerfile
    container_name: VitePress
    ports:
      - "80:80" # out:in

2./site/vitepress/Dockerfile

使用node npm对项目进行构建，nginx对其进行代理

FROM node:18.14.0
COPY ./ /app
WORKDIR /app
RUN npm config set registry https://registry.npmjs.org
RUN npm install
RUN npm run build

FROM nginx:1.15.2-alpine
RUN mkdir /app
COPY --from=0 /app/.vitepress/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

3./site/vitepress/nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen  80;
    server_name localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

三、上传代码到Gitee

注册Git账号且创建仓库

初始化

git config --global user.name "***"
git config --global user.email "***.gitee.com"
git init

关联仓库和提交
```
git add .
git commit -m '描述和签名'
git remote add origin https://gitee.com/***.git
git push -u origin "master"
```
对git的了解不多，且之前使用时笔记做的不是很足，有遗漏，后续再补？也可以用别的方法将代码上传到服务器

四、服务器部署

下载代码

git clone https://gitee.com/***.git（如果仓库是不公开的，还需要填入账号密码）
进入项目

cd site
运行docker

需要安装docker和docker-compose
```
# 运行
sudo docker-compose up -d
# 查看正在运行的容器
sudo docker ps -a
```
不出意外的话，博客就跑起来了，正常访问服务器地址80端口
（怎么可能不出意外呢~）