恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何从0到1制作个人网站
0.0°
2019-04-15 原创文章 教程 举报 2959 58 25 2

不会英语、不会代码、不懂计算机,从零开始做一个个人网站!

想拥有一个属于自己的个人网站?展示作品?个人博客?专属域名?

但是作为一个设计师,很多朋友跟我一样英语不好、不会代码、不懂计算机基础,不知道如何开始怎么办?。既然写出了这段话,我就要保证这篇总结分享中大家不用懂任何计算机技术,也不需要懂英文,只要会用键盘鼠标就OK了。



好,进入主题!


基础准备篇

一个网站主要是由三个部分组成:


一.域名
二.服务器
三.你的网页文件(前端+后台)


他们之间的关系,我说下我的理解,有不对的还请指出。域名相当于你的门牌号,指引你找到你的房间(服务器),但是这个房间(服务器)里空空如也,你要装修成欧式还是中式展示给访客的样子,这要看你的网页文件(前段+后台)怎么设计了。


是不是很简单?但是从域名到服务器,服务器怎么运行网站,这其中又有很多很复杂的知识,好在我们都不用去了解。建立一个能运行的网站我们需要做的只有几个简单的步骤:


1.购买域名

自定义的域名都是要自己购买的,但是好在现在大波的新的顶级域名都很便宜,可以挑个便宜的,比如:  www.yourdomain.itd   1年才9块钱,喝杯奶茶就不止了,如果要一定要买.com的域名也可以,因为.com 的域名现在可注册的越来越少,所以价格也就贵一点,所以现在放出了一些新的顶级域名后缀,我觉得跟.com的解析起来都差不多,如果硬要说有什么不一样,那可能就是用户习惯的问题吧。(下面演示中我买了一个.com的域名,55/years。)

Image title


2.准备服务器

了解完域名,该选择服务器里。也就是“房间” 。这里的房间,你可以选择虚拟机,也可以选择vps。虚拟机和vps有什么区别?
虚拟机:帮你装了基础系统并配制好了一些服务器需要运行的基础环境,如数据库等(相当于你租了个房子,但是给你做了简单装修了,你不喜欢也不行,没有控制权)
vps: 给你装了个基础系统,控制权相对自由,可以在后期自己安装些东西。


3.准备你的网页文件(前端+后台)
这里就是决定你展示出网站是什么样子的时候了,这一步的话,如果会点前端知识会更容易点。不会的话那就是跟我一个水平了,没关系,可以选择wordpress,一个强大而又方便的个人博客系统,用来做网站由来已久。


基础的就到这里就差不多了,我也就知道这么多啦。但是我感觉可以再唠叨两句:
买域名和服务器选择国内或者国外都可以,最好都首选大厂产品。国内的服务器优点是稳定、而且快,缺点就是麻烦点,要备案,当然还有贵啦。我们刚开始练手可以选择国外的服务器,比较便宜一点,而且不用备案,就是偶尔不太稳定,访问速度对比国内的会慢点。

OK,实例演示一遍。 。

实操篇


从这里就开始实际操作演示如何建立一个个人网站,实际就是上面三个步骤细分出来更多的小步骤,从1到N,包括从买域名、服务器、搭建服务器面板等最基础开始,所需要的链接都放到下面步骤中,跟着一步步做就可以了。


①  购买你想要的域名,就是门牌。我是在万网上面买的域名,阿里云旗下的。首先你要注册个账号:阿里云注册 有淘宝或者支付宝账号的可以直接登录,你不想用淘宝账号登录用手机号码注册一个也可以。
Image title

② 注册完后拉到最下面,点击万网,找不到的百度。输入你想要购买的域名然后查询一下是否被人注册过。

Image title

Image title

③ 选一个你喜欢的后缀,每个词语搜出来的价格都不一样,一般字母越少或者常用词拼写的会比较贵。这里有一点要加粗提醒下,不要去购买特定的后缀,如.gov.cn 这种是政府机关专属的,就算你买了也解析不了,还有一些是要有公司资质或者其他资质,具体百度搜下哪些个人可以用的。大部分的词语是可以自己用的。我在这边购买了一个.com的,加购物车付款的过程就不写了,购买完的域名在阿里云的控制台-域名里可以看见,初次购买会要你填写自己的身份资料,要你备案,这个域名备案比服务器备案要简单很多,跟着操作填写就可以了。
Image title

Image title

④ 域名准备好了,就要准备服务器了。服务器我用的是国外的,国外的服务器选择性有很多,我们既然是练手的话我个人建议优先选择 vultr 优点是按小时计费的,就是说一开始可以买个最便宜,最低配置的来实验,等你熟悉了或者什么时候不想用了就把这个删了随时换一个。缺点呢,就是用支付宝买的话没有优惠啦,用paypal或者信用卡支付的话冲10美金送25美金,简单理解就是:充值10美金用最低配置(个人站绰绰有余了)的服务器可以用10个月。

传送门:

https://www.vultr.com/?ref=7519565 充值10美金送25美金的,我是用的是这个。


