美文网首页失传技术研究所
【佚之狗】个人站长速成指南(手把手教你建立个人网站)

【佚之狗】个人站长速成指南(手把手教你建立个人网站)

作者: 2d3725d1f0a8 | 来源:发表于2018-10-31 21:13 被阅读6次

作者依然是我们的佚之狗同志(柳玉虎)

本文旨在用最短的时间和最少的学习量达到零基础建站并尽可能完整了解整体概念的目的,会尽量使用简化概要的描述和介绍。由于高度简化表述,本文内容可能会不够规范甚至不准确,专有名词和术语保留了英文缩写,具体定义和解释还需要读者自行查阅百科资料。

第一部分:术语和常识

必须了解的术语和概念:

网站离不开网页,目前的主流网页使用超文本标记语言(HTML)。网页上的每一个元素使用一个特定的标签表示,例如<title>yhhtech</title>表示网站的标题(也就是显示在浏览器顶端的标题)是“yhhtech”;<img src=”http://yhhtech.cn/ML128.jpg” alt=”这里写图片的信息,一般是用于图片加载不出来时显示的文字” width=”75%” />表示的是一个图像元素,其中,src、alt、width等为属性。src表示资源文件所在的位置,一般使用绝对位置(URL)来定位,如果这个资源在本站的文件夹内的话也可以使用相对路径。用相对路径和用绝对路径没有具体的要求,以具体情况方便操作就行。一般来说标签必须成对出现、标签内的参数可也不指定(可以在网页加载之后根据需要用脚本来修改需要的属性,比如图片的异步加载及切换等)。虽然主流浏览器在加载页面时都会自动关闭标签,即使标签不成对出现也能显示网页,但很容易造成错误而且不符合规范。没有内容的标签或者没法成对的标签可直接使用“/>”来关闭,如<img />、<br />(<br />表示换行)。

客户端用浏览器等方式向服务器请求一个网页后,无论在服务器上的原始页面是什么形式的,发送到客户端的一定是HTML文件(用户也可以直接通过HTTP向服务器请求图像和压缩包等文件),HTML文件内可包含样式表(CSS)和JavaScript(JS,一种脚本语言,脚本语言是解释型的,与C语言等编译型语言对应,会由浏览器的解释器一条条解释运行)。用HTML写的网页被加载时会生成文档对象模型(DOM),每一个标签会按照嵌套层级形成DOM树。DOM提供了供JS的应用程序接口(API)。开发者编写的JS会被原样地发送给客户端浏览器,浏览器的JS解释器执行并实时更改当前的页面。使用JS使得用户可以在本地与网页互动的网页称为动态HTML,但不属于动态页面(动态页面一定是指由服务器生成结果的页面。动态页面内不一定有会变化的内容,但每次访问时内容都是由服务器根据设定的变量或常量临时生成的。值得注意的是URL的后缀不一定能确定网页的类型,.html的后缀也可能是动态页面在服务器端的插件如url重写服务等应用转换的)。

使用PHP(Professional Hypertext Preprocessor,超文本预处理器,一种适用于博客论坛等web运用的服务器端脚本语言)、VB、Python等语言编写可以根据数据库或其他服务器上的数据来输出HTML的页面文件属于动态页面,对于大多数运用场景,使用Apache+PHP+MySQL是较为高效便捷且可靠的方案,而且PHP、MySQL的社区版和Apache都是开源的,开源对于个人开发者来说最大的好处就是免费,可以放心地用于一般的非直接商业情景;同时开源社区也有大量的交流讨论,对自身的学习进步也很有帮助。(狗狗建议没有接触过Linux的初学者在Windows上使用IIS+PHP+MySQL,毕竟Windows的图形界面和操作方式更加友好,不容易产生畏难心理。)

网站不一定非要用动态网页,某个页面是否需要动态技术取决于该页面是否需要与用户交互。如果只是单纯地展示固定的或者不需要实时更新的内容,那么使用静态页面较为合理,就比如很多商品介绍之类的H5(所谓的H5在圈内一般特指充分使用了HTML5的canvas+js等功能来做类似幻灯片效果的页面)介绍页面,更适合使用静态页面。但如果需要有用户系统(用户登录、积分等级、留言评论等)的话,那就应考虑用动态页面(虽然在静态页面使用如AJAX等的异步加载技术也可以实现部分要求)。动态页面,与用户交互,说简单点也就是把用户的数据存到服务器、在服务器上取用户需要的页面并发送给用户,针对这些数据,使用数据库(database,DB)是最合适的,因为符合规范的数据库都支持SQL(Structured Query Language,结构化查询语言),使用SQL可以方便地从数据库筛选查询内容以及修改数据库中的结构和内容,以便对信息资源的维护和利用(例如通过SQL来做大数据和数据挖掘)。

