一篇从零开始、步骤完整的网站搭建教程(全篇7000字、102张截图说明,力求每一个人都能看懂,附源码)

从今年八月开始到现在自己也是从0开始做了有两个网站:

这中间也经常有不了解的地方需要去查。其实网上的资料也不少

但可能相对比较零散,需要反复的查来查去,费时又累心

那这次有时间就想着说写一篇从零开始、步骤完整的网站搭建教程

希望能帮助大家节省时间,不需要去东拼西凑的查来查去

这篇文章我花了两天的时间,全篇7000字,102张截图说明,精细到每一次点击、每一个输入说明

力求让每一个人、不管是否有编程基础,看完都能做出自己的网站,建议预先收藏,以免以后用到时找不到。

大家在操作过程中如有任何疑问可以私信联系我,我会尽力帮大家解决遇到的问题

祝大家都能顺利成功!

在这里插入图片描述

 

Part 1:购置云服务器

网站服务是需要运行在电脑端的,而且这台电脑需要24小时开机,这对于我们家用的电脑来说是做不到的。

所以我们需要购置一台云服务器,将网站服务运行在云服务器上。

就像是同一种食物可以有很多家厂商生产,目前可以提供云服务器的厂商有很多:腾讯、阿里、华为…

每个厂商购置云服务器的过程都大同小异,我这里以腾讯云服务器举例:

百度搜索’腾讯云’进入官网

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

注册并登录

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击左上角最新活动

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击限时秒杀

这里是对新人首单的优惠区域,会省很多money

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

选购服务器

对于我们个人来说,如果是小型的应用,选择最低配置即可

50money一年非常优惠,不过记住一定是新注册的用户哦!

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

就像我们自己买电脑选配置一样,点击立即购买之后,我们选择服务器的配置:

这里我们需要选的有两项,其他基本默认就可以,

活动地域:选择离自己近的,网络会好一些

镜像(重点注意!!):镜像就相当于操作系统,我们家用的电脑都是windows,但对于服务器来说,linux系统的性能更好,所以我们需要选择linux的镜像,千万别选错了呦!

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

查看服务器信息

购买之后,你可以通过下面的操作来查看你的服务器信息:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

设置密码

为了防止别人进入服务器,我们需要为服务器设置密码:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

到这里我们搭建网站应用的第一步就完成了!你已经拥有了一台自己的服务器!!

怎么样,跟着我的步骤操作下来是不是感觉有手就行!

如果给个点赞收藏的话我会感动到哭哦!

接下来我们进行下一步:安装服务器工具

 
Part 2:安装服务器工具

先解释一下为什么要装服务器工具?

我们在前面提到过购买服务器需要选择linux操作系统

linux不同于windows的地方在于:

windows是以可视化的图形窗口来操作的,而linux则完完全全是通过命令来操作,这对于普通人来说是很困难的。

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

所以我们需要在linux系统上安装工具,将命令操作转换成普通人可以接受的图形窗口化操作,这个工具叫做:宝塔

接下来开始详细的操作步骤:

连接linux服务器

首先,我们需要使用Xshell工具连接到我们的云服务器,

关于Xshell,私信我即可获得

安装之后,我们打开Xshell软件,在界面左上角新建一个连接。可以通过文件→新建连接,或直接点击文件下方的新建连接图标。

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

然后会弹出一个新建连接的登陆设置与信息:

这里名称和主机填写你自己的云服务器IP

其它默认即可,然后我们点击“确定”

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

这时界面左侧的会话管理器中会多出一个刚设置完成的连接会话,右键单击这个会话,点击属性,进入会话属性窗口。

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在下一步中输入与用户名匹配的密码

用户名是:root

密码就是我们刚才设置的云服务器密码

然后点击连接即可

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

安装宝塔

复制下面这个命令:

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

粘贴到linux命令框中(点击鼠标右键)

回车键执行命令,很快会出现提示需要你输入Y,输入之后继续回车键,等待安装结束即可!

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

安装成功后会出现如下内容:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

注意:

请将红框中的内容复制并保存起来(选中后点击鼠标右键即可复制):

第一行是宝塔的登录地址,我们以后操作服务器直接通过宝塔即可。

后面两行分别是登录宝塔的用户名、密码,一定要保存好哦!

到这里宝塔就已经装好了,我们可以关掉连接工具了。