如果你暂时不想花钱呢,那就点下面的链接,注册送50美金,可以去体验下,不过这个钱好像是有有效期的,一个月还是两个月,留意下看有没有多充多送。官方活动一直在变,有想了解的留意下就可以了。


https://www.vultr.com/?ref=7938020-4F 注册送50体验金,有时间限制。以前有充25送25不知道现在有没有,自己看下。


Image title

⑤ 这个就是你注册完后的界面了,当时我是用的光大的信用卡支付的,绑定支付的时候还天天担心给我乱扣费,然而用了这么久也没啥问题,我想这还是和老外消费使用习惯的问题吧,你不去点击充值它不会给你扣费。当你有一天不想用vultr了,你把在用的服务器destroy,记得要把网站和数据库先备份好(怎么备份很简单,有不懂我再写),就可以把卡删了。不过充值的话,我还是建议去注册个paypal(毕竟自动扣费不符合国人习惯)用paypal绑定你的卡去支付,一样可以得到优惠,你还可以在PayPal中把vultr自动续费给取消掉。
Image title

⑥ 当你注册充值完了,就可以动手去建你的第一个服务器了。点击servers右边的加号来创建你的第一个服务器吧。

Image title

⑦ 第一步先选择机房国家,位置的话我们选择离我们近一点的新加坡或者日本都可以。如下选择一个离我们比较近的新加坡机房,这个机房里已经没有最低的3.5/month 那就选择一个5/month 虽然价格贵了一些相应的配置也高一点。接下来勾选下enable IPv6 兼容IPv6,下面的服务器名称取一个容易记的,可以是你的域名名称,可以一次性开3个,然后选择一个能用的,完了点击蓝色的按钮 deploy now 开始部署,等到installing变成running就OK了。此时你就在新加坡的机房租用了一个属于你自己的空间。
----
选机房的时候有几个问题要注意下,如果下面步骤 ⑨ 中远程连接服务器超时或者连接不上,那很有可能你开到的这个服务器被国人给玩坏了。就销毁掉重新开一个,我写这个刚开始开的东京的机房,开了两个都连不上,开一个的成本折合人民币6分钱左右吧。
Image title

Image title

Image title


Image title

比如这个下面服务器就是连接不上,不能用。删掉它,就不会计费了,留一个你能用的就可以。

Image title

⑧ 打开刚才创建的服务器,有几个参数要了解下,看下图,每个月有1000g的免费流量(已经很多了),右边的是本月份服务器到现在的费用,这个是一个月一计算,平均一个小时0.007美分相当于人民币4分钱。下面两个就是服务器的IP跟自己服务器的远程密码,这个要隐藏好,相当于你家门的钥匙,泄漏了随便人都可以改你东西。

Image title

⑨ 服务器已经准备好了,我们不懂代码也不懂计算机知识,没有办法用发命令的方法操控服务器,所以就要装一个可视化面板来方便接下来的操作。可以安装一个宝塔面板,我觉得宝塔对新手还是很友好的,比较好用。先注册个账号:宝塔面板  上面有一些服务,现在还用不着,等你以后熟悉了,有需要再去购买,我们先用免费版的。


第一步要先连接你的服务器,windows和Mac系统方法不同,windows操作看一,Mac直接看二。

一、Windows:用ftp连接工具连接你购买的服务器,这工具有很多种,会用的用自己习惯的,我用的是putty。


1.下载并运行putty,把你服务器的IP输入进去:

Image title

2.点open 的时候会有一个弹窗,安全提示选择yes,就会看到下面的界面。打上 root 然后回车(Linux系统不能直接用删除键,注意别打错了)——如果在这一步一直卡住没有提示你yes那可能就是这个IP是不能用的,重复上面⑦的步骤。

Image title

3.把你服务器的密码(看步骤⑧里那串很复杂的数字)复制过来用快捷键ctrl+v或者单击右键粘贴(下面面板不会显示你粘贴的密码,不要担心没有粘贴上,粘贴一次就可以),回车。

Image title

4.看到下面这个出现 [root@vultr ~] # 界面的时候就代表你已经连上你的服务器了,可以直接安装宝塔面板,看下一步。

Image title

5.安装最新的宝塔6.8面板,复制下面虚线内代码,粘贴,回车:

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

-------
会看到下面滚代码的界面,碰到让你选择确定的界面直接输入y,然后回车,安装时间有几分钟,可以去泡杯茶再回来看看。

Image title

6.滚完代码了,就是下面这个界面了。画重点,下面框出来的是你的初始账号和密码,拿个小本本记起来,把这个信息记下来后就可以把putty关了。
Image title

二、Mac:苹果系统就简单一点,不需要你再去下载工具,直接打开你的终端工具。


1.Find—应用程序—实用工具—终端
Image title

2.输入:ssh root@0.0.0.0  然后回车,会问你是否继续连接,输入yes,回车(0.0.0.0就是你买的IP地址,看步骤⑧)——如果在这一步一直卡住没有提示你输入yes那可能就是这个IP是不能用的,重复上面⑦的步骤

Image title

