网站是怎么建成的——从个人经验谈起

Haopeng Yu大约 10 分钟

之前提过怎么快速学建站的各种知识和我建基因分析网站的过程。目前网站已经完工，自己在这段时间中也学到了很多建站的知识，所以上一篇是日志，那么这个就来个干货满满的技术博文好了。

简单说，网站的前端和后端是啥？
怎么做网页？
怎么学习做网页？
怎么配置后端？

简单说，网站的前端和后端是啥？

建站主要有前端和后端，前端就算做网页，后端就是做让前端正常运行的服务器相关工作（我的理解）。如果做简单的网站（现在似乎大多人都是这么干的），后端直接用各种可视化极好的用户友好型管理工具就可以完全弄好了（这个一会说）。所以，目前看起来，前端，也就是做网页更重要。

那如果要开始做一个网站，建议新手可以先把网页做好，再去考虑域名和服务器。很多教程一上来就算租阿里云，买万网域名=-=，之后大家折腾完这两步（因为需要备案各种麻烦事），买了都浪费了，简直就算建站劝退。

所以大家做好了网页，怎么运行呢？很简单，双击啊。或者拖到自己的浏览器，强烈推荐火狐或者Chrome浏览器，别用IE......这样，能在你自己的电脑上显示出来了，达到你的预期效果了，这时候再想着服务器和域名，并且先考虑域名，再考虑服务器，这个顺序。

那废话不多说啦，跟大家说说怎么做。

怎么做网页？

做网页，首先看需求，需要一个怎样的网站？一个展示页面？博客？或者就想自己从头做个网站，比如一个类似计算器式的输入DNA序列返回RNA序列的小工具等，自己用或者发一篇文章，呵呵：）。

一个一个来啊：

如果做一个展示页面，直接下别人的模板最方便，百度下载一个模板，把里面的图片，文字全改了，好了，你的展示页面做好了。
博客，有二级页面，因为现在博客框架很多，比如我用的这个Jekyllopen in new window的NexT.Museopen in new window主题，支持markdown语法，所以很简单。其他有二级页面的网站有模板用模板，没模板就好好学HTML了。
自己做网站，不靠模板的，这个需要你看我之前的博文：零基础如何学建站(基础篇)open in new window，我在这里给你画画重点啊~
- html框架，内容少，重点；
- JavaScript，重点，如果你会其他编程语言这个会学的很快，网站所有计算过程都得用JS，现在JS还支持tensorflow=-=，不好好学怎行？
- CSS，重点，负责排版，让你的网页排版更美观。虽然有很多CSS库，比如下面说到的BootStrap，但这个是基础。
- jQuery，次重点，目前大家基本都在用的js库，可以简化js程序，也有丰富的动态效果。
- Bootstrap，次重点，如果你想让你的网页看起来更新潮，不像10年前的网站，就好好学这个js库，能让你的网站各种新潮。
- MySQL，非重点，除非你要做数据库或者包含数据库的网页，那么才需要学这个。我下一步就准备学这个，做一个我们专业的生物学数据库啦~
- PHP，非重点，“PHP是全世界最优秀的语言”......
其实，这次我主要接触的是前4个，后两个没接触到-0-，以后学了再跟大家分享。
这些语言学习的具体做法我稍后再慢慢说。
怎么学习做网页？
急功近利的做个网页
我先说说急功近利的学法吧，这个方法一定大受欢迎。
首先，在W3C school上画2-6小时时间把前端编程实战闯关做完（这个是免费的，相当良心），之后基本就把大概就学完了。这也是我在零基础如何学建站(基础篇)open in new window里面说的。
之后呢，找个模板，开始改！改成你的需求，你的文字，你的照片，完事。因为毕竟学了点基础，所以改这些都很随意。
好了，这样你就急功近利的完成了一个网页，是不是很炫酷。
注意，我说的是W3Cschool，还有一个W3school里面有各种语言的说明和示例，还有编程示例，不过木有我说的这个闯关的。所以大家先去W3Cschool好了。
非急功近利的做个网页
非急功近利就是好好学呗。Bilibili上就有好多免费的课程，重点呢，就算把某个课程全部学完，而不是这个课学一点觉得没意思，换下一个学一点觉得无聊，最后画几百元买个课程，还是没坚持完=-=
推荐Oeasy的课程和极客学院的课程，自己在B站搜就好了。
不过个人觉得，你可以先急功近利一下，再好好学。之后以项目为支撑去学，也就是比如你要完成某个功能，百度，最后直到实现整个网页，也就是整个项目，这时候你回过头，发现自己已经学了一大堆知识了。
编程这种东西属于工程类，需要的是不断上手练，敲代码，就算是敲一模一样的，如果只是看视频是学不到东西的。所以，需要本身对这件事感兴趣才行，要不肯定会觉得各种枯燥。（我夫人看见代码就头疼，所以她肯定是学不了前端的了......）
再简单的说一下各个语言
首先是HTML，刚才已经跟大家说了要学那些语言。html是框架，你按照这个框架随便写一句话就是网页了
```
<!DOCTYPE HTML>
<html>
 我的第一个网页=-=！
</html>
```
你把这几个粘贴到一个文本文档，之后把这个文档的后缀改成html，双击看看。
所以说嘛，先学html基本框架才是重点，我在做我的项目的时候，发现canvas标签很好玩哎，很像Python里面的turtle小乌龟，用程序就能在网页上画画。此外还可以加上时间线做动画，简直666.
下一个语言，JavaScript。HTML只是显示出来，比如你写个标题，加个按钮，但是，单击按钮之后，执行什么操作，这些是需要用JavaScript去实现的。那就用按钮单击说吧，比如：
```
<!DOCTYPE HTML>
<html>
    
<meta charset="utf-8">
<button>我是个按钮</button>
</html>
```
这时候你双击在浏览器就可以看到个按钮了，然额怎么点都没反应，为啥呢？因为你没告诉他点了要干嘛？
所以我们现在要实现，点一下，弹出来一个警告框，为啥点我？
这个“点击”叫做事件，button单击事件叫onclick()，直接写到button后面
```
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<script>
//	标准做法是定义一个叫，jiao的函数
	function jiao(){
		alert('你点我干嘛！！！');
	}
</script>
<button id="anniu1" onClick="jiao()">我是个按钮</button>

<button id="anniu2" onClick="function(){alert('你点我干嘛！！！');}">我还是个按钮</button>
</html>
```
上面写在script标签里面的就叫做JavaScript，简称JS，以后也可以单独把这些写到一个XXX.js的文件，之后调用就行。
BootStrap呢？
就是能让上面的按钮变得好看，用class实现。也就是它预先定义了很多CSS的类以及JS脚本，让你可以很轻松的调用。
```
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<button id="anniu3" class="btn btn-danger" >我是个用了BootStrap的漂亮的红色危险按钮</button>
</html>
```
那JQuery呢？
它是一个JS库，也就是提前写了很多JS脚本，我们用着方便。我就用选择按钮，改变文字来说明：
```
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script>
    //这是非JQuery方法方法
	function gai1(){
    //首先定义一个变量but，获得页面中(document)的叫(anniu3)的元素
			var but1 = document.getElementById("anniu3");
    //改变它的值
			but1.innerHTML="改变文字";
    //或者简单的写法
    //document.getElementById("anniu3").innerHTML="改变文字"
	}
    //这是JQuery方法方法
	function gai2(){
    //$("#XXX")这个叫选择器似乎，可以选择叫某个名字的元素，后面直接跟方法
		$("#anniu3").text('用JQuery改变文字');
	}	
</script>
<button id="anniu3" onclick="gai1()" class="btn btn-danger">我是个用了BootStrap的漂亮的红色危险按钮</button>
</html>
 
```
除了选择，jQuery还定义了很多种动态效果，所以很实用。
其他的慢慢学吧~