登录宝塔

将宝塔的登录地址复制到浏览器上方,进入登录界面:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

输入刚才保存的用户名(username)、密码(password)即可登录。

初始化宝塔

初次登录宝塔,会出现如下提示,预装基础的程序,我们按照推荐选择左边的LNMP即可

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

到这里我们的服务器工具就已经安装完毕!接下来就可以开始部署自己的网站应用了。

 

Part 3:建设网站

本步骤为不同的人群分别提供了不同的解决方案

大家可以对应去看:

小白 – 1

有编程基础的同行(附源码) – 2

没时间、自己懒得弄、有个性需求 – 3

 

1

我是小白,也不懂编程,应该怎么做呀?

可以使用wordpress制作自己的网站!

wordpress是一款为大众设计的网站搭建平台

它使得网站制作不再是程序员的专利,任何一个小白都可以简简单单的制作自己的网站。

是目前主流的建站平台

下载wordpress

进入wordpress官网:

https://wordpress.org/download/

点击图示按钮进行下载:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

登录宝塔添加wordpress站点

输入上面步骤 二-2 保存的宝塔入口地址,点击如下按钮:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在弹窗中填入相关信息:

域名的申请会在后面说明,这里我们先填写云服务器的IP地址,也就是左上角宝塔的ip地址

数据库选择mysql

点击提交

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

提交成功会出现下面的提示:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

注意:

请保存好这三项内容,后面会用到

部署wordpress

我们进入刚创建的站点的根目录

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

删除 index.html文件

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

将 1-1 下载的安装包上传到此根目录中

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

解压上传后的安装

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

将解压之后wordpress文件夹中的所有文件剪切到当前根目录中,然后删掉wordpress文件夹

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

这样我们的wordpress就部署好了!

接下来我们看看如何使用它!

初始化wordpress

在浏览器中输入我们的云服务器IP即可进入wordpress

初次进入会提示我们进行初始化的配置:

语言选择

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击:现在就开始

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

配置数据库信息:

这里前三项填入步骤 三:1-2 中保存的信息,

剩下不用改动,点击提交

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

提交之后会出现下面的提示,代表提交成功,继续点击 运行安装程序

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

按照说明输入对应信息之后,点击安装wordpress

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

注意:

千万记得保存好用户名和密码

稍等片刻之后,就会提示安装成功!

继续点击登录

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

输入刚才设置的用户名和密码之后就可以正式开始使用wordpress制作自己的网站了!

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

使用wordpress

在经过了上面的步骤之后,我们就可以输入下面的链接来进入wordpress设计我们自己的网站:

你的ip/wp-admin

格式举例:1.16.2.199/wp-admin

该地址是需要密码登陆的,也就是说只有你自己可以去修改自己的网站内容,你可以把它叫做网站的管理端。

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

同时,wordpress也已经帮我们创建好了初始的网站内容,你只需输入你的云服务器ip即可看到:

输入你的IP

格式举例:1.12.6.144

这个就是我们的最终成果了,也就是你“个人网站”的呈现了

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

如果你已经看到这里、并且跟着我的说明一步步的操作了

那么恭喜你,你已经简单的完成了自己个人网站的搭建,并且你已经拥有了一个自己的网站!!

就是上图所示的样子。

有用的话记得点赞哦!

 

2

兄弟我也做编程的,怎么样快速搭建网站?

无需手敲命令脚本!用工具一键部署!

对于有编程基础的同行来说,其实使用命令脚本依然可以完成网站的部署。

但宝塔的优势在于:

宝塔的可视化操作方式比我们自己用命令操作更方便快捷

宝塔提供各种主流工具的安装服务,一键安装,省时又省力

宝塔提供项目管理工具,包括部署、启动、停止,比起我们自己写命令脚本更高效

接下来我以java项目为例,为大家演示一下如何用宝塔快速部署网站服务:

当然如果你还没有自己的项目,我可以提供给你,你给个点赞收藏不过分吧!笔芯!

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

私信我即可获取

我这比你男女朋友都体贴到位的服务你点个赞收藏真的不过分了吧!!

安装必要工具

我们进入宝塔面板

(如果忘记如何操作回看一下步骤 二)

进入软件商店:

你可以看到我们常用的像nginx、mysql等都是可以安装且免费的,

点击右侧的安装并稍等片刻即可

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

