# blog

**Repository Path**: dyjch/blog

## Basic Information

- **Project Name**: blog
- **Description**: 个人博客
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-14
- **Last Updated**: 2022-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dyjch的架构笔记

采用vuepress搭建个人博客

## 涉及技术

Git、Vue、Node、Flask、Shell

## 本地运行

1. 下载项目
2. npm install下载相关依赖
3. npm run docs:dev

## 项目部署

### 同步思路

采用第三方git方式进行同步，本地push.bat脚本进行推送，服务端启动flask服务监听更新请求进行文档更新，同时对config.js进行无效修改使得运行中的项目进行更新

### 部署过程

1. 前提条件
   
   自备图床、Git仓库（Gitee）、Linux服务器

2. 环境准备
   
   Windows和Linux上有Node、Npm、Python环境

3. Windows、Linux、Gitee进行项目绑定，即Git管理，并添加ssh公钥到Gitee

4. Linux将项目下的update.sh以及docs/.vuepress/refresh.sh添加运行权限，chmod 777即可

5. Linux上运行npm run docs:dev（博客，默认端口80）

6. Linux上运行python flask-syn.py（更新服务，默认端口30002）

7. 在Windows上的docs目录下进行编写markdown文档，完成后双击执行push.bat即可一键更新

8. 其它问题咨询qq：643481957，备注：Dyjch的架构笔记

## vuepress工具类介绍

在.vuepress中自定义了get-sidebar-by-dir工具进行博客目录解析，并在config.js中引入作为sidebar即可

## 注意点

1、图片路径配置策略

**建议使用云端的图床存储**

若本地存储，**必须**遵循如下策略

> 在Typora中设置图片相对路径为./{filename}时，**文档中图片路径不是./{filename}而是{filename}/**
> 
> 但是vuepress中目录必须带上./，这将导致使用Typora作为markdown编辑器时，设置图片路径为./，将会在vuepress中无法显示，**因此在Typora中设置图片路径为../images解决这个bug，注意由于解析vuepress目录中指定了图片资源路径为images，因此Typora路径必须设置为../images且所有文档所在的文件夹名均不能为images**
> 
> **这样设置将导致在windows上写博客时，其中的图片资源都会在上一级目录，可能会造成误删等后果，所以建议将所有博客写在vuepress的docs目录下，作为唯一的博客文件目录**
> 
> > 例如：因为当前文件位于项目的根目录，若在文件内插入图片，则会在上级目录存储，造成无法预料的后果，因此该文件中不建议插入图片。

2、文档书写建议

一个md文件在侧边栏只会展示**一个**一级标题和所有**下级**标题，因此一个md文件只能写一个一级标题，这也很符合规范

3、侧边栏标题展示深度

![](/Users/bytedance/Library/Application%20Support/marktext/images/2022-05-04-13-32-54-image.png)