所以，看我说了这么多，有木有觉得很简单啊~

怎么配置后端？

网页做好了，那么接下来......

如果你需要让别人看到你的网页，你就需要一个域名。你就可以在万网几十块钱买个域名了。

不过并不是这么简单，接下来，你需要备案，采集照片，身份证，填写网站信息等等。

并且，个人只能申请个人域名，个人域名备案的时候只能往上面放博客类似的东西。

不过现在阿里云备案系统会有专人审核和协助你备案，所以相对来说简单一点，不过也很麻烦，折腾完至少1-2个月吧。

之后就算买服务器了，阿里云，腾讯云，华为云等等，或者你用自己家的电脑也行。

安装Linux系统，推荐CentOS或者Ubuntu，之后安装各种后端需要的软件：

Nginx或者Apache作为服务器代理程序，之后把你的网站放到对应的www文件夹里面，设置权限为775就好啦。

上一句话听不懂的朋友自行百度：）。

此外可能还需要安装，PHP，MySQL如果你用得到的话。

之后呢，你的服务器有一个ip地址，需要和你购买的域名绑定起来，这个就叫做DNS解析。一般在哪买的，比如万网，从阿里云控制台就可以配置云解析，大概意思就算，每当用户输入atlasbioinfo.com的域名的时候，都让他们访问39.XXX.XXX.XXX的服务器链接，到时候我的Nginx或者Apache就会把我做的网页放到用户的浏览器页面上。

后端说的比较粗略，其实这个很简单。百度就好了。

说了这么多，是不是觉得做网站很容易啊~~~

博主简介

网站是怎么建成的——从个人经验谈起

简单说，网站的前端和后端是啥？

怎么做网页？

怎么学习做网页？

急功近利的做个网页

非急功近利的做个网页

再简单的说一下各个语言

怎么配置后端？