.PHP、.ASP、.JSP等文件也可以简单地理解成是在普通的HTML文件中插入相应服务器端脚本语言的代码块(代码块的定界符通常形如<?  ?>),这部分HTML内容就由这部分脚本产生,在脚本运行结束后输出相应的HTML到页面中这部分代码所在的区域。PHP自带用于MySQL的函数,在PHP页面中先使用连接MySQL服务器的函数,然后即可执行SQL命令。

服务器搭建完成后应先在本地对自己网站中所有的页面和功能进行调试,确认无误后再绑定域名进行发布。如果服务器在大陆境内还需要在发布网站之前进行域名备案(ICP备案)以及公网安备案,服务器不在大陆的可以不用备案。但无论是否需要ICP备案,在申请域名时都需要实名认证。

必要的基本操作:

1.安装服务程序

无论静态网页还是动态网页,用户从服务器请求一个页面时必须有一个程序来响应这些请求,把页面或者相应的数据传输给用户。为了传输这些数据,必须要用传输协议,传输协议规定服务器和客户端如何收发和处理这些数据,在web应用中最基础的协议就是HTTP(以及在HTTP基础上更安全的HTTPS)。有非常多现成的支持HTTP的响应程序,如Windows自带的IIS以及开源的Apache。Apache服务器程序几乎可以在任何网络操作系统上提供web服务。不过,在简单的应用场合上不如IIS易用,IIS安装第三方功能也更加方便一些。作为个人开发者,为了方便省事,推荐在Windows环境上搭建自己的个人网站。应根据实际情况选择适合自己的方案。

Windows系统提供可选安装的IIS服务器,在控制面板里可以勾选安装;常见Linux发行版本的运营商都有提供相应的Apache软件包,直接安装即可。

如下图是在WindowsServer2016上以完成IIS安装的情况:

(在“服务器管理器”中点击“管理”,选择“添加角色和功能”根据向导,如上图所示添加IIS。详见百度经验,这里赘述)

如下图是在Windows10上完成IIS安装的情况:

(在“控制面板中”找到“程序”中的“启用或关闭Windows功能”,勾选IIS。)

如下图是在Linux(Ubuntu/Debian)上安装Apache的情况:

(打开终端模拟器或者通过ssh连接shell,输入指令“sudo apt install apache2 php mysql-server” 等待安装)

2.安装动态页面处理程序及数据库

任何一种编程语言都需要有相应的软件来把程序员写的源文件转换为计算机可执行的文件,对于C/C++这样的编译型语言来说需要由编译器和链接器来处理并生成可执行文件,需要把整个源文件都编译和链接再执行之后才能输出结果,由于用户等待网页还可能受到网络状况和服务器负载情况的影响,编译型语言并不适合WEB应用,相比之下,执行一条语句就得到这条语句结果的解释型语言更适合存在网络延时、带宽限制、并行响应的WEB应用。(并不是说不适合就不能,实际上任何支持CGI库的编程语言都可以用来做网站后端,这需要根据具体情况来确定。比如用C++写网站后端的数据处理也是常见的、Java也被应用在很多如淘宝之类的商业网站上、Python丰富的库也给Web开发提供很大的便利而常用于博客/论坛网站)

上文介绍过的几种解释型语言响应的服务器端处理程序都可以在其官网或相关论坛找到,每种语言都有各自的风格和特色,不过基本上大同小异,开发者应根据项目要求和服务器情况以及自身偏好来酌情选择,本文以PHP为例。

在Windows上可以选择用IIS服务器也可以选择Apache服务器,本文以IIS为例。在Windows上安装和配置的具体方法如下:

下载PHP for Windows,官网下载地址:https://windows.php.net/download/

