使用Vultr搭建个人主页

发表于 | 分类于 ，

1. 概述

  • 申请域名
  • 购买VPS
  • 环境配置
  • 个人网站部署
    • 静态网站
    • PHP网站

2. 申请域名

域名是IP的别名。一般而言，我们想要访问一个站点，并不会直接输入IP，而是输入域名来访问。例如，想要访问Google站点的话，只需在浏览器的地址栏内输入”www.google.com”即可。

域名需要自行付费申请。一般而言，.com是主流域名，价格稍贵。其他新兴域名，例如.cc等，便宜。申请的服务商也很多，诸如阿里云、Godaddy等。

3. 购买VPS

VPS主要用来存放网站的所有内容，包括代码、素材等。VPS服务商也很多，在国际上比较出名的是Vultr和搬瓦工。本教程利用Vultr上的服务器来搭建个人主页。

Vultr主页上的服务器购买也很简单：注册、充值、选服务。此处选取Centos 6.X作为演示。其中涉及到如何使用SSH登录服务器，请参考vultr的ss服务器教程)。

4. 环境配置

环境：Centos 6.X

4.1 配置Nginx

1）在 CentOS 上，可直接使用 yum 来安装 Nginx

1
yum install nginx -y

2）安装完成后，使用 nginx 命令启动 Nginx

1
nginx

此时，访问 http://ip 可以看到 Nginx 的测试页面。如果无法访问，请重试用命令重启 Nginx

1
nginx -s reload

如果出现如下页面，则配置正确：

image-20190801004058752

如果还是无法访问，可能是因为端口没有开放的原因。请按照如下解决方案：

1）本地机器测试nginx是否能正常启动

1
curl http://ip

这里的ip地址为你本机的ip地址。

如果出现类似如下结果，证明服务器上nginx配置没问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test Page for the Nginx HTTP Server on EPEL</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            /*<![CDATA[*/
            body {
                background-color: #fff;
                color: #000;
                font-size: 0.9em;
                font-family: sans-serif,helvetica;
                margin: 0;
                padding: 0;
            }
            :link {
                color: #c00;
            }
            :visited {
                color: #c00;
            }
            a:hover {
                color: #f50;
            }
            h1 {
                text-align: center;
                margin: 0;
                padding: 0.6em 2em 0.4em;
                background-color: #294172;
                color: #fff;
                font-weight: normal;
                font-size: 1.75em;
                border-bottom: 2px solid #000;
            }
            h1 strong {
                font-weight: bold;
                font-size: 1.5em;
            }
            h2 {
                text-align: center;
                background-color: #3C6EB4;
                font-size: 1.1em;
                font-weight: bold;
                color: #fff;
                margin: 0;
                padding: 0.5em;
                border-bottom: 2px solid #294172;
            }
            hr {
                display: none;
            }
            .content {
                padding: 1em 5em;
            }
            .alert {
                border: 2px solid #000;
            }

            img {
                border: 2px solid #fff;
                padding: 2px;
                margin: 2px;
            }
            a:hover img {
                border: 2px solid #294172;
            }
            .logos {
                margin: 1em;
                text-align: center;
            }
            /*]]>*/
        </style>
    </head>

    <body>
        <h1>Welcome to <strong>nginx</strong> on EPEL!</h1>

        <div class="content">
            <p>This page is used to test the proper operation of the
            <strong>nginx</strong> HTTP server after it has been
            installed. If you can read this page, it means that the
            web server installed at this site is working
            properly.</p>

            <div class="alert">
# Generated by iptables-save v1.4.7 on Sun Aug  4 11:16:46 2019
                <h2>Website Administrator</h2>
                <div class="content">
                    <p>This is the default <tt>index.html</tt> page that
                    is distributed with <strong>nginx</strong> on
                    EPEL.  It is located in
                    <tt>/usr/share/nginx/html</tt>.</p>

                    <p>You should now put your content in a location of
                    your choice and edit the <tt>root</tt> configuration
                    directive in the <strong>nginx</strong>
                    configuration file
                    <tt>/etc/nginx/nginx.conf</tt>.</p>

                </div>
            </div>

            <div class="logos">
                <a href="http://nginx.net/"><img
                    src="nginx-logo.png"
                    alt="[ Powered by nginx ]"
                    width="121" height="32" /></a>

                <a href="http://fedoraproject.org/"><img
                    src="poweredby.png"
                    alt="[ Powered by Fedora EPEL ]"
                    width="88" height="31" /></a>
            </div>
        </div>
    </body>
</html>

2）防火墙、端口开启设置

（1）打开80端口

1
vi /etc/sysconfig/iptables

添加：

1
-A INPUT -p tcp -m state --state NEW -m tcp --dport 80 -j ACCEPT

（2）重启防火墙

1
service iptables status

在进行ip访问，应该能够成功了。

4.2 配置静态服务器访问路径

外网用户访问服务器的 Web 服务由 Nginx 提供，Nginx 需要配置静态资源的路径信息才能通过 url 正确访问到服务器上的静态资源。nginx后发现配置文件只有一个,/etc/nginx/nginx.conf。所有的配置包括虚拟目录也在此文件中配置, 这样当虚拟主机多了管理就有些不方便了。我们把配置文件拆分开来,在/etc/nginx/conf.d/ 文件建立对应的域名配置文件,比如 /etc/nginx/conf.d/123.com.conf。

1）新建配置文件

1
touch new_file.conf && vi new_file.conf

2）添加配置

1
2
3
4
5
6
7
8
server {
  server_name ip; // 你的域名或者 ip
  root /www/website; // 你的克隆到的项目路径
  index index.html; // 显示首页
  location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
    root /www/website;
  } // 静态文件访问
}

其中，路径/www/website为你的源文件存放地址。

3）重启Nginx

1
sudo nginx -s reload