-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
571 lines (421 loc) · 83.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hexo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
<link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Hexo</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-云服务器线上环境搭建" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2018/02/20/云服务器线上环境搭建/" class="article-date">
<time datetime="2018-02-20T04:32:59.431Z" itemprop="datePublished">2018-02-20</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<h1 id="云服务器线上环境搭建"><a href="#云服务器线上环境搭建" class="headerlink" title="云服务器线上环境搭建"></a>云服务器线上环境搭建</h1><h2 id="云服务器配置YUM源安装软件"><a href="#云服务器配置YUM源安装软件" class="headerlink" title="云服务器配置YUM源安装软件"></a>云服务器配置YUM源安装软件</h2><p>略</p>
<h2 id="linux安装jdk"><a href="#linux安装jdk" class="headerlink" title="linux安装jdk"></a>linux安装jdk</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">rpm -qa | grep jdk /*检查linux是否安装有openjdk，有则移除</div><div class="line">sudo yum remove xxx(xxx为上一个命令查到的结果)</div><div class="line"><span class="built_in">cd</span> /</div><div class="line">sudo mkdir developer</div><div class="line"><span class="built_in">cd</span> developer/</div><div class="line">sudo mkdir setup</div><div class="line"><span class="built_in">cd</span> setup</div><div class="line">sudo wget <官网下载地址></div><div class="line">sudo mv <a> <b> /*a重命名为b</div><div class="line">sudo chmod 777 jdk-7u80-linux-x64.rpm /*赋予执行权限</div><div class="line">sudo rpm -ivh jdk-7u80-linux-x64.rpm /*安装jdk</div></pre></td></tr></table></figure>
<h3 id="查看安装后的jdk"><a href="#查看安装后的jdk" class="headerlink" title="查看安装后的jdk"></a>查看安装后的jdk</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> /usr/java/jdk1.7.0_80/</div><div class="line">ll</div></pre></td></tr></table></figure>
<h2 id="安装vim"><a href="#安装vim" class="headerlink" title="安装vim"></a>安装vim</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">yum -y install vim</div></pre></td></tr></table></figure>
<h2 id="配置环境变量"><a href="#配置环境变量" class="headerlink" title="配置环境变量"></a>配置环境变量</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo vim /etc/profile</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">export</span> JAVA_HOME=/usr/java/jdk1.7.0_80</div><div class="line"><span class="built_in">export</span> CLASSPATH=.:<span class="variable">$JAVA_HOME</span>/jre/lib/rt.jar:<span class="variable">$JAVA_HOME</span>/lib/dt.jar:<span class="variable">$JAVA_HOME</span>/lib/tools.jar</div><div class="line"><span class="built_in">export</span> MAVEN_HOME=/developer/apache-maven-3.0.5</div><div class="line"><span class="built_in">export</span> NODE_HOME=/usr/<span class="built_in">local</span>/node-v4.4.7-linux-x64</div><div class="line"><span class="built_in">export</span> RUBY_HOME=/usr/<span class="built_in">local</span>/ruby</div><div class="line"><span class="built_in">export</span> CATALINA_HOME=/developer/apache-tomcat-7.0.73</div><div class="line"></div><div class="line"><span class="built_in">export</span> PATH=<span class="variable">$PATH</span>:<span class="variable">$JAVA_HOME</span>/bin:<span class="variable">$CATALINA_HOME</span>/bin:<span class="variable">$MAVEN_HOME</span>/bin:<span class="variable">$NODE_HOME</span>/bin:/usr/<span class="built_in">local</span>/bin:<span class="variable">$RUBY_HOME</span>/bin</div><div class="line"></div><div class="line"><span class="built_in">export</span> LC_ALL=en_US.UTF-8</div></pre></td></tr></table></figure>
<h3 id="使配置生效"><a href="#使配置生效" class="headerlink" title="使配置生效"></a>使配置生效</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">source</span> /etc/profile</div></pre></td></tr></table></figure>
<h2 id="安装tomcat"><a href="#安装tomcat" class="headerlink" title="安装tomcat"></a>安装tomcat</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> /developer</div><div class="line">sudo wget <tomcat下载路径></div><div class="line">sudo tar -zxvf <tomcat安装包></div><div class="line">sudo mv <tomcat安装包> setup/ /*把安装包整理到setup下</div></pre></td></tr></table></figure>
<h3 id="修改tomcat字符集"><a href="#修改tomcat字符集" class="headerlink" title="修改tomcat字符集"></a>修改tomcat字符集</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> apache-tomcat-7.0.73/</div><div class="line">sudo vim conf/server.xml</div></pre></td></tr></table></figure>
<p>修改结果如下：<br><img src="media/15191011794293/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-02-20%20%E4%B8%8B%E5%8D%882.32.54.png" alt="屏幕快照 2018-02-20 下午2.32.54"></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> bin</div><div class="line">./startup.sh /*启动tomcat</div></pre></td></tr></table></figure>
<h2 id="安装maven"><a href="#安装maven" class="headerlink" title="安装maven"></a>安装maven</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> /developer</div><div class="line">sudo wget <maven安装包></div><div class="line">sudo tar -zxvf <maven安装包></div><div class="line">sudo mv <maven安装包> setup/</div><div class="line">mvn -version /*验证是否安装成功</div></pre></td></tr></table></figure>
<h2 id="安装vsftpd"><a href="#安装vsftpd" class="headerlink" title="安装vsftpd"></a>安装vsftpd</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo yum -y install vsftpd</div></pre></td></tr></table></figure>
<h3 id="创建访问目录并附加权限"><a href="#创建访问目录并附加权限" class="headerlink" title="创建访问目录并附加权限"></a>创建访问目录并附加权限</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> /</div><div class="line">sudo mkdir product</div><div class="line"><span class="built_in">cd</span> product/</div><div class="line">sudo mkdir ftpfile</div><div class="line">sudo useradd ftpuser <span class="_">-d</span> /product/ftpfile <span class="_">-s</span> /sbin/nologin</div><div class="line">sudo chown -R ftpuser.ftpuser ./ftpfile/ /*设置用户及用户组的权限都为ftpuser</div></pre></td></tr></table></figure>
<h3 id="重置ftpuser的访问密码"><a href="#重置ftpuser的访问密码" class="headerlink" title="重置ftpuser的访问密码"></a>重置ftpuser的访问密码</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">sudo passwd ftpuser</div><div class="line"><span class="built_in">cd</span> /etc/vsftpd</div><div class="line">sudo vim chroot_list</div><div class="line">在chroot_list中添加一行ftpuser</div></pre></td></tr></table></figure>
<h3 id="修改安全策略"><a href="#修改安全策略" class="headerlink" title="修改安全策略"></a>修改安全策略</h3><p>sudo vim /etc/selinux/config<br>修改SELINUX的值为disabled</p>
<p>等同于使用如下命令：<br>sudo setsebool -P ftp_home_dir 1</p>
<h3 id="修改vsftpd-conf文件"><a href="#修改vsftpd-conf文件" class="headerlink" title="修改vsftpd.conf文件"></a>修改vsftpd.conf文件</h3><p>先备份原文件<br>sudo mv vsftpd.conf vsftpd.conf.bak<br>sudo wget <新文件地址></p>
<h3 id="验证vsftpd访问性"><a href="#验证vsftpd访问性" class="headerlink" title="验证vsftpd访问性"></a>验证vsftpd访问性</h3><p>sudo service vsftpd restart<br>浏览器访问：ftp://<服务器地址></p>
<h2 id="安装nginx"><a href="#安装nginx" class="headerlink" title="安装nginx"></a>安装nginx</h2><p>cd /developer/setup/<br>sudo wget <nginx下载地址></nginx下载地址></p>
<h3 id="安装nginx所需依赖"><a href="#安装nginx所需依赖" class="headerlink" title="安装nginx所需依赖"></a>安装nginx所需依赖</h3><p>nginx安装依赖命令<br>sudo yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel </p>
<h3 id="解压nginx"><a href="#解压nginx" class="headerlink" title="解压nginx"></a>解压nginx</h3><p>sudo tar -zxvf linux-nginx-1.10.2.tar.gz<br>cd nginx-1.10.2/<br>sudo ./configure /*编译解压<br>sudo make<br>sudo make install</p>
<h3 id="编辑nginx"><a href="#编辑nginx" class="headerlink" title="编辑nginx"></a>编辑nginx</h3><p>whereis nginx<br>cd /usr/local/nginx/conf/<br>sudo vim nginx.conf<br>添加一行：include vhost/<em>.conf; /</em>分号不能少</p>
<h3 id="添加反向代理的配置文件"><a href="#添加反向代理的配置文件" class="headerlink" title="添加反向代理的配置文件"></a>添加反向代理的配置文件</h3><p>sudo mkdir vhost<br>cd vhost/<br>添加配置文件到vhost下</p>
<h3 id="启动nginx"><a href="#启动nginx" class="headerlink" title="启动nginx"></a>启动nginx</h3><p>cd /usr/local/nginx/sbin<br>sudo ./nginx</p>
<h3 id="查看nginx是否已经启动"><a href="#查看nginx是否已经启动" class="headerlink" title="查看nginx是否已经启动"></a>查看nginx是否已经启动</h3><p>ps -ef | grep nginx</p>
<h3 id="重启nginx"><a href="#重启nginx" class="headerlink" title="重启nginx"></a>重启nginx</h3><p>/usr/nginx/sbin/nginx -s reload</p>
<h2 id="安装mysql"><a href="#安装mysql" class="headerlink" title="安装mysql"></a>安装mysql</h2><h3 id="检查是否安装了mysql"><a href="#检查是否安装了mysql" class="headerlink" title="检查是否安装了mysql"></a>检查是否安装了mysql</h3><p>sudo rpm -qa | grep mysql-server </p>
<h3 id="使用yum安装mysql"><a href="#使用yum安装mysql" class="headerlink" title="使用yum安装mysql"></a>使用yum安装mysql</h3><p>sudo yum -y install mysql-server</p>
<h3 id="修改mysql字符集"><a href="#修改mysql字符集" class="headerlink" title="修改mysql字符集"></a>修改mysql字符集</h3><p>sudo vim /etc/my.cnf<br><img src="media/15191011794293/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-02-20%20%E4%B8%8B%E5%8D%883.48.27.png" alt="屏幕快照 2018-02-20 下午3.48.27"></p>
<h3 id="配置mysql的自启动"><a href="#配置mysql的自启动" class="headerlink" title="配置mysql的自启动"></a>配置mysql的自启动</h3><p>sudo chkconfig mysqld on<br>sudo chkconfig –list mysqld<br>sudo service mysqld restart</p>
<h3 id="修改root密码"><a href="#修改root密码" class="headerlink" title="修改root密码"></a>修改root密码</h3><p>mysql -u root<br>select user,host,password from mysql.user<br>set password for root@localhost = password(‘自己设置的密码’); /*localhost,云服务器名，127.0.0.1分别设置一次</p>
<h3 id="删除匿名用户"><a href="#删除匿名用户" class="headerlink" title="删除匿名用户"></a>删除匿名用户</h3><p>exit<br>mysql -u root -p<br>delete from mysql.user where user=’’;<br>flush privileges;</p>
<h3 id="插入一个新用户"><a href="#插入一个新用户" class="headerlink" title="插入一个新用户"></a>插入一个新用户</h3><p>insert into mysql.user(host,user,password) values (“localhost”,”xxx”, password(“xxxx”))<br>flush privileges;</p>
<h3 id="创建数据库实例"><a href="#创建数据库实例" class="headerlink" title="创建数据库实例"></a>创建数据库实例</h3><p>create database <code>xxx</code> default character set utf8 COLLATE utf8_general_ci;</p>
<h3 id="给新用户授予使用xxx数据库的所有权限"><a href="#给新用户授予使用xxx数据库的所有权限" class="headerlink" title="给新用户授予使用xxx数据库的所有权限"></a>给新用户授予使用xxx数据库的所有权限</h3><p>grant all privileges on 数据库实例名.* to 新用户名@localhost identified by ‘新用户密码’;</p>
<h3 id="向数据库填充数据"><a href="#向数据库填充数据" class="headerlink" title="向数据库填充数据"></a>向数据库填充数据</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">把xxx.sql文件放在linux服务器的/developer目录下</div><div class="line">mysql -u root -p</div><div class="line">show databases;</div><div class="line">use 数据库实例名</div><div class="line">show tables</div></pre></td></tr></table></figure>
<h3 id="导入表"><a href="#导入表" class="headerlink" title="导入表"></a>导入表</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">source</span> /developer/xxx.sql</div><div class="line">show tables;</div><div class="line">select * from 库中任意表名\G; /*格式化显示指定表中的数据</div></pre></td></tr></table></figure>
<h2 id="git的安装"><a href="#git的安装" class="headerlink" title="git的安装"></a>git的安装</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> /developer/setup</div><div class="line">sudo wget <git下载路径></div></pre></td></tr></table></figure>
<h3 id="安装git依赖"><a href="#安装git依赖" class="headerlink" title="安装git依赖"></a>安装git依赖</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo yum -y install zlib-devel openssl-devel cpio expat-devel gettext-devel curl-devel perl-ExtUtils-CBuilder perl-ExtUtils- MakeMaker</div></pre></td></tr></table></figure>
<h3 id="解压git压缩包"><a href="#解压git压缩包" class="headerlink" title="解压git压缩包"></a>解压git压缩包</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">sudo tar -zxvf git-v2.8.0.tar.gz </div><div class="line"><span class="built_in">cd</span> git-2.8.0/</div><div class="line">sudo make prefix=/usr/<span class="built_in">local</span>/git all</div><div class="line">sudo make prefix=/usr/<span class="built_in">local</span>/git install</div><div class="line">whereis git</div></pre></td></tr></table></figure>
<h3 id="git安装路径加入环境变量"><a href="#git安装路径加入环境变量" class="headerlink" title="git安装路径加入环境变量"></a>git安装路径加入环境变量</h3> <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo vim /etc/profile</div></pre></td></tr></table></figure>
<p><img src="media/15191011794293/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-02-20%20%E4%B8%8B%E5%8D%884.54.26.png" alt="屏幕快照 2018-02-20 下午4.54.26"></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">source</span> /etc/profile</div><div class="line">git --version</div></pre></td></tr></table></figure>
<h3 id="配置git用户名"><a href="#配置git用户名" class="headerlink" title="配置git用户名"></a>配置git用户名</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">git config --global user.name <span class="string">"xxx"</span></div><div class="line">git config --global user.email <span class="string">"xxxx@xx"</span></div><div class="line">git config --global core.autocrlf <span class="literal">false</span> /*忽略linux和windows换行符差异</div><div class="line">git config --global core.quotepath off /*避免中文乱码</div><div class="line">git config --global gui.encoding utf-8</div></pre></td></tr></table></figure>
<h3 id="配置ssh"><a href="#配置ssh" class="headerlink" title="配置ssh"></a>配置ssh</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">ssh-keygen -t rsa -C <span class="string">"邮箱"</span></div><div class="line">ssh-add ~/.ssh/id_rsa</div><div class="line"><span class="built_in">eval</span> `ssh-agent`</div><div class="line">ssh-add ~/.ssh/id_rsa</div><div class="line">cat ~/.ssh/id_rsa.pub /*显示公钥</div><div class="line">公钥可以给托管用户代码的网站</div></pre></td></tr></table></figure>
<h2 id="防火墙的设置"><a href="#防火墙的设置" class="headerlink" title="防火墙的设置"></a>防火墙的设置</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> /etc/sysconfig/</div><div class="line">ll | grep ipt /*查找iptables</div><div class="line">sudo mv iptables iptables.bak</div><div class="line">sudo wget <防火墙配置文件地址></div></pre></td></tr></table></figure>
<h3 id="修改替换后的iptables文件，关闭3306，8080，5005端口"><a href="#修改替换后的iptables文件，关闭3306，8080，5005端口" class="headerlink" title="修改替换后的iptables文件，关闭3306，8080，5005端口"></a>修改替换后的iptables文件，关闭3306，8080，5005端口</h3><h3 id="重启防火墙"><a href="#重启防火墙" class="headerlink" title="重启防火墙"></a>重启防火墙</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">sudo service iptables restart</div></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2018/02/20/云服务器线上环境搭建/" data-id="cje4dfi9100044e0cyggbtkf6" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-git发布项目到github" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/06/19/git发布项目到github/" class="article-date">
<time datetime="2017-06-19T03:27:13.000Z" itemprop="datePublished">2017-06-19</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/06/19/git发布项目到github/">git发布项目到github</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="项目的首次创建和提交"><a href="#项目的首次创建和提交" class="headerlink" title="项目的首次创建和提交"></a>项目的首次创建和提交</h2><h4 id="1-初始化项目"><a href="#1-初始化项目" class="headerlink" title="1. 初始化项目"></a>1. 初始化项目</h4><p>创建<code>.gitignore</code>文件，在<code>.gitignore</code>中编写规则，说明那些文件不用纳入版本管理，使用git初始化项目。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">touch .gitignore</div><div class="line">git init</div></pre></td></tr></table></figure>
<h4 id="2-把项目下的文件纳入版本管理"><a href="#2-把项目下的文件纳入版本管理" class="headerlink" title="2. 把项目下的文件纳入版本管理"></a>2. 把项目下的文件纳入版本管理</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">git add .</div></pre></td></tr></table></figure>
<h4 id="3-提交项目文件到本地仓库"><a href="#3-提交项目文件到本地仓库" class="headerlink" title="3. 提交项目文件到本地仓库"></a>3. 提交项目文件到本地仓库</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">git commit -am <span class="string">'first commit init project'</span></div></pre></td></tr></table></figure>
<h4 id="4-提交项目到github"><a href="#4-提交项目到github" class="headerlink" title="4. 提交项目到github"></a>4. 提交项目到github</h4><p>提交前先在github上创建一个和本地同名的项目，然后在本地使用<code>git pull</code>拉取文件和本地项目合并后，再提交项目。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">git remote add origin git@github.com:informationsly/mmall.git</div><div class="line">git branch</div><div class="line">git pull</div><div class="line">git push -u <span class="_">-f</span> origin master</div></pre></td></tr></table></figure>
<h4 id="5-创建v1-0分支，后续采取分支开发，主分支发布的方式"><a href="#5-创建v1-0分支，后续采取分支开发，主分支发布的方式" class="headerlink" title="5. 创建v1.0分支，后续采取分支开发，主分支发布的方式"></a>5. 创建<code>v1.0</code>分支，后续采取分支开发，主分支发布的方式</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">git checkout -b v1.0 origin/master</div><div class="line">git branch //查看当前所处分支，结果应该是在v1.0分支上</div><div class="line">git push origin HEAD -u //推送v1.0分支到远端仓库</div></pre></td></tr></table></figure>
<h2 id="后续代码增加后新代码的提交"><a href="#后续代码增加后新代码的提交" class="headerlink" title="后续代码增加后新代码的提交"></a>后续代码增加后新代码的提交</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">git status //确定分支在`v1.0上`</div><div class="line">git add .</div><div class="line">git status</div><div class="line">git commit -am <span class="string">'project init commit'</span></div><div class="line">git push //推送到远端的`v1.0`分支上</div><div class="line">git status</div></pre></td></tr></table></figure>
<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p><a href="http://blog.csdn.net/u011410529/article/details/54098067" target="_blank" rel="external">mybatis_plugin 破解</a><br><a href="http://www.cnblogs.com/hongyanzhao/p/6933170.html" target="_blank" rel="external">intellij idea 破解</a></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2017/06/19/git发布项目到github/" data-id="cje4dfi8u00014e0cyo3k77un" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-ES6基础学习" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/05/11/ES6基础学习/" class="article-date">
<time datetime="2017-05-11T02:49:06.000Z" itemprop="datePublished">2017-05-11</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/05/11/ES6基础学习/">ES6基础学习</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="ES6相比ES5增加的特性"><a href="#ES6相比ES5增加的特性" class="headerlink" title="ES6相比ES5增加的特性"></a>ES6相比ES5增加的特性</h2><ul>
<li>解构赋值</li>
<li>箭头函数</li>
<li>Set和Map</li>
<li>异步操作</li>
<li>类与对象</li>
<li>模块化</li>
</ul>
<h2 id="ES6-项目架构"><a href="#ES6-项目架构" class="headerlink" title="ES6 项目架构"></a>ES6 项目架构</h2><p>ES6在现在的浏览器中并不是完全支持，所以项目中需要使用一些工具来把ES6编译为ES5或ES3(IE8)，使得现在的浏览器能够运行ES6编写的代码。</p>
<ul>
<li>基础架构 (项目的文件组织方式)</li>
<li>任务自动化(gulp)</li>
<li>编译工具(babel, webpack)</li>
</ul>
<h2 id="创建目录基本结构"><a href="#创建目录基本结构" class="headerlink" title="创建目录基本结构"></a>创建目录基本结构</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">liyongdeMacBook-Pro:~ liyong$ <span class="built_in">cd</span> /Volumes/mac_csd/WebstormProjects/</div><div class="line">liyongdeMacBook-Pro:WebstormProjects liyong$ mkdir es6</div><div class="line">liyongdeMacBook-Pro:WebstormProjects liyong$ <span class="built_in">cd</span> es6/</div><div class="line">liyongdeMacBook-Pro:es6 liyong$ mkdir app</div><div class="line">liyongdeMacBook-Pro:es6 liyong$ mkdir server</div><div class="line">liyongdeMacBook-Pro:es6 liyong$ mkdir tasks</div><div class="line">liyongdeMacBook-Pro:es6 liyong$ <span class="built_in">cd</span> app/</div><div class="line">liyongdeMacBook-Pro:app liyong$ mkdir css</div><div class="line">liyongdeMacBook-Pro:app liyong$ mkdir js</div><div class="line">liyongdeMacBook-Pro:app liyong$ mkdir views</div><div class="line">liyongdeMacBook-Pro:app liyong$ ls</div><div class="line">css js views</div><div class="line">liyongdeMacBook-Pro:app liyong$ mkdir js/class</div><div class="line">liyongdeMacBook-Pro:app liyong$ touch js/class/test.js</div><div class="line">liyongdeMacBook-Pro:app liyong$ touch js/index.js</div><div class="line">liyongdeMacBook-Pro:app liyong$ touch views/error.ejs</div><div class="line">liyongdeMacBook-Pro:app liyong$ touch views/index.ejs</div><div class="line">liyongdeMacBook-Pro:app liyong$</div></pre></td></tr></table></figure>
<h3 id="创建server代码："><a href="#创建server代码：" class="headerlink" title="创建server代码："></a>创建server代码：</h3><p>1.先安装express</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">liyongdeMacBook-Pro:server liyong$ npm install -g express-generator</div><div class="line">liyongdeMacBook-Pro:server liyong$ npm install</div><div class="line">liyongdeMacBook-Pro:server liyong$ express <span class="_">-e</span> .</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">liyongdeMacBook-Pro:server liyong$ <span class="built_in">cd</span> ../tasks/</div><div class="line">liyongdeMacBook-Pro:tasks liyong$ mkdir util</div><div class="line">liyongdeMacBook-Pro:tasks liyong$ touch util/args.js</div></pre></td></tr></table></figure>
<p>2.创建其他文件</p>
<p>es6下使用npm init创建package.json文件,使用touch命令创建.babelrc文件，gulpfile.babel.js文件（构建脚本将使用ES6编写，所以不是gulpfile.js）<br>安装connect-livereload依赖后，需要在server文件夹下express生成的文件app.js中添加</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">app.use(<span class="built_in">require</span>(<span class="string">'connect-livereload'</span>)());</div></pre></td></tr></table></figure>
<p>这句必须添加到<code>app.use(express.static(path.join(__dirname, 'public')));</code>的后面。</p>
<h2 id="正则"><a href="#正则" class="headerlink" title="正则"></a>正则</h2><p>如果你使用正则表达式处理的字符串中有大于两个字节长度(0xFFFF)的字符，正则表达式匹配模式必须加<code>u</code>这个标记位。<br>正则表达式中的<code>.</code>并不能匹配所有的字符，只能匹配长度小于两个字节的字符，若要匹配大于两个字节的字符，需要在<code>u</code>修饰符下才可以。<br><em>换行符，回车符，行分割符，段分割符</em>，需要使用<code>s</code>修饰符，ES6还没有实现。</p>
<p><code>y</code>修饰符和<code>g</code>修饰符的区别<br><code>y</code>修饰符和<code>g</code>修饰符都是全局匹配的，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始。<br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson3.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h2><p>ES6新增的特性：<code>Unicode表示法</code>，<code>遍历接口</code>, <code>模版字符串</code>, <code>字符串对象新增方法（10种）</code><br>有些方法是ES7提案中的，需要安装一个兼容库<code>babel-polyfill</code>才能用：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install babel-polyfill --save-dev</div></pre></td></tr></table></figure>
<p><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson4.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="数值扩展"><a href="#数值扩展" class="headerlink" title="数值扩展"></a>数值扩展</h2><p>数值处理新增的特性：<code>新增方法</code>（比如说计算指数，立方根），<code>方法调整</code>（比如Math的很多方法移到了Number对象上）<br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson5.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="数组扩展"><a href="#数组扩展" class="headerlink" title="数组扩展"></a>数组扩展</h2><p>新增了一些方法，如<code>Array.of()</code> <code>Array.from()</code><br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson6.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="函数扩展"><a href="#函数扩展" class="headerlink" title="函数扩展"></a>函数扩展</h2><p><code>参数默认值</code> <code>rest参数</code> <code>扩展运算符</code> <code>箭头函数</code> <code>this绑定</code> <code>尾调用</code><br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson7.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="对象扩展"><a href="#对象扩展" class="headerlink" title="对象扩展"></a>对象扩展</h2><p><code>函数新增特性</code> <code>简洁表示法</code> <code>属性表示法</code> <code>扩展运算符</code> <code>Object新增方法</code><br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson8.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="Symbol数据类型"><a href="#Symbol数据类型" class="headerlink" title="Symbol数据类型"></a>Symbol数据类型</h2><p><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson9.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="数据类型扩展"><a href="#数据类型扩展" class="headerlink" title="数据类型扩展"></a>数据类型扩展</h2><p><code>Set的用法</code>， <code>Map的用法</code>， <code>WeakSet的用法</code>， <code>WeakMap的用法</code></p>
<p>Map和Object的区别：Object的key只能是字符串，而Map的key可以是任意数据类型（数组，引用对象都可以作为key）</p>
<p>WeakSet和Set的区别：支持的数据类型不一样，WeakSet只支持对象（字符串也不行），WeakSet存储的只是一个值的引用，它也不会去检测这个值是否被垃圾回收了，WeakSet没有clear方法，不能遍历，没有size属性(WeakMap也一样)。<br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson10.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="Proxy和Reflect"><a href="#Proxy和Reflect" class="headerlink" title="Proxy和Reflect"></a>Proxy和Reflect</h2><p>proxy可以对目标对象起到保护作用，不被外部访问到，Object的方法移植到了Reflect上。调用Object的方法都可以使用Reflect代替。<br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson11.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="类"><a href="#类" class="headerlink" title="类"></a>类</h2><p><code>基本语法</code>, <code>类的继承</code>, <code>静态方法</code>, <code>静态属性</code>, <code>getter</code>, <code>setter</code></p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/MDN/About" target="_blank" rel="external">MDN项目</a>: 可以在上面查看javascript等web相关的文档<br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson12.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><p>Promise是异步编程的一种解决方案<br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson13.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="Iterator和for…of循环"><a href="#Iterator和for…of循环" class="headerlink" title="Iterator和for…of循环"></a>Iterator和for…of循环</h2><p><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson14.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="Generator"><a href="#Generator" class="headerlink" title="Generator"></a>Generator</h2><p><code>next函数的使用</code>，<code>yield语法</code><br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson15.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="Decorator-修饰器"><a href="#Decorator-修饰器" class="headerlink" title="Decorator(修饰器)"></a>Decorator(修饰器)</h2><p>修饰器是一个函数，用来修改类的行为<br>需要的兼容库：<code>babel-plugin-transform-decorators-legacy</code><br>在<code>.babelrc</code>文件中添加插件：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="string">"plugins"</span>:[<span class="string">"transform-decorators-legacy"</span>]</div></pre></td></tr></table></figure>
<p>第三方库修饰器的js库：<code>core-decorators</code>,提供了许多写好的修饰器,npm install之后，import导入就可以直接使用库里写好的修饰器。<br><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson16.js" target="_blank" rel="external">代码示例</a></p>
<h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><p><a href="https://github.com/informationsly/js_learning/blob/master/es6/app/js/class/lesson17.js" target="_blank" rel="external">代码示例</a></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2017/05/11/ES6基础学习/" data-id="cje4dfi8o00004e0cmyagl6xv" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-响应式网站设计" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/05/05/响应式网站设计/" class="article-date">
<time datetime="2017-05-05T03:40:01.000Z" itemprop="datePublished">2017-05-05</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/05/05/响应式网站设计/">响应式网站设计</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="响应式网站设计的概念"><a href="#响应式网站设计的概念" class="headerlink" title="响应式网站设计的概念"></a>响应式网站设计的概念</h2><p>响应式网站是一个设计概念，它是多项技术的综合体</p>
<h2 id="由来"><a href="#由来" class="headerlink" title="由来"></a>由来</h2><p>2010年Ethan Marcotte在<a href="https://alistapart.com/article/responsive-web-design" target="_blank" rel="external">Responsive Web Design</a>一文中提出了响应式网站设计的概念</p>
<h2 id="用到的技术"><a href="#用到的技术" class="headerlink" title="用到的技术"></a>用到的技术</h2><ul>
<li>flexible grid layout 弹性(流式)网格布局</li>
<li>flexible image 弹性图片</li>
<li>media queries 媒体查询（css2.1出现的概念，css3被强化）</li>
</ul>
<h2 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h2><ul>
<li>每个设备都能得到正确的设计</li>
<li>搜索优化</li>
<li>更好的用户体验</li>
</ul>
<h2 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h2><ul>
<li>会加载更多的样式和脚本资源</li>
<li>设计比较难精确定位和控制</li>
<li>老版本浏览器兼容不好</li>
</ul>
<h2 id="视口"><a href="#视口" class="headerlink" title="视口"></a>视口</h2><h3 id="布局视口"><a href="#布局视口" class="headerlink" title="布局视口"></a>布局视口</h3><p>布局视口为网页PC端版式，为默认布局模式下的页面显示大小</p>
<h3 id="可视视口"><a href="#可视视口" class="headerlink" title="可视视口"></a>可视视口</h3><p>可视视口为手机端能看见PC端网页的显示大小（默认是设备的宽度）：如同放大镜离书本距离变化后，放大镜里能看到的内容的多少，不能简单理解为设备屏幕的大小。</p>
<h3 id="理想视口"><a href="#理想视口" class="headerlink" title="理想视口"></a>理想视口</h3><p>理想视口就是为构建手机浏览器优化的页面而添加的。<br>理想视口（就是布局视口在一个设备上的最佳尺寸）应该理解为一个状态值，</p>
<p>如何使用理想视口：<br>在页面中添加如下元标签(视口元标签)：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"</span>></span></div></pre></td></tr></table></figure>
<p>其中：<br>width=device-width，width用于指定布局视口的宽度<br>minimum-scale=1.0，最小的缩放比例为1倍<br>maximum-scale=1.0，最大的缩放比例为1倍<br>user-scalable=no，禁止用户缩放</p>
<p>布局视口的宽度和设备可视视口的宽度一样时，这个布局视口就是一个理想视口，此时布局视口和可视视口达到一致。</p>
<p>强制以最新的IE浏览器模式渲染页面</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"x-ua-compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>></span></div></pre></td></tr></table></figure>
<p>IE中的条件注释，区分IE的版本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment"><!--[if lte IE 8]>...<![endif]--></span></div></pre></td></tr></table></figure>
<p><em>IE8不支持html5标签和媒体查询</em></p>
<p>一般都使用class定义样式，id一般用于js快速的区别和获取元素，class一般都用中横线分割，id一般都使用驼峰名称法。</p>
<p>必不可少的图片使用<img>引用，可有可无的装饰性图片可以用标签的style引用</p>
<h2 id="css-resets"><a href="#css-resets" class="headerlink" title="css resets"></a>css resets</h2><p>相比传统的css resets方案，推荐使用css resets优质方案：Normalize.css，处理统一页面标签的默认样式外，还解决了一些兼容性的问题，在项目中可以把Normalize.css作为基础的css样式。</p>
<p>command+shift+v 打开剪切板<br>control+t 重命名</p>
<h2 id="网页中的单位"><a href="#网页中的单位" class="headerlink" title="网页中的单位"></a>网页中的单位</h2><ul>
<li><p><strong>px</strong><br>1个px相当于1个像素</p>
</li>
<li><p><strong>em</strong><br>相对的长度单位(em依赖与父元素的字体大小)<br>1.em 相对参照物为父元素的<code>font-size</code><br>2.em 具有继承的特点<br>3.当继承链上所有的父元素都没有设置<code>font-size</code>时，浏览器会有一个默认的em设置：1em = 16px<br><strong><em>em的缺点：各个em元素的父元素的字体大小不确定，容易造成混乱</em></strong></p>
</li>
<li><p><strong>rem</strong><br>1.rem的相对参照物为根元素html,相对参照固定不变，所以比较好计算<br>2.当没有html没有设置font-size时，浏览器会有一个默认的rem设置：1rem = 16px，这点与em是一致的<br>3.IE8及以下的IE并不支持rem属性</p>
</li>
</ul>
<p>当<code>font-size</code>设置为62.5%(10/16*100%)时，1rem = 10px, 便于计算<br>font-size:62.5% 1rem = 10px<br>font-size:100% 1rem = 16px</p>
<h2 id="清理浮动的方法："><a href="#清理浮动的方法：" class="headerlink" title="清理浮动的方法："></a>清理浮动的方法：</h2><p>凡是能够触发bfc的属性，设置后都可以达到清除浮动的效果</p>
<h3 id="第一种："><a href="#第一种：" class="headerlink" title="第一种："></a>第一种：</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>,</div><div class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span> {</div><div class="line"> <span class="attribute">content</span>:<span class="string">" "</span>;</div><div class="line"> <span class="attribute">display</span>: table;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> {</div><div class="line"> <span class="attribute">clear</span>: both;</div><div class="line">}</div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"clearfix"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
<h3 id="第二种：-推荐"><a href="#第二种：-推荐" class="headerlink" title="第二种：(推荐)"></a>第二种：(推荐)</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> {</div><div class="line"> <span class="attribute">content</span>: <span class="string">"."</span>;</div><div class="line"> <span class="attribute">display</span>: block;</div><div class="line"> <span class="attribute">height</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">clear</span>: both;</div><div class="line"> <span class="attribute">visibility</span>: hidden;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="selector-class">.clearfix</span> {</div><div class="line"> <span class="attribute">zoom</span>: <span class="number">1</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"clearfix"</span>></span><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
<h2 id="display"><a href="#display" class="headerlink" title="display"></a>display</h2><p>li元素设置<code>display:inline-block</code>使其不换行，a元素设置<code>display:inline-block</code>是为了能够在a标签上设置宽高，padding等属性，a元素默认是<code>display:inline</code></p>
<h2 id="改变图片的灰度"><a href="#改变图片的灰度" class="headerlink" title="改变图片的灰度"></a>改变图片的灰度</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">filter</span>: <span class="selector-tag">grayscale</span>(100%)</div><div class="line"><span class="selector-tag">-webkit-filter</span><span class="selector-pseudo">:grayscale(100</span>%)</div></pre></td></tr></table></figure>
<h2 id="自动增加css前缀的工具"><a href="#自动增加css前缀的工具" class="headerlink" title="自动增加css前缀的工具"></a>自动增加css前缀的工具</h2><p><a href="http://autoprefixer.github.io/" target="_blank" rel="external">Autoprefixer CSS online</a></p>
<h2 id="使用calc-expression-计算宽度"><a href="#使用calc-expression-计算宽度" class="headerlink" title="使用calc(expression)计算宽度"></a>使用calc(expression)计算宽度</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.elm</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="built_in">calc</span>(33.33333333% - 3rem);</div><div class="line">}</div></pre></td></tr></table></figure>
<h2 id="适配时断点的选择与细分"><a href="#适配时断点的选择与细分" class="headerlink" title="适配时断点的选择与细分"></a>适配时断点的选择与细分</h2><p>根据设计稿和需求来设置这个断点，例如可以使用800，480来界定大中小屏（320以下可以忽略），而不是针对特定的设备,媒体查询中使用rem表示宽度时，rem相对值为1rem=16px（浏览器默认值）而不是html中指定的1rem=10px，em也是如此，而且rem存在兼容性的问题，所以使用em来代替rem</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* </span></div><div class="line"> * 800px/16=50em </div><div class="line"> * 481px/16=30.0625em</div><div class="line"> */</div><div class="line">@<span class="keyword">media</span> only screen and(max-width:<span class="number">50em</span>) {</div><div class="line"> <span class="selector-tag">header</span> <span class="selector-class">.top</span> {</div><div class="line"> <span class="attribute">background-color</span>: green;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">@<span class="keyword">media</span> only screen and (min-width:<span class="number">30.0625em</span>) and (max-width:<span class="number">50em</span>) {</div><div class="line"> <span class="selector-tag">header</span> <span class="selector-class">.top</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span> {</div><div class="line"> <span class="attribute">color</span>: red;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">@<span class="keyword">media</span> only screen and(max-width: <span class="number">30em</span>) {</div><div class="line"> <span class="selector-tag">header</span> <span class="selector-class">.top</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span> {</div><div class="line"> <span class="attribute">color</span>: blue;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<h2 id="轮播图组件"><a href="#轮播图组件" class="headerlink" title="轮播图组件"></a>轮播图组件</h2><p>Owl Carousel2<br>jquery.js 1.x版本和2.x版本的区别：2.x版本移除了对IE8以下浏览器的支持，更加轻巧<br>zepto.js 针对的是移动端，没有对pc端浏览器的兼容支持，如果网站是全站适配的，zepto.js并不适合</p>
<h2 id="响应式图片"><a href="#响应式图片" class="headerlink" title="响应式图片"></a>响应式图片</h2><p>1.图片的排版和布局<br>2.根据设备大小加载不同的图片</p>
<p><strong>实现响应式图片</strong></p>
<p>第一种：srcset + size</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.content</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</div><div class="line"> <span class="attribute">margin</span>:<span class="number">0</span> auto;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="selector-class">.content</span> <span class="selector-tag">img</span> {</div><div class="line"> <span class="attribute">display</span>: block;</div><div class="line"> <span class="attribute">max-width</span>: <span class="number">100%</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"image"</span> <span class="attr">src</span>=<span class="string">"img/480.png"</span> <span class="attr">srcset</span>=<span class="string">"img/480.png 480w, img/800.png 800w, img/1600.png 1600w"</span> <span class="attr">size</span>=<span class="string">"(min-width:800px) calc(100vw - 30px), 100vw"</span>/></span></div></pre></td></tr></table></figure>
<p>第二种：picture</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.content</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</div><div class="line"> <span class="attribute">margin</span>:<span class="number">0</span> auto;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="selector-class">.content</span> <span class="selector-tag">img</span> {</div><div class="line"> <span class="attribute">display</span>: block;</div><div class="line"> <span class="attribute">width</span>:<span class="number">100%</span></div><div class="line"> max-width: <span class="number">100%</span>;</div><div class="line">}</div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span>></span></div><div class="line"> <span class="tag"><<span class="name">picture</span>></span></div><div class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">media</span>=<span class="string">"(max-width:36em)"</span> <span class="attr">srcset</span>=<span class="string">"img/tiananmen-s.jpg 768w"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">srcset</span>=<span class="string">"img/tiananmen.jpg 1800w"</span>/></span></div><div class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"image"</span> <span class="attr">src</span>=<span class="string">"img/tiananmen.jpg"</span>/></span></div><div class="line"> <span class="tag"></<span class="name">picture</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
<p>第三种：svg格式的图片，svg格式的图片不适合用来展示色彩丰富的图片（如广告图片）</p>
<p><strong>polyfill库：</strong><br>用于解决picture，srcsize标签在不同浏览器上的兼容性问题<br>Picturefill就是其中一个<br>1.导入picturefill.min.js文件<br>2.使用picture标签，而不用担心兼容性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></div><div class="line"> <span class="tag"><<span class="name">picture</span>></span></div><div class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">srcset</span>=<span class="string">"img/ad001-1.png"</span> <span class="attr">media</span>=<span class="string">"(min-width:50em)"</span>></span></div><div class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">srcset</span>=<span class="string">"img/ad001-m.png"</span> <span class="attr">media</span>=<span class="string">"(min-width:30em)"</span>></span></div><div class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"img/ad001.png"</span> <span class="attr">alt</span>=<span class="string">"2015年度报告"</span>></span></div><div class="line"> <span class="tag"></<span class="name">picture</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure>
<p><strong>在线压缩png图片</strong><br><a href="https://tinypng.com/" target="_blank" rel="external">tinypng</a></p>
<h2 id="浏览器兼容测试工具"><a href="#浏览器兼容测试工具" class="headerlink" title="浏览器兼容测试工具"></a>浏览器兼容测试工具</h2><p>IETester或安装虚拟机</p>
<h2 id="解决兼容性问题的工具"><a href="#解决兼容性问题的工具" class="headerlink" title="解决兼容性问题的工具"></a>解决兼容性问题的工具</h2><p><a href="http://browserhacks.com/" target="_blank" rel="external">csshacks</a></p>
<p>使IE8支持html5标签<br><a href="https://github.com/aFarkas/html5shiv" target="_blank" rel="external">html5shiv</a></p>
<p>IE6~8不支持媒体查询：<br>使用<a href="https://github.com/scottjehl/Respond" target="_blank" rel="external">Respond</a>这样的polyfill工具来有限的支持css3的媒体查询（对min-width,max-width特性的支持）</p>
<p><a href="https://modernizr.com/" target="_blank" rel="external">Modernizr</a></p>
<h2 id="浏览器同步测试工具-多台设备同时调试"><a href="#浏览器同步测试工具-多台设备同时调试" class="headerlink" title="浏览器同步测试工具(多台设备同时调试)"></a>浏览器同步测试工具(多台设备同时调试)</h2><p><a href="http://www.browsersync.cn" target="_blank" rel="external">browsersync</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">browser-sync start --server <span class="string">"src"</span> --files <span class="string">"src"</span></div></pre></td></tr></table></figure>
<h2 id="打包发布"><a href="#打包发布" class="headerlink" title="打包发布"></a>打包发布</h2><p>1.Grunt 自动化构建工具<br>2.Gulp 自动化构建工具（好学，好使，插件多）<br>3.Webpack 静态资源打包工具</p>
<p>npm在项目目录下安装gulp，创建gulpfile.js文件，gulp所有的任务都在这个文件里</p>
<p>gulp任务的书写：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</div><div class="line"></div><div class="line">gulp.task(<span class="string">'hello'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"hello gulp!"</span>);</div><div class="line">});</div></pre></td></tr></table></figure>
<p>运行gulp任务：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">gulp xxx(任务名称)</div></pre></td></tr></table></figure>
<p>gulp中的插件：<br><code>gulp-rev</code> <code>gulp-rev-replace</code> <code>gulp-useref</code> <code>gulp-filter</code> <code>gulp-uglify</code> <code>gulp-csso</code></p>
<p>压缩js,css，打包js,css，生成带hash值的版本文件名</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</div><div class="line"><span class="keyword">var</span> rev = <span class="built_in">require</span>(<span class="string">'gulp-rev'</span>);</div><div class="line"><span class="keyword">var</span> revReplace = <span class="built_in">require</span>(<span class="string">'gulp-rev-replace'</span>);</div><div class="line"><span class="keyword">var</span> revReplace = <span class="built_in">require</span>(<span class="string">'gulp-useref'</span>);</div><div class="line"><span class="keyword">var</span> filter = <span class="built_in">require</span>(<span class="string">'gulp-filter'</span>);</div><div class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>);</div><div class="line"><span class="keyword">var</span> csso = <span class="built_in">require</span>(<span class="string">'gulp-csso'</span>);</div><div class="line"></div><div class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">var</span> jsFilter = filter(<span class="string">'**/*.js'</span>, {<span class="attr">restore</span>: <span class="literal">true</span>});</div><div class="line"> <span class="keyword">var</span> cssFilter = filter(<span class="string">'**/*.css'</span>, {<span class="attr">restore</span>: <span class="literal">true</span>});</div><div class="line"> <span class="keyword">var</span> indexHtmlFilter = filter([<span class="string">'**/*'</span>, <span class="string">'!**/index.html'</span>], {<span class="attr">restore</span>: <span class="literal">true</span>});</div><div class="line"></div><div class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'src/index.html'</span>)</div><div class="line"> .pipe(useref())</div><div class="line"> .pipe(jsFilter)</div><div class="line"> .pipe(uglify())</div><div class="line"> .pipe(jsFilter.restore)</div><div class="line"> .pipe(cssFilter)</div><div class="line"> .pipe(csso())</div><div class="line"> .pipe(cssFilter.restore)</div><div class="line"> .pipe(indexHtmlFilter)</div><div class="line"> .pipe(rev()) <!--生成hash版本文件名--></div><div class="line"> .pipe(indexHtmlFilter.restore)</div><div class="line"> .pipe(revReplace()) <!--替换index文件中的文件引用--></div><div class="line"> .pipe(gulp.dest(<span class="string">'dist'</span>));</div><div class="line">});</div></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2017/05/05/响应式网站设计/" data-id="cje4dfi9300054e0c4xldrngv" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-mac上安装mongodb" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/06/15/mac上安装mongodb/" class="article-date">
<time datetime="2016-06-15T04:55:27.000Z" itemprop="datePublished">2016-06-15</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/15/mac上安装mongodb/">Mac上安装MongoDB</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="1-安装brew"><a href="#1-安装brew" class="headerlink" title="1) 安装brew"></a>1) 安装brew</h2><p>安装命令如下,并等待完成<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/<span class="built_in">local</span> --strip 1</div></pre></td></tr></table></figure></p>
<h2 id="2-安装MongoDB"><a href="#2-安装MongoDB" class="headerlink" title="2)安装MongoDB"></a>2)安装MongoDB</h2><p>安装命令如下,并等待完成<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">brew install mongodb</div></pre></td></tr></table></figure></p>
<h2 id="3-运行MongoDB"><a href="#3-运行MongoDB" class="headerlink" title="3)运行MongoDB"></a>3)运行MongoDB</h2><p>在终端依次输入如下命令<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> /</div><div class="line">sudo mkdir -p /data/db</div><div class="line">sudo chown -R 电脑用户名 /data/db<span class="comment">#电脑用户名可以通过在终端输入who命令得到</span></div><div class="line">mongod</div></pre></td></tr></table></figure></p>
<p>启动了MongoDB的服务，返回类似如下信息表示成功：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">2016-06-15T22:46:53.701+0800 I JOURNAL [initandlisten] journal dir=/data/db/journal </div><div class="line">2016-06-15T22:46:53.704+0800 I JOURNAL [initandlisten] recover : no journal files present, no recovery needed </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] MongoDB starting : pid=3455 port=27017 dbpath=/data/db 64-bit host=liyongdeMacBook-Pro.local </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] </div><div class="line">2016-06-15T22:46:53.721+0800 I JOURNAL [durability] Durability thread started </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] ** WARNING: soft rlimits too low. Number of files is 256, should be at least 1000 </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] db version v3.0.7 </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] git version: nogitversion </div><div class="line">2016-06-15T22:46:53.721+0800 I JOURNAL [journal writer] Journal writer thread started </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] build info: Darwin elcapitanvm.local 15.0.0 Darwin Kernel Version 15.0.0: Wed Aug 26 16:57:32 PDT 2015; root:xnu-3247.1.106~1/RELEASE_X86_64 x86_64 BOOST_LIB_VERSION=1_49 </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] allocator: system </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] options: </div><div class="line">2016-06-15T22:46:53.853+0800 I NETWORK [initandlisten] waiting <span class="keyword">for</span> connections on port 2701</div></pre></td></tr></table></figure></p>
<p>重新打开一个终端，输入：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">mongo</div></pre></td></tr></table></figure></p>
<p>返回信息如下表示mongodb已经安装成功了：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">MongoDB shell version: 3.0.7 </div><div class="line">connecting to: <span class="built_in">test</span> </div><div class="line">Server has startup warnings: </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] </div><div class="line">2016-06-15T22:46:53.721+0800 I CONTROL [initandlisten] ** WARNING: soft rlimits too low. Number of files is 256, should be at least 1000</div></pre></td></tr></table></figure></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/06/15/mac上安装mongodb/" data-id="cje4dfi8x00024e0ch2ke77yx" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-使用hexo搭建自己的博客" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/03/04/使用hexo搭建自己的博客/" class="article-date">
<time datetime="2016-03-04T01:20:49.000Z" itemprop="datePublished">2016-03-04</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/04/使用hexo搭建自己的博客/">使用hexo搭建自己的博客</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h2 id="tags"><a href="#tags" class="headerlink" title="tags:"></a>tags:</h2><p>以前好奇网上别人的独立博客是怎么搭建起来的，后来知道了hexo这个博客框架后也想自己搞一个，刚好第一篇文章就记录一下搭建这个过程，搭建过程主要还是参考hexo的官方文档。</p>
<h2 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h2><p>安装hexo之前要求电脑上要安装了Node.js和Git，可以分别使用node –version和git –version检查一下电脑上是否安装了这两个程序，安装Node.js、Git、hexo参照hexo文档就可以了，还是蛮详细的。</p>
<h2 id="搭建博客"><a href="#搭建博客" class="headerlink" title="搭建博客"></a>搭建博客</h2><h3 id="新建所需文件"><a href="#新建所需文件" class="headerlink" title="新建所需文件"></a>新建所需文件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ hexo init <folder> <span class="comment">##文件夹如果不存在会自己新建</span></div><div class="line">$ <span class="built_in">cd</span> <folder></div><div class="line">$ npm install</div></pre></td></tr></table></figure>
<h3 id="生成静态文件"><a href="#生成静态文件" class="headerlink" title="生成静态文件"></a>生成静态文件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo g <span class="comment">##生成静态文件</span></div></pre></td></tr></table></figure>
<h3 id="开启本地服务"><a href="#开启本地服务" class="headerlink" title="开启本地服务"></a>开启本地服务</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo s <span class="comment">##启动本地服务</span></div></pre></td></tr></table></figure>
<p>服务启动后就可以在浏览器里输入 <a href="http://localhost:4000" target="_blank" rel="external">http://localhost:4000</a> 查看效果了，特别提醒，如果你的电脑上开启了全局代理的翻墙软件的话，先把代理软件关闭。</p>
<h2 id="使博客能够通过域名访问"><a href="#使博客能够通过域名访问" class="headerlink" title="使博客能够通过域名访问"></a>使博客能够通过域名访问</h2><p>博客搭建好后，我希望它能够从互联网访问到，具体做法如下：<br>1.在GitHub上新建一个github.io的代码仓库<br>2.修改_config.yml文件中的配置<br>deploy:<br> type: git<br> repo: git@github.com:<你自己的github用户名>/github.io.git<br>3.安装git插件hexo-deployer-git</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install hexo-deployer-git --save</div></pre></td></tr></table></figure>
<p>4.部署到github</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo d</div></pre></td></tr></table></figure>
<p>5.配置自己的域名<br>如何与一个域名做关联，可以参看这个<a href="https://help.github.com/articles/setting-up-an-apex-domain/" target="_blank" rel="external">GitHubHelp</a>,大致的过程就是我们要有一个域名，并做一个域名解析，把域名指向192.30.252.153，192.30.252.154，并在代码仓库下创建一个名字为CNAME的文件，内容就是你的域名名称，文章中说到的A record就是一个记录类型，指将域名指向一个IPv4地址。<br>域名可以在万网上购买，也不是太贵，我买的时候是29元/年，购买成功后你就可以在万网后台做域名解析了。设置了域名解析后，过一段时间，就可以在浏览器里通过域名访问博客了。<br>备注：CNAME文件我们需要把它下载下来放在$ hexo init <folder>命令所指定文件夹的source目录下，这样你下次博客内容改变重新部署后CNAME文件不会丢失。</folder></p>
<h2 id="更换博客主题"><a href="#更换博客主题" class="headerlink" title="更换博客主题"></a>更换博客主题</h2><p>默认的博客主题不好看，但hexo提供了许多<a href="https://hexo.io/themes/" target="_blank" rel="external">主题</a>，我们可以自己做替换,把选中的主题下载下来放在themes文件夹底下，修改_config.xml文件中的theme属性，将其设置为你选择的主题，然后依次执行:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ hexo clean</div><div class="line">$ hexo g</div><div class="line">$ hexo d</div></pre></td></tr></table></figure>
<p>这样使用域名再次访问的时候看到的就是新的主题界面了。</p>
<h2 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h2><p>后面使用hexo时出现了一些问题：</p>
<h3 id="1-DTraceProviderBindings-MODULE-NOT-FOUND"><a href="#1-DTraceProviderBindings-MODULE-NOT-FOUND" class="headerlink" title="1. DTraceProviderBindings MODULE_NOT_FOUND"></a>1. DTraceProviderBindings MODULE_NOT_FOUND</h3><p> 解决办法：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ npm uninstall hexo-cli -g</div><div class="line">$ npm install hexo-cli -g</div></pre></td></tr></table></figure>
<h3 id="2-部署时提示Permission-denied-publickey"><a href="#2-部署时提示Permission-denied-publickey" class="headerlink" title="2. 部署时提示Permission denied (publickey)"></a>2. 部署时提示Permission denied (publickey)</h3><p> 解决办法：<br> 在~/.ssh文件夹下生成ssh key，成功后~/.ssh文件夹下会生成id_rsa和id_rsa.pub两个文件，到github个人账户的”SSH and GPG keys”选项中添加新的SSH key,添加新的key时，title随便填，key为id_rsa.pub文件中的内容。最后删除.deploy_git文件夹。</p>
<h3 id="3-相关命令"><a href="#3-相关命令" class="headerlink" title="3. 相关命令"></a>3. 相关命令</h3><p>生成ssh key</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ ssh-keygen -t rsa -C <邮箱名></div></pre></td></tr></table></figure>
<p>删除.deploy_git文件夹</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ rm -rf .deploy_git/</div></pre></td></tr></table></figure>
<p>测试是否测试成功</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ ssh -T git@github.com</div></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/03/04/使用hexo搭建自己的博客/" data-id="cje4dfi8y00034e0clp7dpikw" class="article-share-link">Share</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">February 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">June 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/05/">May 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">June 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2018/02/20/云服务器线上环境搭建/">(no title)</a>
</li>
<li>
<a href="/2017/06/19/git发布项目到github/">git发布项目到github</a>
</li>
<li>
<a href="/2017/05/11/ES6基础学习/">ES6基础学习</a>
</li>
<li>
<a href="/2017/05/05/响应式网站设计/">响应式网站设计</a>
</li>
<li>
<a href="/2016/06/15/mac上安装mongodb/">Mac上安装MongoDB</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2018 Li Yong<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>