网站建设:个人网站快速搭建教程(超详细)

2018年10月11日10:28:12 44 39,407 °C
摘要

很多朋友问我,怎样搭建一个像我这样的个人网站?几句话说不明白,索性写个详细教程吧。

网站建设:个人网站快速搭建教程(超详细)

一、前言

很多朋友问我,怎样搭建一个像我这样的个人网站?几句话说不明白,索性写个详细教程吧。

二、整体思路

本教程只针对Linux服务器的用户,Windows服务器用户可以另找教程。

安装方法可以分为两种:

  • 服务器管理软件配置
  • 手动配置

1、服务器管理软件

在服务器管理软件中,最出名的应该是宝塔面板了。

官方网站:https://www.bt.cn/

“傻瓜式”的安装,对用户很友好,一键创建网站,一键配置SSL,一键迁移,等等。而且还有后台管理系统,可视化的监控服务器的情况:

网站建设:个人网站快速搭建教程(超详细)

可谓神器了,而且还有官方免费版。

2、手动配置

该方法是需要使用ssh工具远程链接服务器,进行服务器配置,需要用户有一定的Linux基础,例如Linux常用指令的使用等。编辑文本,用的最多的工具就是vim了,太高级的不用会,至少vim里拷贝,调转行,搜索,保存等常用的指令需要掌握。安装东西也都需要指令安装,不同Linux系统的指令还有所差别,日常操作如下:

网站建设:个人网站快速搭建教程(超详细)

相比于宝塔维护服务器,该方法更繁琐一些,但是可以让你更好的理解Linux服务器的使用。并且,看我网站的朋友应该大部分都是程序员,这些都是必备技能,维护网站可以更好的锻炼自己,何乐而不为呢?

因此,像我一样喜欢“折腾”的朋友,建议使用第二种方法配置服务器;不喜欢“折腾”的朋友,建议使用第一种方法配置服务器。

本教程以手动配置为例进行说明,想用宝塔面板配置的朋友,可以百度搜索宝塔面板安装,教程有很多。

三、服务器购买

啰嗦一堆,开始进入正题,首先服务器购买,选择哪家好呢?哪家都一样,看你心情,不过尽量选大厂的,安全一些。本网站使用的是阿里云的服务器,刚开始买个最低配置的服务器就行,以后不够用了,可以慢慢升级,本站日活跃IP1000,阿里云的最低配ECS用到现在,完全够用,不必纠结买什么配置的,直接选最低配置即可,不够用了再升级。

可以先领个券,再购买:

点击领券

如果是学生可以在领券页面里找到学生专享,服务器9.5元/月,直接点击购买即可。不是学生也可以组团购买,更便宜,服务器购买就不多说了,拿钱就好了。

买完服务器,可以登录服务器提供商的控制台登录自己的服务器,不过这种方法操作不太舒适,因此可以选择使用远程登陆工具进行链接。

我们获取三个信息,才能使用远程登录工具:

  • 服务器公网IP
  • 服务器远程连接密码

例如阿里云ECS可以登录控制台查看服务器公网IP和远程连接密码:

网站建设:个人网站快速搭建教程(超详细)

远程登录工具我使用的是XShell,也可以用SecureCRT,XShell的使用可以看下我早期在CSDN写的文章:

https://blog.csdn.net/c406495762/article/details/70808051

在XShell配置里填写好主机(服务器公网IP),登录用户(root),登录密码(服务器远程连接密码)即可完成登录。

登录服务器后需要安装一些后续需要用到的指令包:

如果是Ubuntu主机,安装指令需要使用apt-get install,Ubuntu的Centos一些指令是有些区别的。本文以Centos为例说明,后续不再强调。

lrzsz可以方便我们从服务器下载文件和向服务器上传文件,服务器维护必备指令,使用方法也可以看我早期在CSDN写的文章:

https://blog.csdn.net/c406495762/article/details/70808051

接下来如果是阿里云的用户,还需要配置安全组规则:

网站建设:个人网站快速搭建教程(超详细)

然后添加80端口(http用)和443端口(https用),添加如下:

网站建设:个人网站快速搭建教程(超详细)

当然如果服务器供应商直接就开启了80和443端口,可以直接忽略此步。

OK,搞定这些,接下来我们配置服务器。

