【编程工具】如何用Sublime Text3建立本地服务器和站点

不久前，我学习了使用DW(DreamWare CS6)这款软件来学习HTML和制作静态网页，但是总觉得这款图形化软件不太适合我这种喜欢写代码的码农，所以最终我使用的是Sublime Text3这款软件来作为我的学习工具。但是这款软件是如何创建站点和服务器的呢？创建站点便于自己学习资料的管理，所以在这里我给大家分享一下Sublime Text3是如何操作的：

站点创建(算是站点吧)：

第一步：首先点击上方的 " Project(项目) "，选择 " Add Folder to Project(添加项目文件夹) "。

第二步：弹出对话框，自己随便选择一个文件夹或文件夹路径路径，然后点击选择选择文件夹，就样就添加完成了。

第三步：但是我们软件并没用显示出来，我们可以通过快捷键 " Ctrl+K+B " 打开侧边栏，是不是觉得发现了新世界？

这样就算是建立好了一个站点或者称之为工作区。同样的可以用相同的方法创建多个站点，如果想要删除站点，则只需要在侧边栏右击你要删除的站点名称，然后点击 " Remove Folder from Project(删除项目文件夹) " 就行了。

站点服务器创建(需要插件 SublimeServer)：

这个过程比较复杂。前提条件是需要安装 " SideBarEnhancements " 侧边栏增强插件。

第一步：安装完 " SideBarEnhancements " 插件后，首先为 " SideBarEnhancements " 指定默认浏览器。打开 " Preference " -> " Package Settings " -> " Side Bar " -> " Settings User-User "，在打开的文件中添加如下代码：

{
	"fefault_browser": "chrome" //aurora, canary, chromium, firefox, ie, opera, safari,
}

这里是选择默认浏览器，只要名称没问题就行。

第二步：打开侧边栏("Ctrl+K+B")任意文件/文件夹上点击鼠标右键，选择 " Project " -> " Edit Preview URLs " ，在打开的文件中添加如下代码：

{
	"E:/Sublime Text3/test1/": {
		"url_testing": "http://localhost:8080/test1/",
		"url_production": "http://www.4399.com/"
	}
}

代码解释：

1. " E:/Sublime Text3/test1/ "：是项目在磁盘中的路径，请改为你的项目地址。

2. " url_testing "：是你本地的 localhost 地址，如果不能打开，加上端口试下，如我这里设置的是8080端口。

3. " url_production "：是项目在线上服务器上的地址，别人可以通过这个地址查看你的网页，当然前提是你得要有服务器。我这个是随便写的。

提醒：请根据自己的情况一一进行修改。

为浏览器绑定热键：点击这里(查看方法二)

SublimeServer 插件使用方法：点击这里(在下面序号为24)

私货：

要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。

1、规划站点结构：

网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web 站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。

2、创建站点：

在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。

3、搭建站点结构：

站点是文件与文件夹的集合，下面我们根据前面对xmweb网站的设计，来新建xmweb站点要设置的文件夹和文件。

新建文件夹，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择“新建文件夹”项，然后给文件夹命名。这里我们创建新建8个文件夹，分别命名为：img、med、swf、txt、css、js、moan和fy。

创建页面，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择“新建文件”项，然后给文件命名。首先要添加首页，我们把首页命名为index.html，再分别新建01.html、02.html、03.html、04.html和05.html。

4、文件与文件夹的管理：
对建立的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，再弹出菜单中选“编辑”项，即可进行相关操作。

私货来源：百度