阿里云部署静态网站

0. 前言

• 属于记笔记三部曲的最后一步：
  • 第一步：通过Markdown记录笔记，选择适合自己的Markdown编辑器。
  • 第二步：将Markdown文件转换为网站，即选择适当的静态网站生成器。
  • 第三步：部署生成好的静态网站，并设置域名。
• 更方便的方式是将网站部署在Github Pages中，一般静态网站生成器都有这方面的工具。
• 本文介绍的是将静态网站部署在自己的云服务器（阿里云）上，并设置自己的域名。
  • 优点：自由度高，访问速度比Github Pages快多了。
  • 缺点：很麻烦，真的很麻烦。
  • 步骤：
    • 第一步：购买云服务器、域名。
    • 第二步：网站备案。
      • 服务器在国内的服务器，如果要绑定域名，就需要进行备案。
      • 因为Github部署在国外，所以不需要备案就可以直接指定域名。
    • 第三步：将博客、静态网站生成器部署到云服务器上。
    • 第四步：在云服务器上配置nginx/apache/tomcat等，展示静态网站。
• 本文重点关注第二步（阿里云网站备案）与第四步（nginx部署静态网站）。

1. 网站备案

• 阿里云上提供了网站备案服务，介绍了备案的步骤。
  • 
  • 
• 可以花钱请人帮忙，但我觉得完全没必要……
• 个人网站备案的步骤
  • 第一步：准备工作。
    • 准备好域名以及服务器ip
    • 身份证放在身边（好像不能用以前拍的图片，要现拍）
    • 为自己的网站取个名字，有一些要求，比如至少三个汉字、不能有叠字、不能出现“博客”这俩字等。
  • 第二步：进入阿里云，提交备案审核，分四步。
    • 基础信息：就是写自己的地址、名字、身份证号、域名。
    • 主办者信息：其实还是自己的信息。
    • 网站信息：其实就是网站名，好像还有一个ip？
    • 上传资料：立面写得很玄乎，其实就是身份证拍个照，自拍一段小视频就好了。此外，这部分是在阿里云手机app上完成。
      
  • 第三步：等阿里云审核，其实就是阿里云会给我们打电话，确认下信息，如果有填写错误的就会提出来。
    • 趣事，我与客服小姐姐的窒息功放（背景：之前给网站取名“清欢个人博客”）：
      • 客服姐姐：不能出现博客两个字。
      • 我：那就叫“清欢”。
      • 客服姐姐：不能少于三个字。
      • 我：那就叫“清欢欢”。
      • 客服姐姐：不能出现叠字。
      • 我：姐姐我错了，让我想想。。（内心：客服姐姐不知道一天碰到几次我这样的）
  • 第四步：备案局短信验证。根据短信提醒做就行了。
  • 第五步：耐心等待。

2. 阿里云部署静态网站

• 使用的工具：
  • 静态网站生成工具：vuepress（其实啥工具都一样）
    • 所谓静态网站生成器，就是会生成静态网站……
    • vuepress中使用的命令就是 npm run docs:dev
    • 所谓“生成的网站”，其实就是一个文件夹，里面有一堆js/html/css。
  • Web服务器：nginx
• 阿里云部署静态网站的实质就是配置nginx。

2.1. Nginx 的安装与常用命令

• 安装：我用的是Ubuntu，所以直接通过 sudo apt install nginx 安装。
• 常用命令：
  • 开启/关闭/重启：service nginx start/stop/restart
  • 查看nginx版本：nginx -v
  • 查看配置文件路径：nginx -t
    • 
  • 帮助：nginx -h

2.2. nginx 配置

• 查看配置文件路径：
  • 默认是在 /etc/nginx/nginx.conf 中
  • 可以通过 nginx -t 命令查看当前配置文件路径。
  • 也可以通过 nginx -h中看-c选项的默认值来查看。
• 重点关注一下 http 块中的 include 命令，看看自定义配置文件在哪里
  • 如果没有，也可以自己添加一句。
  • 比如，在我的配置文件中，就有一句 include /etc/nginx/conf.d/*.conf;，也就是说，自定义配置文件可以放到 /etc/nginx/conf.d文件夹下，名称已.conf结尾。
• 自己写配置文件主要有几个内容：
  • 设置端口，即listen
  • 需要映射的ip以及域名，即server_name相关，有多个就用空格分隔
  • 生成好的网站所在路径，即root与location后相对路径进行拼接
  • 入口文件，即index后的文件，有多个用空格分隔

    server {
        listen       80;
        server_name  47.92.88.222 yeahflash.com;
        location / {
            root /root/deploy_blogs/docs/.vuepress/dist;
            index index.html;
        }
    }

2.3. 采坑

• 现象：
  • 使用默认配置能够正常看到页面。
  • 静态网站放到 /usr/share/nginx/html 目录下能够正常显示。
  • 本地路径设置为 ~/path/to/dist 时就是404。
• 原因：
  • 权限问题……
  • 阿里云的ubuntu 18.04上，用户名是root，~路径就是 /root 路径
  • 该路径的权限是700，而nginx好像不是管理员启动，所以没有读写root的权限……