四、LNMP

1、什么是lnmp?

我们先看下官方的解释:

LNMP一键安装包是一个用Linux Shell编写的可以为CentOS/RHEL/Fedora/Aliyun/Amazon、Debian/Ubuntu/Raspbian/Deepin/Mint Linux VPS或独立主机安装LNMP(Nginx/MySQL/PHP)、LNMPA(Nginx/MySQL/PHP/Apache)、LAMP(Apache/MySQL/PHP)生产环境的Shell程序。

说白了就是一个自动化脚本,方便我们安装服务器需要的一些程序,本文以安装nginx+MySQL+PHP为例,进行讲解。

2、安装

使用如下指令安装:

如果最后的参数是lnmpa就是nginx+apache的配置,如果是lamp就是apache的配置,本教程使用nginx,也就是lnmp。

运行脚本会出现如下界面:

网站建设:个人网站快速搭建教程(超详细)

目前提供了较多的MySQL、MariaDB版本和不安装数据库的选项,需要注意的是MySQL 5.6,5.7及MariaDB 10必须在1G以上内存的更高配置上才能选择!

没有特殊需要,建议使用默认配置即可,直接回车或输入序号再回车,会出现如下界面:

网站建设:个人网站快速搭建教程(超详细)

设置MySQL的root密码(为了安全不输入直接回车将会设置为lnmp.org#随机数字)如果输入有错误需要删除时,可以按住Ctrl再按Backspace键进行删除(个别情况下是只需要Backspace键)。输入后回车进入下一步,如下图所示:

网站建设:个人网站快速搭建教程(超详细)

询问是否需要启用MySQL InnoDB,InnoDB引擎默认为开启,一般建议开启,直接回车或输入 y ,如果确定确实不需要该引擎可以输入 n,(MySQL 5.7+版本无法关闭InnoDB),输入完成,回车进入下一步。

网站建设:个人网站快速搭建教程(超详细)

注意:选择PHP 7+版本时需要自行确认PHP版本是否与自己的程序兼容。

输入要选择的PHP版本的序号,回车进入下一步,选择是否安装内存优化:

网站建设:个人网站快速搭建教程(超详细)

可以选择不安装、Jemalloc或TCmalloc,输入对应序号回车,直接回车为默认为不安装。本站用了Jemalloc优化。

如果是LNMPA或LAMP的话还会提示设置邮箱和选择Apache:

网站建设:个人网站快速搭建教程(超详细)

“Please enter Administrator Email Address:”,需要设置管理员邮箱,该邮箱会在报错时显示在错误页面上。再选择Apache版本:

网站建设:个人网站快速搭建教程(超详细)

按提示输入对应版本前面的数字序号,回车。

提示"Press any key to install...or Press Ctrl+c to cancel"后,按回车键确认开始安装。 LNMP脚本就会自动安装编译Nginx、MySQL、PHP、phpMyAdmin等软件及相关的组件。

安装时间可能会几十分钟到几个小时不等,主要是机器的配置网速等原因会造成影响。

如果显示Nginx: OK,MySQL: OK,PHP: OK

网站建设:个人网站快速搭建教程(超详细)

表明安装成功。更多内容内容可以查看官方教程

安装好后,使用如下指令查看nginx配置文件(可能不同系统会安装位置会有所不同):

你会看到如下内容:

网站建设:个人网站快速搭建教程(超详细)

上图表明,安装好的nginx将网站的根目录设置为/home/wwwroot/default,这个可以根据自己的喜好进行修改,ls指令查看该目录的内容:

网站建设:个人网站快速搭建教程(超详细)

用浏览器打开http://ip,可以看到如下内容:

网站建设:个人网站快速搭建教程(超详细)

其实这就是一个简单的网页demo了,自己随便修改index.html,就会有不同的内容。

五、Wordpress

1、Wordpress是什么?

我们先看下百度百科的解释:

WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统(CMS)来使用。

说白了,就是一个网站开发平台,方便我们开发自己的博客,同时也有很多免费或者付费的主题,方便我们使用,可以这样简单的理解:有了wordpress和主题,你就可以像小时候装扮自己的QQ空间一样,设计自己的网站。一个简单的比喻,实际上,做好一个网站,需要我们去做的要多得多。

除了wordpress,还有emlog、Typecho等优秀的平台供我们使用,本文不再扩展他们的对比以及优缺点,想要了解的朋友可以自行百度。但是有一点需要说明,它们的主题是不通用的,如果想使用其他网站开发平台的主题,那么需要自行移植主题。曾经了解一番的主题如下:

WordPress:

知更鸟,也就是本人现在(2018.10.8)使用的主题,功能强大,适合“功能控”使用,299元且需要绑定指定域名,仅有非常少的核心代码加密,但不影响使用,可以随意折腾。

不过不推荐了,老板很拽,服务态度极差。

mkBlog,功能没有知更鸟那么强大,但是很精美,特别喜欢里面一些的小功能,价格也很公道,49元且不绑定域名,无核心代码加密,适合想要学习网站制作的朋友。

emlog:

Finally,全站pjax,还有网页音乐播放器,页面看着挺不错,挺漂亮,不过曾有过后门丑闻,现在已经不再出售主题,全当看看吧。

Typecho:

Pinghsu:相当精美,很喜欢这种风格,开源免费,值得拥有。

又啰嗦一堆,还是那句话,想安装其他网站开发平台的,可以找其他的相应教程了,但是强烈推荐wordpress,插件多,主题多,而且安全性高。因此,本文以wordpress的安装为例,进行讲解。

2、安装

你可以根据官方手册进行安装,也可以看我的教程,首先下载并解压wordpress安装包:

登录MySQL:

输入lnmp创建MySQL时,输入的密码,进入MySQL后,创建wordpress表:

输入exit退出。

接下来就是修改nginx配置文件,如果不会vim用vim,建议先看下vim操作方法,并且对nginx.conf进行备份:

操作失误了,直接使用如下指令恢复:

然后进行再次备份,继续操作即可,用vim打开nginx.conf配置文件:

找到网站根目录位置,如下图所示:

网站建设:个人网站快速搭建教程(超详细)

修改成如下内容:

网站建设:个人网站快速搭建教程(超详细)

随后,使用wq保存配置退出即可。

验证nginx是否有配置错误:

如果出现ok,successful字样,说明没有错误。没有错误,重新加载nginx:

修改wordpress目录权限:

用浏览器打开http://ip/wp-admin/setup-config.php,你可以看到如下内容:

网站建设:个人网站快速搭建教程(超详细)

现在就开始,进行安装。填写信息如下:

网站建设:个人网站快速搭建教程(超详细)

其中,***改为你设置的MySQL数据库密码。点击提交,出现如下内容:

网站建设:个人网站快速搭建教程(超详细)

在/home/wwwroot/wordpress下,创建并编写wp-config.php文件:

将上图内容复制进去并wq保存退出,然后点击现在安装。最后就是配置用户信息了,这个是你登录wordpress用户后台的,要记住:

网站建设:个人网站快速搭建教程(超详细)

最后点击安装WordPress,安装成功会出现如下界面:

网站建设:个人网站快速搭建教程(超详细)

点击登录,输入账户密码,就可以登录wordpress后台。

六、主题

外观->主题,可以选择自己上传主题,也就是自己买国内付费主题,或者在wordpress找免费主题。比如安装好mkBlog主题后,在浏览器输入网站公网IP地址,可以看到如下内容:

网站建设:个人网站快速搭建教程(超详细)

世界,您好!

每个主题都有自己的配置方式和配置选项,除了学习上述内容外,还需要学习每个主题的使用,也就是看主题使用说明,这个相对来讲要容易很多,现在就可以开始你的主题折腾之旅了。

七、域名

域名是什么?可以看下百度百科的解释:

域名(英语:Domain Name),简称域名网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

直白点,就是可以通过用你想要的名字让别人访问你的网站,但是名字是唯一的,不能重复。

截至目前为止,你可以通过服务器的公网IP访问自己的网站,但是还不能通过域名网站,想要通过域名访问网站还有一些事情需要做。

1、购买域名

阿里也提供域名购买,可以找个自己喜欢的域名进行购买,域名有便宜有贵的,有的可能一年就几块钱。比如可以通过如下url查看cuijihua的域名的购买情况:

https://wanwang.aliyun.com/domain/searchresult/?keyword=cuijiahua#/?keyword=cuijiahua

域名尽量一次买好,以后一直使用,总换域名会影响网站的收录,所以域名购买要好好考虑下。

2、域名备案

域名买好了就直接能用吗?国内的一些服务器是不能的,有些国外的服务器供应商无需备案。因此如果你买的是阿里云的服务器,就需要先备案,再使用。

怎么备案?如果是阿里云用户可以通过如下链接进入备案流程:

https://beian.aliyun.com/

备案多久?最快也需要近一个月的时间。所以还是需要耐心等待的,那如果等不及了,直接配置上域名会怎样?配置好几分钟后,你的网站应该就打不开了:网站建设:个人网站快速搭建教程(超详细)

3、DNS解析

DNS又是什么?百度百科解释:

DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过域名,最终得到该域名对应的IP地址的过程叫做域名解析(或主机名解析)。DNS协议运行在UDP协议之上,使用端口号53。在RFC文档中RFC 2181对DNS有规范说明,RFC 2136对DNS的动态更新进行说明,RFC 2308对DNS查询的反向缓存进行说明。

不严谨的说,DNS可以理解为通讯录,通过通讯录就可以找到你家地址(服务器IP地址)。

如果域名已经备案完成,那么就可以配置DNS解析了,阿里云配置DNS地址如下:

https://dns.console.aliyun.com/

如果没有DNS解析服务,需要先购买DNS解析服务,如果买的阿里云服务器,会免费赠送DNS解析服务,DNS解析也有很多家,不是说用阿里云的服务器就必须用阿里云提供的解析服务。不过本人为了省事,就直接用的阿里云给的免费DNS解析,DNS解析配置如下:

网站建设:个人网站快速搭建教程(超详细)

刚开始配置两个记录即可,www记录和@记录,随后就可以根据域名访问自己的服务器了,例如在浏览器输入:

https://cuijiahua.com

具体怎么填写,可以看阿里云的官方视频教程:

https://help.aliyun.com/document_detail/29716.html

八、SSL

SSL是什么?官方解释:

SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层对网络连接进行加密。

可以理解为提高网站安全,可以一定程度避免网站被运营商劫持贴小广告等。

http://xxx.com这样的就是没有配置SSL,如果是https://xxx.com这样就是配置了SSL。

1、SSL证书购买

阿里云提供免费的证书,可以通过官方渠道购买:

https://www.aliyun.com/product/cas

2、SSL配置

根据网站服务器的不同,配置方式也不相同,nginx、apache、nginx+apache不尽相同。这部分内容就不许讲解了,阿里云官方也有官方教程。

最后说下我没有配置SSL的原因,我的网站是加入了七牛云的CDN服务,该服务有每个月20G的免费http流量,超过要额外算钱,如果是https流量是没有免费额度的。

我的网站只有每个文章的特色图是用到CDN,其他图都是本地的,尽管这样20G的免费http流量都不够用,更别说付费的https了。

不过还有解决办法就是用新浪图床,等哪天闲了,到时可以都改为上传到新浪上,然后再配置为SSL。

九、总结

除了购买服务器这个路子之外,其实还可以用Github搭建自己的博客,这样的好处就是服务器维护不用你管,你只负责设计主题就够了,非常省心省力,而且还有Hexo这样的优秀主题供我们使用。但是缺点也是有的,服务器配置不高,而且有些限制,不够自由,更重要的是,你说哪天Github要是被墙了怎么办?我一直有这样的担心。So,就费点劲儿吧。

PS:如果购买阿里云的轻量应用服务器,可以直接预装wordpress或宝塔面板,省去自己安装的麻烦。

weinxin
微信公众号
分享技术,乐享生活:微信公众号搜索「JackCui-AI」关注一个在互联网摸爬滚打的潜行者。
Jack Cui

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:44   其中:访客  26   博主  18

    • avatar columns 来自天朝的朋友 谷歌浏览器 Linux 北京市 清华大学微电子学研究所(东主楼) 1

      博主你好!在location中设置root /home/wwwroot/wordpress;之后,index要设置成哪个文件啊?我设置成index index.php;后输入域名一直弹出下载文件的对话框(让下载的文件就是index.php本身)

        • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_4 北京市 百度网讯科技联通节点

          @columns 呃,是index.html哈。

            • avatar columns 来自天朝的朋友 谷歌浏览器 Linux 北京市 清华大学微电子学研究所(东主楼) 1

              @Jack Cui 我的wordpress目录下没有index.html

                • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 北京市昌平区 联通

                  @columns 你自己创建啊,这个就是一个展示的例子,看下环境有没有问题。

            • avatar Panta.Q 谷歌浏览器 Windows 10 IANA 保留地址 1

              博主你好,我在配置NGINX时将ROOT那一行修改为了”/home/wwwroot/wordpress/wp-admin;”同时修改了授予权限的语句为”cd /home/wwwroot/wordpress && chown -R www wp-admin/ && chgrp -R www wp-admin/”但是访问”http://ip/home/wwwroot/wordpress/wp-admin/setup-config.php”时弹出了NGINX的没有找到页面。
              PS:1.我尝试过,您的配置失败了。
              2.我尝试过将”home/wwwroot”路径下的”setup-config.php”设置到NGINX里,但是无法为其父文件夹设置权限。
              3.我在”home/wwwroot”和”home/wwwroot/wordpress/wp-admin”下均有setup-config.php文件,这是否正常?
              希望您可以回复,感谢。

                • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 中国电信北京研究院

                  @Panta.Q 你这个问题,我倒是没有遇到过,nginx有个wwwroot根目录地址,这个对应上了吗?

                    • avatar Panta.Q 谷歌浏览器 Windows 10 IANA 保留地址 1

                      @Jack Cui 是在/usr/local/nginx下吗?我看一下,没有叫WWWROOT的文件夹

                        • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 中国电信北京研究院

                          @Panta.Q 在nginx的配置文件里。

                            • avatar Panta.Q 谷歌浏览器 Windows 10 IANA 保留地址 1

                              @Jack Cui 解决了,谢谢

                      • avatar Pluto4U 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_6 浙江省杭州市 电信 4

                        楼主,我使用LNMP安装nginx后提示nginx:failed,然后用yum 手动装好nginx,执行systemctl start nginx 时抛出Job for nginx.service failed because the control process exited with error code.
                        See “systemctl status nginx.service” and “journalctl -xe” for details.
                        错误,之后执行systemctl status nginx 发现
                        Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled)
                        Active: failed (Result: exit-code) since Thu 2020-05-14 17:33:21 CST; 1min 20s ago
                        Process: 5984 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=1/FAILURE)
                        Process: 5983 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
                        然后google半天也没发现解决办法,这个是为啥呢

                          • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 中国电信北京研究院

                            @Pluto4U 不应该啊,lnmp一般都不会初错的。lnmp有官网,你可以去官方发帖子文艺问。你这个我问题,我还没有遇到过。我不建议你自己mysql、php这些自己配置,有些繁琐~

                              • avatar Pluto4U 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_6 浙江省杭州市 电信 4

                                @Jack Cui 后来我看了LNMP的官方文档,发现有新版本:wget http://soft.vpser.net/lnmp/lnmp1.6.tar.gz -cO lnmp1.6.tar.gz && tar zxf lnmp1.6.tar.gz && cd lnmp1.6 && ./install.sh lnmp ,磁盘还原后安装这个成功了,可能之前的版本有点问题

                            • avatar Pluto4U 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_6 浙江省杭州市 电信 4

                              终于搞好了, :mrgreen: 非常好的教程!谢谢

                                • avatar Jack Cui Admin 来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_4 北京市 百度网讯科技联通节点

                                  @Pluto4U :idea: :idea: :idea:

                                • avatar Richard 来自天朝的朋友 火狐浏览器 Windows 10 广东省深圳市 电信 0

                                  你好,这边安装之后,访问首先没有图片显示,都是文字,请问是什么原因呢?

                                  • avatar kkqqq 来自天朝的朋友 Safari浏览器 Mac OS X Lion 10_15_7 北京市 联通 0

                                    你好,第五步最后一步,”点击登录,输入账户密码,就可以登录wordpress后台。“,我登录之后显示的是502 Bad Gateway。请问是怎么回事呢,如何解决呢?谢谢博主!

                                    • avatar jiao 谷歌浏览器 Windows 10 亚太地区 1

                                      买了个腾讯云最低配ubuntu,lnmp咋咋都安不好,换1.5,1.8,都不行,人傻了