3.把你服务器的密码(看步骤⑧里那串很复杂的数字)复制过来用快捷键ctrl+v或者单击右键粘贴(下面面板不会显示你粘贴的密码,不用担心没有粘贴上,粘贴一次就可以),回车。跟windows一样出现如下提示代表你成功连接上服务器。
Image title

4.安装最新的宝塔6.8面板,复制下面虚线内代码,粘贴,回车:
-------
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

-------
会看到下面滚代码的界面,碰到让你选择确定的界面直接输入y,然后回车,安装时间有几分钟,可以去泡杯茶再回来看看。

Image title5.滚完代码了,就是下面这个界面了。画重点,下面框出来的是你的初始账号和密码,拿个小本本记起来,把这个信息记下来后就可以把终端关了。
Image title⑩  面板安装完了现在可以开始登陆,配置你的服务器环境了,宝塔都是一键配置的,不用你去逐条敲指令了。打开浏览器,输入刚才记下的参数,把SERVER_IP替换成你的IP(IP地址是多少?看步骤⑧ )。其他不变,回车就跳转到宝塔登陆面板。把上面的账号密码输入进去然后回车。
Image title

Image title

⑪ 第一次登录要配置环境,按照下面框选的参数选择完后点一键安装就开始配置服务器环境。时间大概十分钟左右。

Image title

Image title

⑫ 安装完毕,基本上我们已经完成了第二大步骤中的服务器的准备了,但是还要再做两件事情,点开安全,然后更改两个东西,1.启用禁用ping 2.ssh端口改掉默认的,自己选择一个。这么做的目的是避免一些菜鸟黑客用工具自动扫描攻击你的服务器。默认的密码不好记可以面板设置里面更改

Image title

⑬ 新建你的网站文件夹和数据库。点左侧导航栏的网站-添加站点,根据下图输入你之前买的域名,一个带www的回车、一个不带www的(这么做目的是要告诉服务器要接受这个门牌号),再创建一个数据库,名称默认的就可以。

Image title

⑭ 点提交后。点击进入根目录文件夹,上传wordpress压缩包,就是第三大步骤中你的网页文件(前端+后台),可以直接上传zip压缩文件。压缩包看附件。 
Image title

Image title

Image title

⑮ 将Wordpress文件夹里所有的文件剪切到上层文件夹里,再删除掉下面提示的三个文件。

Image title

Image title

⑯ 回到阿里云的控制台面板,找到我们买过的域名,点击解析,添加一个A记录(目的是告诉域名要挂到这个房间)上去。步骤如下,记录值就是你服务器的IP地址。

Image title

Image title

⑰ 打开浏览器输入你的域名。看到下面的界面就可以恭喜你前面几步都成功了,你的域名能成功解析到你的网页,并且你的服务器也是可用的。再来设置下你的wordpress的工作面板,选择简体中文面板,点击继续。

Image title

⑱ 填写前面三个参数,将右边宝塔面板里数据库的信息复制到左边对应的框里面,填写完毕点提交。

Image title

⑲ 填写你网站后台的账号密码,邮箱用你QQ邮箱就可以,填写完毕点安装wordpress。

Image title

⑳ 用刚才填写的信息登录后台。 

Image title

后台界面一览

Image title

前台初始化界面。

Image title



————


OK,本篇到这里就结束了,到这里你已经从无到有建立起了一个属于你自己的,可访问的个人网站。

————

网址:www.youdomain.com

后台:www.youdomain.com/wp-admin

————

开始慢慢积累你的创作与生活吧!
你可以在文章里面发表你的日记、博客,也可以新建一个页面放你的作品集、照片。后台页面有很多的功能,慢慢研究吧,如何部署排版,用什么主题决定了你前端展示出给访客看的效果,wordpress有很多非常棒的主题,可以在网上找到很多,有需要的同学百度搜索wordpress。这种建站的方式虽然很方便,但是也有一些缺点,以后慢慢会发现出来,总体来说问题不大。
关于Wordpress后台的一些设置和主题的应用,有人看了我在写点我的经验吧。

————

写在最后还想唠叨两句。
关于如果只是要建站来进行作品展示的话,建议放到专业的设计网站上去,如behance、站酷、UI中国等,作品展示的本质在交流吧,设计网站上面专业性比较强,流量也高,还能收到同行的反馈,同时不需要自己搭建空间节省成本。但是如果你又想放到网上,又有不方便的原因让大部分人看见,或者想写点自己的个人博客,拥有自定义专属域名,还爱折腾的话,不妨跟这步骤做一个自己的个人网站来吧!

————

Tips:经常会有些网站密码要求大小写或者带符号,有的又没有要求所以很容易记乱。这里附一个表格,养一个好习惯,把用到的账号密码做一个备忘,方便下次登录。

Image title







更新:2019-04-15

下载
收藏

58人已收藏

  • 2

    作品

  • 18

    粉丝

  • 5

    关注

  • 从0到1的表情设计

    猜你喜欢

      2019-04-15 原创文章 教程 举报 2959 58 25 2

      如何从0到1制作个人网站

      0.0°

      你确定要举报如何从0到1制作个人网站

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年03月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      25
      58
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录