从零到一搭建自己的个人网站

本文知识简单的前端项目的部署，不涉及后台。
以 github action 为例 （CI/CD）
目前暂定项目为 demo （可自行调整）

环境

node 安装 （注意如果是 mac M1 的。版本固定安装为 14.17.0）

本地创建项目

npx create-react-app demo

github 创建 repository

创建名称为 demo

配置 Github 的公私钥

私钥在本地，公钥可以分配配置在 github上

本地代码提交到 github 上

git init
git add .
git commit -m 'a'
git remote add origin [email protected]:huiminxu/demo.git
git push -u origin master

购买服务器

可以在阿里云、腾讯云等购买云主机（我这购买的是 UCloud 的 ubuntu ）。
记住服务器的 用户名 和 密码 和 外网IP

登录服务器并生成公私钥

进入github demo 目录，点击右上角的设置，选择，secrets。
新建 名称： SSH_PRIVATE_KEY 值：服务器中设置的私钥值。

github 中创建 action

name: Test build and deploy site

on:
  push:
    branches: 
      - master

jobs:
  CI_CD:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2-beta
        with:
          node-version: 14
      - run: npm ci
      - run: npm run-script build

      - uses: wlixcc/[email protected]
        with:  
          username: '***'   #服务器的用户名
          server: '****' #服务器的外网IP
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} #引用之前创建好的secret
          local_path: './build/*'  # 对应我们项目build的文件夹路径
          remote_path: '***' 我们指定要把代码放置在服务器的什么目录下