如下图所示,由于我们使用IIS的CGI,需要选择“Non Thread Safe”版本。(需要注意的是必须保证系统上已经安装了Windows Visual C++ VC14+以上的版本安装包,没安装的话可以到微软官网寻找:https://support.microsoft.com/en-hk/help/2977003/the-latest-supported-visual-c-downloads 。如果系统是32位的那就选择x86版本的。)

(关于“IIS配置PHP MySQL”的教程和帖子非常之多,很容易找到,本文就不在赘述)

第二部分:开发环境和页面语法 

正式开始之前必要的操作:

⦁ 搭建服务器:

任何一个应用的开发,往往会有相当大比重的时间花费在调试上。一个程序、一个布局甚至配色都很难一次就满意,如果每次修改都上传到服务器上再浏览的话,会浪费大量的资源。所以对于个人开发者来说配置好发布服务器之后最好再配置一个与发布服务配置相近的本地测试服务器以便在编辑器中编辑修改之后立即查看情况。编写页面(HTML)文件以及各种脚本(PHP、JS等)文件虽然可以利用任何文本编辑器,甚至可以用手机上的记事本,但是推荐使用一些集成开发环境(IDE)如Adobe Dreamweaver、Visual Studio Code(免费、跨平台、轻量、多功能、插件丰富)等。IDE集成了很多实用的功能,如自动补全代码、错误检查与提示、多段编辑等,能大幅提高开发效率、可视化和可读性。 

至于发布服务器,可以使用自己的电脑也可以租用网络空间以及租用虚拟机/云服务器。要发布一个网站必须要有固定的IP(想想一下每次公网IP发生改变都要自己查询一次再告诉访问者是多么不现实)或固定的域名(普通的域名解析要基于固定的IP,不过现在动态域名解析的成本已经很低,可以用一个域名解析到无固定IP的服务器)。

租用第三方服务通常是最方便可靠的,例如租用腾讯云的CVM可直接使用固定公网IP还能辅助备案,第三方方案通常还会提供操作说明和人工服务,但相应的成本也较高;使用自己的电脑通常需要解决两个问题:一是个人无法申请静态公网IP(门槛很高且价格不菲),二是自己的电脑通常是在局域网内而非直接连接公网(比如通过路由器/WiFi上网,这种情况也可以尝试设置路由器中的DMZ主机或者使用虚拟服务,可以参考百度经验百度经验)。针对这两个问题,通常可以使用第三方内网映射的方式来解决,比如使用花生壳等第三方服务。这种内网映射的大致原理是在需要映射的内网中安装客户端软件,客户端软件获取当前公网IP并发送给服务方的服务器(提供内容转发),当客户绑定的域名(客户的域名会被解析到服务方的转发服务器上)被访问时,服务方的转发服务器会与客户端软件通信,之后客户端软件作为访客来访问客户的服务器资源并发送给服务方的转发服务器最后发送给访客。

⦁ 使用多款不同内核的浏览器:

由于各浏览器内核并没有严格统一的规范,对HTML、CSS以及JS的解析和渲染存在差异,所以同一个网页在不同版本的浏览器都可能存在差异(有时这个差异甚至会导致页面在一个浏览器上能正常显示而另一个不能)。对于个人开发者来说,想要实现多浏览器兼容,除了需要积累常见兼容性问题解决方案之外还需要做大量的调试。个人推荐使用QQ浏览器+火狐浏览器+edge:QQ浏览器使用的是Chrome内核和IE内核,方便切换,调试网页时Chrome内核提供了强大且好看的开发人员工具(按F12可以查看或修改元素、控制台、网络等模块的信息,还可以设置内核功能如禁用JS禁用缓存等);火狐浏览器提供了很好的插件环境,深受开发人员们的欢迎,使用一些实用的调试插件也能大幅提高开发效率;至于edge等主流浏览器,即使麻烦也还是需要考虑兼容性的。

⦁ 熟记相关法律法规、遵守网络公德和规范:

任何技术都只是工具,可以带来正面的积极的益处也可能造成负面的消极恶果。个人开发者对风险和灾难的承受能力是十分有限的,必须对自己的行为负责,永远不能因为自己的技术得意忘形。应当明确自己开发和发布的意图不忘初心,了解并遵守法律法规,最好不要打擦边球,因为违规的代价对于个人开发者来说是相当难以承受的。

在大陆提供任何形式的网络信息服务必须经过ICP备案,个人备案不能出现任何商业内容,按要求还需要进行网安备案(虽然很多个人站长没有网安备案很多年也没遇到过什么问题,但是被打电话叫去还是挺麻烦的,建议还是按照要求和提示操作)。

网页编写的相关概念:

HTML:

和XML、XHTML等标记语言一样,一般由标签、属性和内容组成,把文本和其他如格式、结构等信息结合起来,通常组成树形结构。比如:

<父标签 属性名=”属性值”>

<子标签 属性名=”属性值”>内容1</子标签>

<子标签 属性名=”属性值”><子标签 属性名=”属性值” /></子标签>

</父标签>

对于HTML来说,一般完整的HTML页面必须至少要有<html>、<head>和<body>。<html>作为整个文档的父标签,所有的页面相关内容放在其中,属性值通常设置语言信息等;<head>内放置网页的相关信息如字符集(charset)、标题(title)、和样式(style)等;<body>中放置页面要展示的内容。

如下图是一个最简单完整网页:

 使用浏览器打开:

目前主流的浏览器都支持HTML5,建议除了有特殊需求的情况之外都使用HTML5。HTML5最有特色的新标签之一是<canvas>它配合JS进行绘图可以做出很多有趣且美观的交互界面,所谓的H5页面也就是充分利用了这些新标签做交互效果的网页。

HTML中每一个标签在浏览器中对应一个元素,每个元素的层级关系是HTML中的嵌套关系,当网页文件被浏览器加载时,浏览器读到<body>或<frameset>时创建浏览器对象模型(BOM,相当于窗口对象),而完成了整个HTML文件的加载即遇到</html>时生成文档对象模型(DOM,页面中元素节点的结构)。可以使用JS增删改查DOM元素以及对现有元素的属性、值、事件等进行增删改差。

JavaScript:

JavaScript简称JS,是一种脚本语言,值得注意的是,我们只是用js操作对象,这些被操作的对象必须是存在的。主浏览器都提供对js的解释但不同浏览器可能会有不同的解释结果,还需要注意各版本浏览器的解释尚且存在差异,所以用于web的js通产来说复制到其他使用的js操作的环境(如我的世界编辑器、AE表达式、xp框架)里来说没有意义。另外,Java与JavaScript没有关联而只是名字像而已,就像雷锋和雷峰塔没什么联系一样。

Js是基于对象的脚本语言,用于操作对象且一切引用类型都是对象。这样说不太好理解,这里举个简单的实例:

使用浏览器查看:

PHP:

PHP作为脚本语言,解释器逐条运行语句并把输出(echo等)放到相应的位置(PHP文件通常是把PHP脚本嵌入到HTML中,通常让PHP生成HTML进行输出)。其语法和结构类似C++/Java,有C语言基础的话很容易上手。PHP和JS类似,同样属于弱类型,定义变量可以直接$变量名,又类似java那样有权限修饰,如使用var表示公有,函数的使用也和js基本一致。如下图,PHP脚本读取数据库并生成HTML放在相应的位置(此时文件拓展名应为.php,否则会被作为注释):

效果如下:

上图中的函数“queryYHBlogByType()”是在另一个PHP文件中定义的,项目中通常会把要用到的类、函数、全局配置等单独写在别的PHP文件,尽管说PHP是“嵌入在HTML”中的,但不意味着一个PHP文件中必须要有HTML成分。如下图所示是一个简易发送邮件的库:

在各种社区及论坛如GitHub可以找到符合自己需要的库,只需要在自己的页面中使用include_once()即可使用这些库提供的函数和功能,会更加方便开发。

第三部分:常见问题及参考解决方案

(未完待续)

最后附一个APT接收交流群的大佬的心得:

apt接收也是有一定技术含量的,我也是走了很的弯路。给大家说一下。

1、首先是sdr的改进,我们买来的电视棒天线需要改成50欧匹配天线,延长线不要大于3米,而且周围不要有市电和开关电源扰。

2、制作四臂螺旋天线的时候,尺寸符合教程里的标准来做。焊接接头的时候,我发现我少了一个臂的焊接反而信号更强(A—B C D不焊在一起),查阅很的资料都不解。有的说要在天线端绕5圈做巴伦限制高频电流,诚望高手指点一二。

3、软件现在多数Orbitron(过境卫星定位)+HDSDR(电视棒操作)+wxtoimg(APT解图)组合手动接收解码出卫星图片。

4、NOAA时间范围都是早上5~9之间 下午7点~8电之间,noaa19比较特别,都是早上3~4点 下午3~4点。可以用Orbitron计算过境时间,一定要转成北京时间哦,要不白等!

5、资料都保存到群共享中,需要的可以去下载,也可以留言,有时间我也会热情解答。

6、SDR确实很多种玩法,有空我总结一下让大家一起玩。

7、关于hrpt高清因为没有合适的跟踪设备所以没有继续,关于用电视卡接收卫星信号也是我的一个梦寐想法,技术门槛太高了,需要慢慢摸索。现在给客户做单片机项目,希望能从中摸出一些道道来!

8、补充一下,电视卡用的是DSP硬件解码技术,如果有经验的ACER可以一同探讨。

最后关于乌烟瘴气民科营销号横着走的隔壁发表一下个人意见,在下虽然现在在AC,可是感觉和在家一样。虽然上传教程GUI用起来很别扭而且还经常得处理转码失败,但是AC是个好网站,从始自终没收过用户一分钱(大声)这样的网站,我不想它变质,更不希望它消失。所以我尽了自己的一份力了,还叫上我的朋友们一起。我觉得我这样比评论区一些“你这么厉害怎么不XXX”的人强door了(小声到不见),也许他们下次在大放厥词之前应该好好看看在和谁说话。我们应该让他们去那种他们向往着的有黑名单的地方圈地自萌。

山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:“何陋之有?”

相关文章

网友评论

    本文标题:【佚之狗】个人站长速成指南(手把手教你建立个人网站)

    本文链接:https://www.haomeiwen.com/subject/bueztqtx.html