Vdoing主题建站

# 前言

🌈首次建站 : 19年开始使用 hexo建站 , 发现当中有很多缺陷不适合系统性阅读文章 , 太过于个性化 , 也没有找到相关较好的主题 , 于是搁置流放了....

🦜建站搁置 : 在学习Vue的时候 , 查阅官方文档时 , 嘿 , 发现也挺适合知识库存储(跟语雀差不多) ! 是采用 VuePress (opens new window) 开发的 , 也有了打算做的念头 . 在那期间也忙于实习 , 然后又鸽了一阵子 ...

🚩回归初衷 : 直到今年(23年) , 无意间发现有某个博客采用 vuepress-theme-vdoing (opens new window) , 进去看了阵子 .... 简直是 VuePress (opens new window) 的优化版啊 , 大多配置什么的都不需要配 , 只要按照约定编写文档即可 , 开箱即用什么的 . 于是走起了开坑之旅..

如果对主题配置有要求 , 不建议使用 . 进开源看演示指不定喜欢上呢💓

主题基于 : VuePress (opens new window)

采用主题 : vuepress-theme-vdoing (opens new window)

# 应用

# 远端仓库

搭建在 GitHub / Gitee 仓库 , 前提需要建立设备SSH连接

大致步骤 :

跑一遍官方指南 , 所有!
按照约定更改 (opens new window) 文章
运行 ==npm run deploy== (查看以下配置)
在GitHub配置仓库 , Settings -> Pages -> 构建部署 (指定分支..)
首次访问(里面会有个访问连接访问即可)

新GitHub默认分支更改为 main , 操作可按照以下配置

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件 / 生成覆盖
npm run build

# 缓存目录
rm -rf docs/.vuepress/gitTemp
mkdir -p docs/.vuepress/gitTemp
cd docs/.vuepress/gitTemp
git init
# 远程连接
git remote add origin git@github.com:Bozhu12/Blog.git
# 获取远程分支
git fetch origin
# 切换分支
git checkout main
# 拷贝(覆盖)
cp -rf ../dist/* ./
# 自定义域名 (没有则注释)
echo 'www.bozhu12.cc' > CNAME
# git add --all 有等于 git add . (兼容更多版本)
git add .
git commit -m "deploy"
git push -f origin main
# 删除
cd ..

rm -rf gitTemp

# Linux服务器

采用Nginx提供外部访问 , 一键远端发布功能

前置要求

与远端建立SSH连接 , 点击跳转
防火墙/安全组开放 80/443 端口
自行域名解析
本地机必须安装有git (需要bash环境跑脚本)

远端操作

安装nginx

新建nginx配置文件 nginx/conf.d/blog.conf (注意域名) (配置完后需要重启)

server {
    listen 80;
    server_name www.bozhu12.cc;

    # SSL 配置 5-13行
    listen 443 ssl;
    
    ssl_certificate      /etc/nginx/cert/www.bozhu12.cc.pem;
    ssl_certificate_key  /etc/nginx/cert/www.bozhu12.cc.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        if ($host = 'bozhu12.cc') {
            rewrite ^/(.*)$ $scheme://www.bozhu12.cc/$1 permanent;
        }
        root /myData/blog;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

server {
    listen 80;
    server_name bozhu12.cc;
    return 301 $scheme://www.bozhu12.cc$request_uri;
}

域名解析 (自行百度 , 以下是我个人的解析)
```
www.bozhu12.cc ==> IP
bozhu12.cc ==> IP
```
SSL文件根据配置的文件下载 , 上传到配置的位置即可 (可选)
创建前端文件目录 /myData/blog , 写个h5的index.html文件测试
访问域名测试即可

本地脚本发布

在项目根目录创建 deployLinux.sh脚本文件

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件 / 生成覆盖
npm run build

echo "服务器上传"
cd docs/.vuepress/dist
pwd

# 使用scp命令上传文件夹，并覆盖已存在的文件
# scp -r [本地目录] [远端用户名@远端IP地址:远端文件夹]
scp -r ./ root@xxxxxx:/myData/blog

read -p "点击任意键关闭"

在项目根目录测试上传 (首次测试不建议双击文件上传)

# cmd 进入 bash环境
bash
# 执行脚本
bash deployLinux.sh

# 右键选择 Git Bash here
bash deployLinux.sh

// Make sure to add code blocks to your code group

上传成功 , 将此脚本文件另建 快捷方式 , 下次上传只需脚本一键发布即可

# 远端SSH通信

意图 : 脚本执行无需密码直接访问通信

本地生成SSH公钥 , 点击跳转 (opens new window) (生成 id_rsa.pub文件)
远端 , 将 id_rsa.pub文件的内容复制到 /root/.ssh/authorized_keys文件
本地通信ssh测试成功即可 . 以下cmd通信测试
```
# ssh [用户名@远端IP]
ssh user@192.168.1.100
```

ssh通信自行了解点击跳转 (opens new window)

# 域名 (收费)

博主采用阿里云配置 , 其他平台配置差异不大

假设 :

GitHub账号 : Sancan12
域名 : blog.bozhu12.cc

大致步骤 :

购买域名
域名解析 (自选二级域名)

记录类型主机记录(二级域名) 记录值 (注意名称)

CNAME blog Sancan12.github.io
在GitHub配置仓库 , Settings -> Pages -> Custom domain (填写配置的域名)
域名访问测试 https://blog.bozhu12.cc

记录类型	主机记录(二级域名)	记录值 (注意名称)
CNAME	blog	Sancan12.github.io

加载可能没有那么块需要等待10min左右

# SSL (免费)

博主采用阿里云配置 , 其他平台配置差异不大

假设 :

GitHub账号 : Sancan12
域名 : blog.bozhu12.cc

大致步骤 :

进入 SSL证书控制台 , 并实名认证
创建证书 , SSL证书 -> 免费证书 -> 创建证书 -> 申请证书

申请配置 , (选项形式呈现)

证书绑定域名: blog.bozhu12.cc
密钥算法:RSA
SCR生成方式:系统生成

申请后会得到主机记录,记录类型,记录值 , 需要域名逐一配置
下载证书 (证书到手 , 其他平台只需配置即可)

使用方式 :

运行服务器配置 Nginx
在GitHub仓库静态访问 , 在CDN配置

# CDN(免费)

博主采用七牛云配置 , 其他平台配置差异不大

免费 , 但提速有限 , 国内响应平均 4秒内

假设 :

GitHub账号 : Sancan12
域名 : blog.bozhu12.cc

大致步骤 :

SSL控制台 -> 上传证书 -> 下载证书 , CV内容即可 (分别有证书内容/私钥)
CDN控制台 -> 域名管理 -> 添加域名
填写配置 (下图
配置域名 CNAME记录即可
在网上找些网站平测试

以上内容仅限做引导说明 , 如有问题评论区讨论吧

#博客搭建

← 克服表达 VuePass评论功能→