安装之后我们可以查看自己已安装的软件,常用的勾选首页显示

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

切换到首页,可以看到装好的软件操作菜单

如nginx点开之后可以直接修改配置、重启等,很方便

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

数据库操作

宝塔同时支持数据库管理、备份,点击左侧数据库:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击右侧管理按钮,可以进入管理页面,支持表以及数据的相关操作:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

应用部署

在下载好必要软件、配置好数据库之后,我们开始部署应用:

这里我以springboot项目为例

将你打包好的应用通过宝塔的文件管理界面上传至服务器

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

再次进入软件商店,搜索”java“,如下图所示,

该插件提供了java项目的一键部署、管理服务:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在安装好之后,我们同样将它勾选至首页显示即可。

然后来看一下它的使用方法:

首先,进入容器管理,安装tomcat

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

然后,如果是普通java项目,选择第一项”java项目管理“即可,

由于我是boot项目,所以选择最后一项"springboot":

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击添加项目,会出现如下弹窗,需要输入配置信息:

这里的项目路径选择我们上传的应用包,

其它的按提示选择即可

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

当我们点击确定之后,它会根据我们输入的信息生成启动脚本,启动服务:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

到这里我们就成功的部署了自己的应用

 

3

我没时间、自己弄太麻烦、而且有个性化的需求,你能帮我做吗?

当然可以!浩说编程为您提供无需自己操作的完全托管式定制建站服务

如果你没有空闲的时间去做网站

或者看这些说明觉得很烦不想弄

又或者你有自己个性化的需求,想要按自己的想法去设计自己的网站

那么没有问题,”浩说编程“提供完完全全不需要你操作的网站托管定制建设服务,

你只需告诉我你的想法,(私信我即可)

剩下的就交给我来帮你实现,

你不需要看上面的长篇大论、你甚至不需要再看下一句话

 
Part 4:购买域名

通过前面的说明,我们已经搭建好了自己的网站,并且可以通过IP来访问自己的网站。

此时我们需要为网站来购买一个域名。

Q:

”域名“是什么呢?它有什么作用?

简单来说,想一想我们平时进入网站的时候输入的并不是IP吧

而是这种:

www.baidu.com

www.yuming.cn …

这个就叫做"域名"。

比起只有数字的IP,”域名“则更优雅好记、容易推广

就像我和你说百度,你立刻就能拼出来www.baidu.com,就是这个意思了

同时也能提升我们服务器的安全性

和购买云服务器的逻辑相似:域名的厂商也有很多,我们依然用腾讯来举例:

登陆腾讯云(忘记操作步骤可以回看步骤 一)

在下方”热门推荐“中选择”域名注册“

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

想一个自己喜欢的域名,比如”myhome“,点击右侧查询按钮:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

可以看到查询结果中,有些后缀的域名显示”已被注册“,这种我们无法购买,

而可以购买的会显示价格说明,这种是我们可以选购的,

选好之后点击立即购买即可。

配置域名

登录”腾讯云“,点击“控制台”

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在左上角的“云产品”中,选择“DNS解析”

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

正常情况下,由于你已经购买了域名,所以进来之后会默认有一条域名记录:

如果没有的话,点击添加域名,手动加入即可

我们点击“解析”,将域名解析至我们的云服务器IP下

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击“添加记录”

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

填写信息:

主机记录可以填写:www

之后两项默认即可

记录值填写你的云服务器IP

然后点击“保存”即可

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

至此,我们的域名就配置好了!

距离搭建好网站只差最后一步!!!

 
Part 5:备案

就像是汽车需要上牌才能上道、饭店需要营业执照才能开张

网站也是一样,只有“备案”之后才能在互联网上被公开访问,

当你浏览网站首页的时候,翻到最底部一定会看到这样的文字,这就表示该网站已经备案:

你可以试着在浏览器顶部输入你的域名,回车之后会出现下面这个页面,提示你去备案:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

你需要点击蓝色文字“备案控制台”进行备案操作

由于我这里已经做过备案,无法模拟首次备案的操作,

所以我引用一下腾讯云官方的首次备案操作说明:

原文地址:

基础信息校验

登录 腾讯云网站备案控制台,进入 “我的备案” 管理页面。

单击立即体验,查看 备案准备 信息,并单击已了解,下一步,进入 “基础信息校验” 页面。

