⑴ Web前端工程师的入门指南-教你如何成为一名web前端开发工程师
今天小编要跟大家分享的文章是关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师。经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何?经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何?当成功处理了数千个用户的操作时，你感觉如何？
大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉确实令人兴奋和惊奇。Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。每年，行业中都会涌现出新技术和工具，以提高开发人员的工郑槐作效率，并为用户提供更好的网站。对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将讨论要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员(前端，后端和全栈)的实用指南。
1、首先确定你的目标或道路
我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。成为Web开发人员的原因有很多，下面列出了一些选择因素：
·你想作为一卜丛贺名Web开发型派人员在一家公司工作，这是最普遍的原因。
·你想以自由开发人员的身份来开始自己的业务或代理。
·你可以成为其他公司的顾问。
·你可以创建自己的应用来赚钱。
·编码是你的业余爱好。
从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。后端和全栈开发也是如此。
2、Web开发的基本工具和软件
·
计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。
·文本编辑器/
IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime
Text或Atom。如果我们谈论IDE，那么是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。
·
Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。
·终端：您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper这些都是可以使用的选项。
·设计(可选)：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe
XD，Photoshop，Sketch或Figma。
3、从HTML和CSS开始
HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。
·HTML5(语义元素，属性，文档类型等)
·CSS基础知识颜色，字体，位置，盒子模型等。
·CSSGrid和Flexbox对齐内容或创建列。
·CSS自定义属性
4、响应式布局
您的应用程序应该在所有类型的设备(例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备)上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。
·了解如何设置视口
·媒体查询不同的屏幕尺寸。
·流体宽度
·雷姆单位
·移动优先
5、自定义可重用CSS组件
与其依赖大型的CSS框架(如Bootstrap)，不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。的新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。
6、CSS框架
学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。
·Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。
·Tailwind
CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。
·物化
·布尔玛
7、前端必须语言：JavaScript
学习HTML和CSS之后，接下来需要学习的是Vanilla
Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言(例如PHP，Python或#)中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题
·JavaScript基础知识(变量，数据类型，函数，条件等)
·DOM(文档对象模型)
·JSON(JavaScript对象表示法)
·提取API(请求/响应/Ajax)
·如果您想转向React，Vue，Angular或其他框架，现代JS(ES6)概念对于学习非常重要。
8、一些重要工具
Web开发中将使用一些工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。
·
Git(版本控制)和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。
·
了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。
·大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual
Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。
·Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。
·
学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库(例如React)，那么这些软件包管理器将使用很多，但是对于其他语言(例如Python或Php)，您将使用不同的软件包管理器。
·
如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。
9、基本部署
此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。
·域注册(Namecheap，Google等)
·托管托管(InMotion，Hostgator，Bluehost等)
·静态主机(Netlify，Github页面)
·SSL证书。
·FTP，SFTP(文件传输协议)非常适合小型应用程序。
·SSH(安全外壳)，用于高级应用程序。
·CLI和Git。
到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架(如React，Vue或Angular)将是很棒的。
10、前端框架和状态管理
框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。
·React：React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将Rex和
ContextAPI与Hooks一起使用以进行状态管理。
·Vue：
Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。
·Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习
TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和Services是可以学习此框架的良好状态管理器。
可选学习：
·
如果您具有这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。
·
了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。
·静态网站生成器：Gatsby(反应式)和Gridsome(Vue)
我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。
11、服务器端语言(选择一种)
您应该至少了解一种服务器端语言。要在2020年选择一种语言，下面提供了一些选项...
·NodeJS(不是语言，而是运行时环境)
·Python(非常适合初学者)
·Java(适合大型组织)
·Php(适合自由职业)
·Ruby(2020年少两极)
·C#
·Go
注意：无论你喜欢学习哪种服务器端语言，都要确保你了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串(最重要)。你将同时使用这两种方法。
12、服务器端框架(选择一项)
一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。您可以选择以下给出的选项之一...
·Node.js_Express，Koa，Adonis，Feather.js，Nest.js
·Python：Django，Flask，
·Java：SpringMVC，Grails
·PHP：Laravel，Symfony，Codeignitor，Slim
·Ruby：Sinatra上的RubyonRails
·C#：ASP.NETMVC
·Go：Revel
13、数据库(选择一项)
大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。
·关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MSSQL。
·NoSQL：MongoDB，RethinkDB，CouchDB
·云数据库：Firebase，AzureCouldDB，AWS
·轻量级和缓存：Redis，SQLlite，NeDB
在学习数据库时，您还将学习RDBMS，ORM(对象关系映射器)或ODM(对象数据映射器)的SQL(结构化查询语言)。GraphQL
：(可选)您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且相当容易实现。
14、CMS：内容管理
您绝对应该了解内容管理系统，尤其是如果您是自由职业者。CMS用于将内容添加到您的网站或应用程序。客户能够更新自己的内容非常好。
·
传统CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enro(Javascript)
·其他CMS：DEDECMS，帝国CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。
在大多数公司中，有不同的团队从事DevOps的工作。因此，拥有有关DevOps的知识完全是可选的。您可以了解到，如果您正在从事自己的项目。
·SSH(安全外壳)
·Web服务器环境：NGINX，Apache
·应用程序托管：Linode，Heroku，AWS，Azure，Now。
·虚拟化：Docker，Vagrant
·测试：单元，功能，集成等
·负载平衡，监视，安全性。
以上所有技术工具都足以使您成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。
以上就是小编今天为大家分享的关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师的文章，希望本篇文章能够对正在从事web前端工作的小伙伴和正在学习web前端知识的伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的web前端开发工程师！
英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻译|web前端开发(ID：web_qdkf)
⑵ WEB前端专利点的申请有哪些
专利法中没有明文规定哪些互联网产品可以或不可以申请专利，原则上任何互联网产品都可以申请专利，但可能会因为不合专利授权条件而被驳回，导致企业浪费了时间、金钱、公开了产品秘密也得不到专利的保护。
软件技术申请专利以保护软件流程步骤方法，也可进行计算机软件着作登记以保护程序源代码。申请专利的话，通常只能申请发明专利，授权风险较高，请谨慎。
以上信息来自快法务，希望可以帮助您，如果您还有疑问可以追问或登陆快法务平台查看。
⑶ 前端专利方向有哪些
1、首先搭建服务。
2、其次无服务器。
3、再其次智能化。
4、最后IDE。全称"Web前端开发"，简称“前端"，又称作“客户端开发" .可以这样简单的概括，只要是浏览器或移动设备上能直接被人看到的界面，都可以是前端开发者的工作负责范围。而配合前端工作的开发人员被称作“后端”也称作“服务器端" 。
⑷ javascript做的前端网页能不能申请软件着作权
可以申请
软件着作权登记办理步骤
1、办理流程
填写申请表--→提交申请文件--→缴纳申请费--→登记机构受理申请--→补正申请文件（非必须程序）--→取得登记证书
注释：如已登记软件的着作权发生继受（受让、承受或继承），权利继受方办理着作权登记时需先做软件着作权登记概况查询。（查询申请表可以到我中心网中的“软件登记特别提示”中下载）
2、填写申请表
在中心网站上，首先进行用户注册，然后用户登陆，在线按要求填写申请表后，确认、提交并打印。
3、提交申请文件
申请人或代理人按照要求提交登记申请文件。
4、缴纳申请费
申请文件符合受理要求时，软件登记机构发出缴费通知，申请人或代理人按照通知要求缴纳费用。
5、登记机构受理申请
申请文件符合受理要求并缴纳申请费的，登记机构在规定的期限内予以受理，并向申请人或代理人发出受理通知书及缴费票据。
6、补正程序
根据计算机软件登记办法规定，申请文件存在缺陷的，申请人或代理人应自发出补正通知之日起， 30个工作日提交补正材料，逾期未补正的，视为撤回申请；经补正仍不符合《计算机软件着作权登记办法》第二十一条有关规定的，登记机构将不予登记并书面通知申请人或代理人。
7、获得登记证书
申请受理之日起30个工作日后，申请人或代理人可登记我中心网站，查阅软件着作权登记公告。北京地区的申请人或代理人在查阅到所申请软件的登记公告后，可持受理通知书原件在该软件登记公告发布3个工作日后，到我中心版权登记大厅领取证书。申请人或代理人的联系地址是外地的，我中心将按照申请表中所填写的地址邮寄证书，请务必在申请表中填写正确的联系地址。
注释：外地的软件登记申请人或代理人如需自取证书，应当在申请表中申请人或代理人信息栏内的联系人后加注括号，写明联系人的北京联系地址，我中心将不做邮寄处理。
⑸ 前端网页简历模板
写好简历对前端网页求职者求职成功起着非常重要的作用。以下是我为大家整理的前端网页简历模板，希望你们喜欢。
前端网页简历模板(一)
姓名：xxx
国籍：中国
目前所在地：广州
民族：汉族
户口所在地：湖南
身材：158 cm46 kg
婚姻状况：未婚
年龄：25 岁
培训认证：
诚信徽章：
求职意向及工作经历
人才类型：普通求职
应聘职位：网页设计师/美工:设计师 网站策划 文案策划 广告 设计/策划 项目管理与策划
工作年限：4
职称：无职称
求职类型：均可
可到职-随时
月薪要求：3500--5000
希望工作地区：北京 北京 北京
个人工作经历：2005.3-2008.2 二年前台网页设计,文案写作和制作，ASP代码的编写，动画片头,动画BANNER设计与制作，后台页面框架设计和各功能的分析与实现，功能分配图表设计。其作品有:;;,;;;;;;;;;;;;;;;;;;;;等40多个网站设计与制作.
2004.12-2005.2娄底宏远电脑学校网页设计、FLASH动画设计辅导老师。
教育 背景
毕业 院校：邵阳学院
最高学历：大专
毕业-2003-06-01
所学专业一：行政管理
所学专业二：网页设计
受教育培训经历：2004.7-2004.12宏远电脑学校培训网页设计，并以优异的成绩毕业于校且被留校任辅导老师(网页设计与动画设计)
2000.9-2003.6邵阳学院，攻读行政管理专业三年。在校期间任班内团知书，各专业成绩优秀。予以毕业
语言能力
外语：英语良好
国语水平：良好
粤语水平：一般
工作能力及其他专长
为人热诚，朴素大方，活泼开朗，具有坚强的毅力和较强的沟通能力，人际关系处理较好，有强烈的团队精神，以忠诚、务实、拼搏、勤奋来提升自己、完善自己，并能熟练使用Dreamweaver,Flash,Photoshop,corelDRAW等各设计软件，能用DIV+CSS布局网页设计。
前端网页简历模板(二)
基本信息
姓 名：陈xx
性别：男
婚姻状况：未婚
民族：汉
户 籍：广西
年龄：27
现所在地：南宁
身高：174
联系电话：135*****
电子邮箱：xuexila.com
求职意向
希望岗位：原画/动画/3D设计，网页设计/制作/美工/UI，平面设计总监/经理/主管
工作年限：职称：无职称
期望薪资：面议
求职类型：全职
到岗时间：随时
个人工作经历
**公司
起止年月：2011-03 ～ 2012-04
公司性质： 中外合资
所属行业：医疗/护理/保健/卫生
担任职位： 企划设计主管
工作描述： 公司总部及下属门诊部项目企划设计及对外宣传平面媒体广告设计及制作流程跟踪把关验收，电子书/杂志排版制作等设计。公司VI网站项目策划及 网站美工FLASH动画3DMAX场景设计。
离职 原因：
**公司
起止年月：2009-05 ～ 2011-02
公司性质： 外商独资
所属行业：计算机/互联网/通信/电子
担任职位： 网络技术 部主管
工作描述： 公司VI平面宣传广告网站项目策划 网站美工FLASH动画3DMAX场景制作电子书/杂志排版制作等设计。
离职原因： 个人原因
**公司
起止年月：2007-03 ～ 2009-04
公司性质： 外商独资
所属行业：计算机/互联网/通信/电子
担任职位： 美工部主管
工作描述： 1、3D动画效果设计。2、公司VI/平面宣传广告/FLASH片头动画/网页FLASH动画/全FLASH网站设计。AS语言。3、网页前台设计及网站维护管理。
离职原因： 个人原因
**公司
起止年月：2006-08 ～ 2007-01
公司性质： 私营企业
所属行业：石油/化工/矿产/地质
担任职位： 设计师
工作描述： 1、现场量尺寸计算用料,绘制CAD图,发回工厂制作。2、展柜3D效果图设计。
离职原因： 个人原因
**公司 起止年月：2005-05 ～ 2006-06
公司性质： 私营企业
所属行业：广告
担任职位： 设计师
工作描述： 1、3DMAX效果图设计。2、平面广告设计。
FLASH动画设计。
离职原因： 个人原因
**公司
起止年月：2003-09 ～ 2005-03
公司性质： 私营企业
所属行业：石油/化工/矿产/地质
担任职位： 广告营削策划
工作描述：
广告营削策划设计(宣传POP海报/宣传册/大型户外广告，招牌/店头招牌)
3DMAX效果图设计(加盟店效果图设计)
仓库系统维护(产品编码录入，设定利润值及数据库管理)
超市收银系统管理(扫描编码录入/入货价格设定，设定利润值及数据库管理备份)
离职原因： 个人原因
教育背景
毕业院校： 广西建筑材料工业学院
最高学历： 大专
获得学位: 大专
毕业日期： 2003-07
专 业 ： 建筑装饰
起始年月 终止年月 学校(机构) 所学专业 获得证书 证书编号
1999-07 2003-07 广西建筑材料工业学院 建筑装饰 毕业证
语言能力
外语： 英语一般
粤语水平：良好
国语水平：良好
工作能力及其他专长
1、4年的设计专业学习接受过正规的美术教育，具有较好的美术手绘功底及艺术素养和8年的工作 经验 熟练应用：3DMAX ,Vray喧染器 ,Lightscape ,CAD ,Photoshop ,coreldraw , AIFlash ,Dreamweaver ,fireworks等各类设计软件。
2、能够独立或者团队合作高效率地完成工作。
3、对公司产品及项目的宣传企划设计有相当丰富的经验。
自我评价
工作脚踏实地，善于创新、敢于迎接挑战。有很强的精力投入工作。学习能力强、乐业敬业,强调团体合作精神。
前端网页简历模板(三)
目前所在： 荔湾区
年龄： 20
户口所在： 阳江
国籍： 中国
婚姻状况： 未婚
民族： 汉族
培训认证： 未参加
身高： 150 cm
诚信徽章： 未申请
体重：
人才 测评： 未测评
我的特长：
求职意向
应聘职位：网页设计/制作/美工：
工作年限： 3
求职类型： 实习
可到职日期： 随时
月薪要求： 1000--1500
希望工作地区： 越秀区,天河区,海珠区
工作经历
苏宁电器(广州市)
起止年月：2010-10 ～ 2010-10
公司性质： 中外合资
所属行业：服务业
担任职位： 后台客服
工作描述： 后台协助物流部门工作让我加强了与客户的沟通协调能力，也提高了处理问题的能力，工作认真、勤奋，得到好评。
教育背景
毕业院校： 广州市工贸技师学院 广东商学院
最高学历： 大专
获得学位:
毕业日期： 2011-07
专 业 一： 电子商务与 财务管理
专 业 二：
起始年月 终止年月 学校(机构) 所学专业 获得证书 证书编号
2008-09 2011-07 广州市工贸技师学院 电子商务与财务管理 助理电子商务师 办公软件 -
语言能力
外语： 英语 一般
粤语水平： 良好
其它 外语能力：
国语水平： 良好
工作能力及其他专长
本人主修课程：会计基础、财务会计、中级财务会计、工业会计、电子商务、经济学、管理学、中国税制、统计学、应用文写作等。熟悉的软件有：办公软件、会计电算化、网页制作、Fhotoshop、Dreawearn。
详细个人自传
本人性格开朗做事认真、负责，有耐心，心思敏捷，能吃苦耐劳。本人曾在学校参加学生会，并获得“优秀学生干部”，同时加入教务助理组，协助老师管理学校秩序和考勤记录工作。也曾在教务助理组协助主席举办 辩论 赛并担任主持人，并获得“优秀主持人”称号。年轻代表着热情有活力，希望能在往后学到更多的经验和知识。
⑹ 前端工程师零基础个人网站搭建
大家好，我是一名前端工程师，我想大多前端工程师都渴望自己独立搭建一个个人网站，不管是出于更多的学习提升自己的核心竞争力，还是想要展示自己建一个个人博客，亦或者是纯粹出于好奇想建站一条龙跑通，反正，就是要自己独立搭建一个网站跑通。你可以说没有以上的想法，反正我有，所以，我就尝试了，最后输入我的网址 maramlee.com ，成功展示了“hello world”。啊…哈哈哈……
打算写这篇文章是希望能给想要尝试自己建站却迷茫在前端的同学一点方向，可能就有人说了，网上随便搜零基础建站一大堆，不需要我在这边写，我回想我这建站之路，觉得还是很有必要，相信肯定会有一部分人会因为我的这篇文章而受益。
我在建站之初就查过很多资料，网上的资料很多很杂，有各种原因：比如太多不好分辨，有些时间比较久远，也有很多本来是基础点却各行如隔山一脸懵，等等，所以实际操作起来比较吃力。我这里就从最初的申请域名开始，到最后输入网址出现“hello world”，整个流程串联起来，希望起到抛砖引玉的作用。
我希望您是一个有前端开发基础的人，当然，我尽量将用到的技术点都提出来，希望能给没有基础的人一个思考方向。
我这边域名、服务器等用的是阿里云，不用这个平台的小伙伴儿与自己的平台自行对比哈，有问题，也可以给我评论留言，一起探讨。如果不知道选哪个平台申请，可以和我一样，注册一个 阿里云账号 ，再跟着我做。
此节有 注册域名 、 实名认证 、 备案域名 这几个流程。
输入想要的域名，未被占用即可注册。具体操作，请参见 注册通用域名 。
域名后缀通常为.com或.cn，基本上是能注册 .com 就注册 .com ，更多后缀请参见 域名区别 。
具体流程，请参见 域名实名认证概述 。
说明 使用中国大陆境内服务器托管您的网站时，需要进行备案。否则不需要备案。
为节约备案时间和顺利通过备案，建议您提前了解并做好备案前的准备工作：
各省管局要求资料有所不同，请根据 各地区管局备案规则 准备资料。更多详情，请参见 ICP备案前准备概述 。
如果按步骤来的话，没有备案过，所以参见： 首次备案 。
如果您是其他备案场景，请参见 ICP备案快速入门 。
先前往 实例创建页 ，对于运维来说，这节比较简单，但是作为运维小白，购买服务器的时候，要注意根据自己的实际情况购买，强烈多查下阿里云的文档： 使用向导创建实例 ，很详细！同时多看看提示、注意事项等。下面是我这个运维小白看了文档后总结的步骤，如果你是小白也可以这样做，如果有运维人员发现我的描述这些有问题的话，也请多多指教哈。
比如你只是想学学试一下，就选择“按量付费”（注意按量付费的话，要先充值，记得充100-200都可以），但你希望长期维护就选择“包年包月”。
这个要注意，总的来说，查看的网站的人在哪里多，就选哪里，如果你自己的博客，也可以选择自己所在地，反正全国范围内用的话，都差不了多少。更多的参见： 教我选择地域
作为玩玩的网站，就按最小的选就可以了。
不知道怎么选，建议选择 CentOS 7.4 64位。注意，如果你是 windows 的电脑，也不要想当然的选择 Windows Server 系统，这里是你的服务器镜像，可以简单的理解为这是一台新电脑的配置，和你本地使用的电脑系统无关。
这个看你存储东西决定，你可以想象成你新买一个电脑，这里的存储可以看成电脑的内存。系统盘是必须选的，可以看成 windows 系统的 C 盘。至于数据盘和 NAS 存储，不了解也可以先不选。对于玩玩的小伙伴儿，可以直接就操作系统盘打通流程，至于其他数据盘什么的，可以后面深入了解了再扩展。
这个有“经典网络”和“专有网络”的区别，现在新开的账号，都只有“专有网络”这个选项，就直接选这个就可以了，想知道更多它们可以自行查阅资料。
默认勾选“分配公网IPv4地址”即可
做测试用的话，就选“按使用流量”即可
可以看情况选择，一般的玩玩，默认 5M 即可
想要了解详细内容，可以查看： 教我选择> 。安全组可以根据提示，新建一个安全组： 新建安全组> ，这里进去后，新建时，需要创建专有网络，根据提示填写，一般默认就可以。
剩余的弹性网卡和 IPv6 作为小白来说，暂时用不到，可以打通流程后再进行知识补充。
这个看你心情，可以登陆后再设置，可以“自定义密码”也可以用“密钥对”，根据文档提示操作即可
再之后的操作可以看你情况设置，问题不大，确认好后即点击购买即可。具体详细操作，记得看文档哦~
域名解析后，外部用户才可通过域名访问网站。比如输入 .com 就可以访问网络网站。
主要操作，看阿里云的这个文档就可以了： 设置域名解析快速入门
部署网站这里涉及到服务器部署，对于前端来可能比较陌生，可能对后端来说比较容易些，但是，这个也不是很难，阿里云给了部署的方式： 自助建站方式汇总 ，可以选择适合自己的方式进行部署。我是前端人员，最熟悉的语言是 javascript ，所以，我选择用 node.js 部署，阿里云文档里也有对应的操作文档： node.js部署
这样，你的第一个网页就出来啦~~~
作为小白，踩过的坑真的不少，像不会后端怎么办？学 node.js 。不会 Linux 系统操作怎么办？查 Linux 常用操作。反正就是各种找文档，找学习资料。这里就稍微提下比较基础的坑，希望对其他小白有帮助。
连接 ECS 实例有多种方法：
注意，绑定了密钥对之后，上面两种连接方式都不可以用了。
想知道更详细的内容，可查看 文档 。
Linux格式化数据盘 文档中有写，格式化数据盘，需要挂载，随实例一起购买的数据盘，无需挂载。而且，云服务器ECS仅支持数据盘分区操作，不支持系统盘分区操作。我前面就没注意到，系统盘，就是随实例一起购买的数据盘，我只有这个盘，看文档的时候就跟着操作，进行分区，分了很多次，用 fdisk -lu /dev/vda1 查看分区成功的，但是，运行命令 mkfs.ext4 /dev/vda1p1 在新分区上创建一个文件系统就一直报错：The device apparently does not exist; did you specify it correctly? 找不到文件系统。最后找了很久才发现犯了低级错误，在系统盘分区。
由于我不是计算机科班出身，不是很了解 ip 地址，在安全组里创建规则的时候，对于授权对象一栏，一脸懵逼，于是查找了下 IP 地址相关知识。
有一点基础的人都知道，控制台输入 ifconfig 打印出的地址，与电脑中图形化界面上显示的 ip 地址一样，但是，这个地址是内网地址，并不是外网地址。
我在这里做测试的时候就将内网 ip 设置上，然后一直没有预期效果。
外网地址，可以打开网络，直接搜索 ip 就可看到你的外网地址。
对于 ip 地址也是恶补了下，不了解的小伙伴儿可以参考这个地址： CIDR的IP地址的表示与划分方法 ，对于这个实例，我也做了个笔记，供大家参考：
主机ID全为0和主机ID全为1的为非法IP地址
网络ID相同的就属于同一网段
C类：C类IP地址：
3字节的网络地址（最高位必须是110）+1字节的主机地
CIDR：无类域间路由
IP地址/网络ID的位数 0.0.0.0/0
子掩码：子网掩码的二进制格式中的网络位全为1。这样二进制格式的子网掩码和二进制的IP地址进行“与”运算，可以得出该IP地址的网络位。
CIDR技术用 子网掩码 中连续的1部份表示网络ID，连续的0部份表示主机ID。
例如 ：192.168.23.35/21，计算子网的网络ID、子网掩码、起止IP地址
子网掩码：255.255.248.0
网络ID：192.168.16.0
起始IP地址：192.168.16.1
结束IP地址：192.168.23.254
由于我使用的是阿里云平台，文章中很多节选自阿里云，想了解更多的小伙伴儿请多查看阿里云文档。
我是事后回忆写的文章，所以，可能有遗漏的地方，如果读到发现有问题，请给我评论或留言，我会持续改进此文。