Reid

vuePress-theme-reco Reid    2018 - 2025
Reid Reid

Choose mode

  • dark
  • auto
  • light
TimeLine
分类
  • 后端
  • AI
  • 英文翻译
  • 运维
标签
我的GitHub (opens new window)
author-avatar

Reid

16

文章

25

标签

TimeLine
分类
  • 后端
  • AI
  • 英文翻译
  • 运维
标签
我的GitHub (opens new window)
  • 30分钟完成博客部署

    • 需求
      • 买买买
        • 域名
        • 服务器
      • 安装 Nginx
        • 配置 Nginx
          • 上传静态文件
            • 启动 Nginx
              • 域名解析
                • 总结

                30分钟完成博客部署

                vuePress-theme-reco Reid    2018 - 2025

                30分钟完成博客部署


                Reid 2020-01-01 Hexo Nginx 阿里云

                本篇文章假设你对 Nginx 和域名解析有一定的了解,所以很多技术的基础并不会细说。

                # 需求

                我觉得一个优秀的程序员一般都有写博客或记录的习惯,但写完的东西总得有个平台来展示呀,而作为比较有个性的程序员,我们当然是自己搭建一个静态网站。而搭建完则免不了要部署到服务器上去,本篇文章就是教大家最快的将自己的博客部署到服务器上去,让其他小伙伴都可以访问到你的网站。

                # 买买买

                首先就是买服务器和买域名,我的服务器是在阿里云 (opens new window)上买的,而域名是在GoDaddy (opens new window)上买的,因为说好的 30 分钟完成部署,所以咱们为了避开备案,域名就在国外买,国外的域名不需要备案就可以使用。

                # 域名

                域名的购买没啥好说的了,但还是简单讲一下。输入你想买的域名,我这里买的是.com类型的,这种域名稍微比较贵,所以大家可以买其他类型的。如果你的域名没有被别人注册的话,你就直接点击加入购物车去给钱就行了。
                image.png

                # 服务器

                服务器方面不要买大陆境内的,不然你的域名必须得备案,因为咱们的域名是国外买的,所以服务器也买国外的。阿里云(ECS (opens new window))就有境外的服务器,只要咱们不是干违法的事,用起来就没啥事。

                下面这些区域的服务器都可以用,不过大家要记得香港可是国内噢,只是这个地方比较特殊。
                image.png

                # 安装 Nginx

                买完服务器后就通过终端登录到服务器上去:

                ssh 你的服务器用户名@你的服务器公网ip
                

                登录进去后安装 nginx

                apt-get update & apt-get install -y nginx
                

                # 配置 Nginx

                安装完 Nginx 后就要进行相关的配置了,我们在/etc/nginx/conf.d目录下新建两个文件,文件名你怎么取都都行,别是中文就行。

                第一个文件,server_name上填上你的域名,记得不要带 www 噢,然后其他内容照搬就行,大家留意一下 root 里面的配置,待会会讲到。

                server {
                    listen 80;
                    server_name XXX.com;
                    root         /usr/share/nginx/frontend;
                    index        index.html;
                
                    gzip on;
                    gzip_disable "msie6";
                
                    gzip_vary on;
                    gzip_proxied any;
                    gzip_comp_level 6;
                    gzip_buffers 16 8k;
                    gzip_http_version 1.1;
                    gzip_min_length 256;
                    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
                
                    location / {
                        try_files $uri $uri/ /index.html =404;
                    }
                }
                

                第二个文件,server_name填上你的域名,带上 www,这里会将 www 的请求都转发到没带 www 的域名上。

                server {
                    listen 80;
                    server_name www.XXX.com;
                    rewrite  ^/(.*)$  http://super2god.com/$1 permanent;
                }
                

                # 上传静态文件

                Nginx 配置好之后,我们就要将博客的静态文件上传到服务器上去拉,我的博客用的是Hexo (opens new window),Hexo 会将博客的静态文件输出到一个目录里,我们通过scp命令进行上传即可:

                scp -r /博客静态文件目录/* 你的服务器用户名@你的服务器公网ip:/usr/share/nginx/frontend/
                

                以后博客有更新就直接将静态文件上传覆盖,至于为什么是/usr/share/nginx/frontend目录呢,因为我上面的 Nginx 配置的就是这个目录,如果你想改的话记得把配置里的 root 也改了。

                # 启动 Nginx

                上传完后启动 Nginx 就可以了,如果你已经启动了记得重启一下噢,不然配置不会生效。

                启动后你就可以通过服务器的 ip 进行访问,这时会看到这个:
                image.png

                # 域名解析

                域名解析也就是 DNS 解析拉,在 Godaddy 的控制台里找到你已经购买的域名,旁边就有一个 DNS 解析的入口。

                添加两条解析记录,都是 A 类型,名称一个是@,一个是 www,值就填上你服务器的公网 ip。
                image.png

                解析不会马上生效,有点延迟,你可以通过ping命令测试,如果通了就会看到你刚刚配置的 ip:
                image.png

                # 总结

                我就是通过这几个步骤半个小时内完成了整个博客的部署,当然,如果你之前没有买过域名、没有买过服务器、Nginx 不了解,那么你要花的时间就要多一些~过段时间我会写一篇关于 Hexo 搭建博客的文章,希望大家能喜欢~