如下图所示:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

主办单位性质选择个人即可

云资源选择自己的云服务器

点击”立即验证“,进入下一步”真实性校验“

真实性校验

使用手机打开微信并单击扫一扫,扫描页面提供的二维码。如下图所示:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

扫一扫后即可跳转至小程序 “腾讯云视频核验”,并按照要求上传相关信息。如下图所示:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

按照上方提示提交信息后,点击”提交“,进入下一步”填写主体信息“

主体信息

在 “主体信息” 模块,填写相关信息:

字段名称

填写说明

地域

地域信息选择与实际通信地址一致即可。

主办单位性质

请选择相应的主办者性质。

主办单位名称

请输入主办单位名称,需与单位证件上的名称及账号实名认证名称一致。

证件类型

请选择相应的主办单位证件类型。

营业执照

单击上传相应的主办单位证件,例如营业执照等。

证件号码

上传营业执照之后,系统会自动识别并填充证件号码,其他证件类型请自行填写。

证件住址

请输入单位证件上的地址。

法定代表人

请输入法定代表人姓名。

法定代表人证件号码

请输入法定代表人的证件号码。

通信地址

请输入通信地址,精确到门牌号或房间号。

备注

可添加相关主体备注信息。

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在 “主体负责人” 模块,填写相关信息,填写自己的即可:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

填写好以后,我们单击下一步,进入填写 “网站信息” 步骤。

网站信息

在 “网站信息” 模块,按照描述填写自己的即可:

网站服务内容根据自己网站的内容选择

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在 “网站负责人” 模块,上传相关材料以及填写你自己的信息:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在 “网站补充材料” 模块,上传一下材料:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

域名证书的获取方法

在控制台中,选择”云产品“中的”域名注册“

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击你的域名进入域名信息页:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

点击”下载证书“即可获取。

网站法人授权书:我们个人的话无需上传

域名实名认证截图:同样在域名信息页中,截图中需包含域名、域名所有者、所有者证件类型、所有者证件号码、域名过期时间。

单击保存当前网站,即可完成网站信息的填写。

提交备案

在 “备案订单” 预览信息页面中,请仔细核对您的备案信息

确认无误后,阅读和勾选同意,并阅读《信息安全管理协议》和《协助更改备案信息服务在线服务条款》,并单击提交审核。如下图所示:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

到这里我们备案的信息提交过程就算结束了,接下就是等待审核结果了,

注意,审核过程会分为三步:

腾讯初审(大概在一两天左右会有工作人员打电话跟你确认信息)

工信部短信校验(根据工信部最新要求,自2020年8月17日起,各省市进行备案申请时需通过 工信部备案管理系统 进行短信核验)

管局审核(大概在两周左右,腾讯云会发邮件通知审核结果)

公安备案

在管局审核通过之后你会收到这封邮件:

会提示我们30日内到公安机关备案

当然我们只需要去 全国互联网公共管理平台 备案即可

地址:http://www.beian.gov.cn/

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

由于我这里已经备案过,所以下面的说明引用了腾讯云的官方说明:

原地址:
cloud.tencent.com/document/product/243/19142

进入官网后,点击”联网备案登录“

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

初次使用按提示注册即可

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

填写开办者主体信息

初次登录之后,系统会弹出如下提示,让我们填写开办主体信息:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

在 “网站开办主体” 页面,根据实际需求,选择开办主体性质:

”开办主体性质” 选择为 “个人”:填写 “开办者信息”,单击提交审核

“开办主体性质” 选择为 “单位”:选择主办单位性质,填写 “主办单位信息” 和 “负责人信息”,并单击提交审核

接下来我们开始填写新办网站信息

在左侧导航栏中,单击新办网站申请,进入 “新办网站申请” 页面。如下图所示:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

信息填写说明:

信息填写之后,点击提交,然后等待审核结果即可。

(审核时间一般在两周左右)

我们可以去”系统通知“中查看审核结果:

有手就行?从0开始一步步教你搭建自己的网站(零基础、附源码)

到这里为止,我们整个从0开始的网站搭建过程就结束了!

这篇文章我花了两天的时间

全篇7000字,102张截图,精细到每一次点击、每一个输入说明!

如果真的帮到了你就给个点赞收藏吧,或者分享给需要的人哦!

我们下期见

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注