初识脚本

• 可以用戏剧舞台上的脚本（剧本）来理解脚本。脚本上有着舞台提示及各个人物之间的台词。

• 编程领域的脚本就是告诉计算机，按照脚本上的编写好的命令来运行。

写个脚本

• 非 Windows 系统中写好的脚本需要添加可执行权限，使用 chmod +x 命令来为文件添加好权限后，文件在用 ls 命令查看时，文字颜色为红色。

• 使用 sh 命令（shell）可以执行写好的脚本。

• 如果想在命令行工具中直接运行脚本，可以将脚本目录添加至 PATH 中，修改“.bashrc”文件，将 export PATH="脚本目录的绝对路径:$PATH" 这行命令添加到文件末尾，保存；然后运行 source ~/.bashrc 就生效了。

• 使用 type 命令可以显示命令寻找过程；which 命令可以显示命令寻找结果。

• 文件后缀名在命令行中的用处不大。

脚本参数

• 用 $1 代表第一个参数，依次类推。

• 判断目录是否存在，在脚本中用 -d。

• 脚本中的 if...else 语句。

• 在 exit 后面设置返回值。

• 善于使用翻译软件和谷歌搜索。

Node.js 脚本

• Node.js 的脚本和 Bash 脚本都是脚本，Bash 能做的，Node.js 脚本也能做，只是语法不同。

• Bash 中需要指定 Node.js 脚本的运行方式为 node，不然会使用默认的 sh 来运行。

• 使用 shebang 命令可以指定当前脚本的运行环境。

课后拾遗

• 脚本是给机器一行行执行的文本；

• 抄脚本一定要抄对，不要缺空格少点的。

初识命令行

课程里讲的命令行主要是 Linux 或 Unix 系统里的命令行，在 Windows 中 cmd 中不一定适用。

• ~ 表示当前用户目录，第一个 / 表示整个硬盘（没有盘符的系统），. 表示当前目录，.. 表示副目录，$ 表示可以输入命令的状态（可更改）。

• 基本命令：

  • 创建目录（make directory）：mkdir；

  • 删除（remove）：rm；

  • 移动/重命名（move）：move；

  • 复制（copy）：cp；

  • 罗列（list）：ls；

  • 改变目录（change directory）：cd；

  • …

• 命令缩写规则：一般是删除元音字母（a、e、i、o、u），保留前 2 到 3 个辅音字母。

绝对路径与相对路径

以 / 开头的是绝对路径，反之就是相对路径。

体验命令行

• 如果在创建文件夹时，文件夹名称中有特殊字符（如空格），那么名称要用引号包裹。

• 命令后面还可以加“选项”命令来完成更多的操作。

• 更多的命令可以自行谷歌，命令释义可以参照这里。

Git 操作

先要生成 SSH key，前面的课程学过了，有一些注意事项：

• 一台设备只需要一个 key。

• 一个 key 可以访问你的所有仓库。

• 如果有新设备连接 GitHub，要在新设备上重新生成一个 key，再把这个 key 也上传到 GitHub，新的 key 可以和以前的 key 共存。

• 如果把 key 从电脑中删除，可以重新生成一个替换被删除的 key。

配置 Git

五行命令：

git config --global user.name yourname

git config --global user.email yourmail

git config --global push.default matching

git config --global core.quotepath false

git config --global core.editor "vim"

依次运行。

使用 Git

使用 Git 的方式有很多种，主要的三种：

• 只在本地使用：

  1. 创建并进入一个目录；

  2. 使用 git init 命令将这个目录设定为 Git 仓库，称为初始化仓库；

  3. 在这个仓库里可以创建文件或目录后，可以通过 git status -sb（-s，summary，意思是显示总结；-b，branch，意思是显示总结和分支；这两个设置让显示结果更易读）命令查看它们的状态（目录为空时会忽略），文件状态会在文件名前面显示，例如没有关联的文件前面显示 ??；

  4. 使用 git add 命令将文件添加到中转区，之后被添加的文件状态会显示 A，表示文件已被标记为准备提交到仓库的状态；

  5. 使用 git commit -m"提交信息" 命令来将中转区的文件提交到仓库；

  6. 如果文件内容有改动，文件状态会变为右边的红 M，再将文件 add 后，状态会变为绿色的左 M，再用 commit 命令将文件提交到仓库。

  7. 如果要删除文件，删除文件后，再 add 删除文件的文件名，这是状态变为了 D，再 commit 后，仓库文件也就被删除了；

  8. 可以使用 git log 命令就可以看到文件改动历史；

  9. 记住顺序就是先 add 再 commit 就可以了。

• 将本地仓库上传到 GitHub：

  1. 在 GitHub 上新建一个仓库，名称最好与本地仓库的统一；

  2. 然后使用 SSH 类型的仓库地址，进行同步操作：

     • 运行 git remote add origin git@github:xxx/name.git，最后一段就是仓库地址；

     • 运行 git push -u origin master，这就将本地的仓库推送到了 GitHub 上。

• 下载 GitHub 上的仓库：

  直接使用 git clone 命令，加上仓库的 SSH 类型的仓库地址，就可以将仓库下载到指定位置了。

如何上传更新

如果本地目录有任何变动，按照以下顺序就能上传：

1. 先 git add 目录；

2. 再 git commit -m "massage" 目录；

3. 然后使用 git pull 命令拉取，与远程目录合并；这一步是为了防止有别的更改本地仓库没有同步过；

4. 最后再 git push 就可以将变动的目录上传到远程仓库。

还有很多其他的命令，需要长期学习。

工具的重要性：

• 工欲善其事，必先利其器。

• 使用合适好用的工具，提高写代码的效率。

• 不同的情况下，使用不同的工具。

• 收费工具往往比免费工具靠谱。

• 需要花时间学习工具的使用方法，才能更好地利用工具。

各种工具的安装和配置：

• 科学上网；

• 取色工具；

• 编辑器和 IDE 工具：VSCode、Sublime Text 3、WebStorm …

• 开发工具：Node.js、Git、npm …

• npm 配置命令：

  1 2 3

  npm config set registry https://registry.npm.taobao.org/ npm config set loglevel http npm config set progress fasle

• GitHub 新建仓库：

  1. 登录 GitHub 后，找到并点击“New repository”按钮；

  2. 设置新仓库的名称后，点“Create repository”按钮；

  3. 在本地新建一个与仓库同名的文件夹，并在当前目录打开 Git Bash，或者在 Git Bash 进入到这个新文件夹中；

  4. 在 GitHub 页面的个人菜单中，进入 Settings 页面，然后通过“SSH and GPG keys”选项的“New SSH key”按钮，创建一个新 SSH key，步骤是：

     • 在 Git Bash 中输入 ssh-keygen -t rsa -b 4096 -C "your_email@xxx.com"，后面的邮箱对应自己的邮箱，输入完毕后回车确认；

     • 确认前面的命令后，会提示 Enter file in which to save the key (括号内会显示一个路径表示保存文件的路径):，看到这个提示后，点击一次回车，后面再出现提示，再点击回车，一共 3 次，最后会看到一个字符组成的像票据的图，就可以了。具体方法

     • 在 GitBash 中运行命令 cat ~/.ssh/id_rsa.pub 后会输出一串已刚才设置的邮箱结尾的 SSH key，把这个 key 全部复制；

     • 回到创建页面，在“Title”中输入任意标题（比如日期或设备名），把刚才复制的内容粘贴到“Key”中，然后确认添加就行了。

  5. 首次使用 Git，要在 GItBash 中，设置自己的用户名和邮箱，命令为：

     git config --global user.name "yourname"

     git config --global user.email "your_email@xxx.com"

  6. 回到 GitHub 创建好仓库的页面，按照最上面的命令提示逐行输入 GitBash 并运行，命令如下：

     echo "# blog" >> README.md

     git init

     git add README.md

     git commit -m "first commit"

     git remote add origin git@github.com:yourname/blog.git

     git push -u origin master

     最好手敲，拿不准就直接复制呗。最后会问你：

     Are you sure you want to continue connecting (yes/no)?

     输入“yes”回车，就行了，刷新仓库页面，就能看见文件列表了。

编辑器的使用：

• 多探索，多记快捷键。

个人博客的搭建：

• 没讲，应该转到下节了。

编程基础：

首先成为程序员，再成为前端开发工程师。而一个程序员需要知道：

• 硬件与软件：计算机的运行原理；（荐书《编码》）

• 最大的软件：操作系统；

• 自己写软件：数据结构和算法；（荐书《数据结构与算法结构》）

• 多人写软件：软件工程。（荐书《代码大全》）

前端为什么学编程基础？——防止成为井底之蛙。

计算机存储汉字的过程：

1. 内存内部的电容通过充电与否来存储 0 和 1，存储 1 就充电，存储 0 就不充电；而读取时，电量大于 50% 就识别为 1，电量小于 50% 就识别为 0；这样便实现了二进制数的存储。

   

2. 通过十进制和二进制之间的转换，计算机便可以只用二进制数 0 和 1 来存储十进制数；为了方便书写，一般会将二进制数写为十六进制数，因为单个十六进制数正好可以存 4 位二进制数。（扩展：负数使用补码形式存储，小数使用浮点数形式存储）

3. 用数字可以为字符编号，于是出现了字符集，例如“ASCII（美国信息交换标准代码）“；按照这个标准，如果要存储字母“a”，那么就存储十进制数 97 对应的二进制数 0110 0001（十六进制数为 61）。

4. 既然可以存储字符，那么汉字也不是问题，扩充字符集就可以了，将每个汉字对应不同的编号。例如最早的汉字字符集“GB2312（中国国家标准简体中文字符集）”，以及一度被广泛使用的微软推出的“GBK 字符集”。

5. 为了统一存储世界上所有的字符，Unicode 联盟推出了“Unicode 字符集”。

6. 解决了所有字符的存储方法，但还缺乏一种高性价比的存储方式，于是出现了字符编码。如果使用“Unicode 字符集”最初的低效方式，存储字母“a”和汉字“你”的方式如下：

   a => 00000000 00000000 00000000 01100001 = 0061

   你 => 00000000 00000000 01001111 01100000 = 4F60

   这样的方式浪费了存储资源，从而出现了比较节省存储资源的方式——字符编码：

   a => 01100001

   你 => 11100100 10111101 10100000

   当存储的是单个字母的时候，使用 1 个字节（Byte）来存储，而存储汉字或其他字符，则用两个或以上的字节来存储；第一个字节带有识别后续字节的编码，后续字节的前两位用来作为让第一个字节识别的标识，这就是“UTF-8 编码”：

   1字节 0xxxxxxx

   2字节 110xxxxx 10xxxxxx

   3字节 1110xxxx 10xxxxxx 10xxxxxx

   4字节 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

   5字节 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx

   6字节 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx

现实问题：

由于历史原因，早期的软件和网站是在“GBK 字符集”的年代诞生的，而没有赶上“Unicode 字符集”和“UTF-8 编码”，所以还是有大量应用“GBK 字符集”的软件和网站。

也是由于时间原因，JavaScript 使用了“Unicode 字符集”，却没有使用 UTF-8 编码，所以 ES5 及之前的标准无法表示 \uFFFF 之后的字符，某些情况下会出 bug。例如 JavaScript 会将一个超出范围的单个字符的长度识别为 2：

1
2
3
4

var str1 = '\u1D306';
alert(str1); //ᴰ6，一个字符和数字字符6；
var str2 = '𝌆';
alert(str2.length); //明明是一个字符，却显示长度为2；

所以，现在在各种编程当中，一定都要用“UTF-8 编码”！

学习建议

• 看一次是不够的，做一次是不够的。（概率学家坐飞机）

• 忘记是正常的，知道如何重新记起来就好，重复记忆久而久之自然会记住。

• 不要中断学习超过一周。

学习方法

• C：Copy，抄代码，复制别人的代码。

  • 搜索：用谷歌，尽量不用百度。

  • 参考：抵制 w3school.com 和 w3school.com.cn，推荐使用 MDN（Mozilla Developer Network）。

  • 工具：使用 JS Bin 或 js.jirenuo.com。（CSS Animation / window.open）

• R：Run，跑代码，将抄来的代码运行起来，调试代码。

  • 运行代码，观察运行后的结果。

• M：Modify，改代码，修改代码来尝试得到不同结果。

  • 修改、增删各种参数或属性，再次观察结果哪里有所改变，推断修改过的代码与结果之间的关联。

学习资料

• HTML - MDN；

• CSS - 《CSS 揭秘》，CSS Tricks；

• JavaScript - 《JavaScript 高级程序设计》，阮一峰博客和书；

• HTTP - 《图解 HTTP》；

• 其他 - GitHub，读书看质不看量。

知识分类

1. 工具使用知识：把软件上的按钮都试着点一遍。

2. 概念知识：占大部分学习内容，记忆重点。

3. 工程实践知识：难以直接学到，因为每个人遇到的问题是不同的，代码写的越多学到越多。

4. 经验：踩的坑多了，经验就多了，所谓“人码合一”；要善于总结，每次比上次要进步。

进制转换

• 十进制基准为 10，起始是 0 次幂，每进 1 位，幂次加 1；二进制则是以 2 为基准。

• 十进制手动向二进制转换，只能凑着转换；二进制手动转换十进制，将二进制数每位对应的 2 的幂都加起来。

• 小数从小数点后一位开始，十进制是从 10 的 1 次幂为分母开始，每向后 1 位，幂次加 1；二进制是从 2 的 1 次幂为分母开始。

• 不同进制之间的小数转换，可能会使有限小数变成无限小数，这是 JavaScript 中浮点数丢失精度的原因。

• 二进制向十六进制转换时，4 个二进制数正好可以存储 1 个十六进制数。

布局方案

本节只是介绍了常用的一些页面布局如何实现，并没有进行很系统的划分，例如区分父元素和子元素的定宽定高等情况。

水平居中

基本使用两层嵌套就可以了，HTML 代码如下：

1
2
3

<div class="parent">
    <div class="child">DEMO</div>
</div>

不同的实现代码如下：

1. inline-block + text-align：

   1 2 3 4 5 6

   .parent{ text-align: center; } .child{ display: inline-block; }

• 优点：兼容性好（低版本 IE 可以用 display: inline + zoom: 1 兼容）；

• 缺点：居中的元素中的文字会继承文字居中，不需要文字居中时，需要额外设置文字对齐方式；

2. table + margin：

   1 2 3 4

   .child{ display: table; margin: 0 auto; }

   • 优点：代码简单；

   • 缺点：暂时没有？

3. absolute + transform：

   1 2 3 4 5 6 7 8

   .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); }

   • 优点：居中元素不会影响周围元素；

   • 缺点：兼容性稍差；

4. flex + justify-content / margin：

   1 2 3 4 5 6 7 8

   .parent { display: flex; /*justify-content: center;*/ /*为父元素设置此属性后，子元素可以不设置margin属性*/ } .child { margin: 0 auto; }

   • 优点：效果最好最靠谱；

   • 缺点：兼容性稍差；

垂直居中

HTML 结构仍然是两层：

1
2
3

<div class="parent">
    <div class="child">DEMO</div>
</div>

不同的实现代码如下：

1. table-cell + vertical-align：

   1 2 3 4

   .parent { display: table-cell; vertical-align: middle; }

   • 优点：兼容性好；

   • 缺点，父盒子无法设置外边距；

2. absolute + transform：

   1 2 3 4 5 6 7 8

   .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }

   • 优点：居中元素不会影响周围元素；

   • 缺点：兼容性稍差；

3. flex + align-items

   1 2 3 4

   .parent { display: flex; align-items: center; }

   • 优点：效果最好最靠谱；

   • 缺点：兼容性稍差；

中心居中

基本就是将水平居中和垂直居中的方法组合使用，直接上样式代码：

1. 第一种：

   1 2 3 4 5 6 7 8

   .parent { display: table-cell; text-align: center; vertical-align: middle; } .child { display: inline-block; }

2. 第二种：

   1 2 3 4 5 6 7 8 9

   .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

3. 第三种：

   1 2 3 4 5

   .parent { display: flex; justify-content: center; align-items: center; }

一列定宽与一列自适应布局

基本 HTML 结构：

1
2
3
4
5
6
7
8
9

<div class="parent">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right</p>
        <p>Right</p>
    </div>
</div>

1. float + margin：

   1 2 3 4 5 6 7

   .left { float: left; width: 150px; } .right { margin-left: 170px; }

   • 优点：简单易懂，兼容性较好；

   • 缺点：在 IE6 中有“3 像素”的 BUG，可以在定宽浮动盒子上加 margin: -浮动盒子宽 解决；

2. float + margin + （fix）：

   上一种方法的改进版，在左浮动元素外包一层右浮动元素，右浮动元素宽度撑满父元素，同时设置右浮动元素的左外边距为负左浮动元素宽即可，但左浮动元素要用定位属性将层级提高。

   1 2 3 4 5 6 7 8 9 10 11

   <div class="parent"> <div class="left"> <p>Left</p> </div> <div class="right-fix"> <div class="right"> <p>Right</p> <p>Right</p> </div> </div> </div>

   1 2 3 4 5 6 7 8 9 10 11 12 13

   .left { float: left; position: relative; width: 150px; } .right-fix { float: right; width: 100%; margin-left: -150px; } .right { margin-left: 170px; }

   • 优点：简单易懂，兼容性较好；

   • 缺点：代码较多；

3. float + overflow：

   将自适应元素加上 overflow: hidden，触发自适应元素的 BFC 模式，隔离与浮动盒子的关系。

   1 2 3 4 5 6 7 8

   .left { float: left; width: 150px; margin-right: 20px; } .right { overflow: hidden; }

   • 优点：样式简单，最好用；

   • 缺点：不兼容 IE6；

4. flex：

   1 2 3 4 5 6 7 8 9 10

   .parent { display: flex; } .left { width: 150px; margin-right: 20px; } .right { flex: 1; }

   • 优点：简单优雅；

   • 缺点：低版本浏览器不兼容，性能较差，适合小范围布局；

一列不定宽一列自适应布局：

HTML 代码与上一种布局相同。

1. float + overflow：

   1 2 3 4 5 6 7 8 9 10 11

   .left { float: left; margin-right: 20px; } .right { overflow: hidden; } .left p { /*内容宽度任意设置*/ width: 200px; }

   • 优点：可以非常好的支持此类布局；

   • 缺点：不兼容 IE6；

2. flex：

   1 2 3 4 5 6 7 8 9 10 11 12 13

   .parent { display: flex; } .left { margin-right: 20px; } .right { flex: 1; } .left p { /*内容宽度任意设置*/ width: 200px; }

   • 优点：很好很强大；

   • 缺点：兼容性较差；

等高布局

等高布局的结构代码与上面两种的双列布局相同，就不重复写了。不同方式如下：

1. float + overflow：

   称为“伪等高”，子元素都设置 padding-bottom 为极大值，同时设置 margin-bottom 为负极大值来抵消，父元素和右侧子元素设置 overflow:hidden 截取最高的子元素高度来模拟出等高。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   .parent { overflow: hidden; } .left, .right { padding-bottom: 9999px; margin-bottom: -9999px; } .left { float: left; width: 150px; margin-right: 20px; } .right { overflow: hidden; }

   • 优点：兼容性好；

   • 缺点：代码较复杂；

2. flex：

   1 2 3 4 5 6 7 8 9 10 11 12

   .parent { display: flex; align-items: stretch; } .left { /*千万别设置高度*/ width: 150px; margin-right: 20px; } .right { flex: 1; }

   • 优点：非常好用，最舒服的布局方式；

   • 缺点：还是兼容性，性能方面的副作用其实可以忽略不计；

3. table：

   这是一种“多功能”布局，通过设置不同的属性，可以用这种方式实现以上三种布局，先看等高布局：

   1 2 3 4 5 6 7 8 9 10 11 12 13

   .parent{ display: table; table-layout: fixed; } .left, .right{ display: table-cell; background-clip: content-box; } .left { width: 150px; padding-right: 20px; }

   • 优点：天然的等高特性；

   • 缺点：不能设置外边距，只能用内边距做间隔，但是如果有背景色或背景图，需要另外设置 background-clip: content-box；左侧定宽需要时，需要父元素设置 table-layout: fixed 用来使布局优先，提升性能；不支持 IE8 及更低版本；

   等高布局也包含一列定宽一列自适应布局，如果要设定左侧高度，只能给左边的元素设置 padding-bottom。

   再来看一列不定宽一列自适应布局，需要将 table-layout: fixed 去掉，因为是内容决定宽度，而不是布局优先；另外在不定宽元素中要设置 width: 0.1%，用百分比是要兼容IE8；

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   .parent{ display: table; } .left, .right{ display: table-cell; background-clip: content-box; } .left { width: 0.1%; padding-right: 20px; } .left p { /*内容宽度任意设置*/ width: 200px; }

   • 优点：适用性广，

   • 缺点：繁琐，不支持 IE6、7；

等分布局

等分布局需要将宽度和间距算好，需要特别注意的就是要处理多余一个间距的宽度，一般可以在算好后，指定第一个或末一个的间距为 0，但是等分要求高时要用公式计算：父元素宽度 + 间距 = (子元素宽度 + 间距) × N。

1. float：

   1 2 3 4 5 6 7 8 9 10

   .parent { margin-left: -20px; } .column { float: left; width: 25%; padding-left: 20px; /*要避免内边距影响宽度*/ box-sizing: border-box; }

   • 优点：代码简单易懂；

   • 缺点：需要给父元素设置 margin 负值来抵消多余的间距；如上面的效果图所示，如果父元素需要边框，则需要另做处理；子元素数量要改变就需要同时更改子元素宽度；子元素内的内容需要有其他元素包裹；

2. table：

   在上一种方法的结构外多加了一层元素，主要用于抵消多余间距；设置 table-layout: fixed 来加速渲染。

   1 2 3 4 5 6 7 8

   <div class="parent-fix"> <div class="parent"> <div class="column"><p>1</p></div> <div class="column"><p>2</p></div> <div class="column"><p>3</p></div> <div class="column"><p>4</p></div> </div> </div>

   1 2 3 4 5 6 7 8 9 10 11 12

   .parent-fix { margin-left: -20px; } .parent{ display: table; width: 100%; table-layout: fixed; } .column { display: table-cell; padding-left: 20px; }

   • 优点：可以设置任意个子元素而不必设置子元素宽度；

   • 缺点：除了解决子元素的自由设置，其余与上一种相同；

3. flex：

   结构代码同第一种相同。

   1 2 3 4 5 6 7 8 9

   .parent { display: flex; } .column { flex: 1; } .column + .column { margin-left: 20px; }

   • 优点：不需要为父元素添加宽度，代码量很少，用子子元素的相邻选择器添加间距即可，设置了 flex 占比后，浏览器会自动算出剩余空间并进行分配；

   • 缺点：仍然是兼容性问题；

基本全屏布局

在 WebStorm 中，使用 SASS/SCSS 转换插件时，需要使用 File Watchers 功能监听 SASS/SCSS 类型文件；当命令行执行自动转换时，发出报错信息为： Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8 。

错误原因是由于文件路径中有中文字符或者代码里有中文注释，又或者又中文字体栈；只要把中文都改成英文可以解决问题，但岂不是因噎废食？

解决的方法：

1. 找到 Ruby 安装目录，定位到 lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb 文件，在所有的 require 语句的下一行添加 Encoding.default_external = Encoding.find('UTF-8') 即可。

2. 上个方法无效时，同样在 Ruby 目录下，定位到 lib/ruby/gems/2.4.0/gems/sass-3.x.x/lib/sass/importers/filesystem.rb 文件，用编辑器打开后，定位到 87 行，将此行修改为 if name.encode("utf-8", "gbk").index(@root + "/") == 0 即可。

   PS：如果有两个 sass-3.x 文件夹，就两个都修改，基本就没问题了。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

准备工作

• 注册 GitHub 账号；
• 安装 Node.js；
• 安装 Git 客户端；

搭建博客

1. 创建仓库

在 GitHub 中创建一个名为“用户名.github.io”的仓库，例如你的 GitHub 用户名为 test，那么该仓库名即为 “test.github.io”。创建成功后，默认会在这个仓库里生成一些示例页面，以后博客所有代码都是放在这个仓库里。

PS：

1. 注册的邮箱一定要验证，否则不会成功；
2. 仓库名字必须是：username.github.io，其中 username 是你的用户名；
3. 仓库创建成功不会立即生效，可能需要过一段时间，大概10-30分钟，或者更久；

2. 绑定域名

不绑定域名可以使用默认的地址，也就是仓库名称来访问搭建的博客。

1. 注册好域名后，在域名配置中，添加一个 CNAME 类型记录，主机记录可以填写“blog”，而后将仓库名填写到“记录值”项中。
2. 然后在 GitHub 项目根目录新建一个名为“CNAME”的文件，无后缀名，里面填写你的域名，例如上面的“blog.xxx.cn”。

3. 配置 SSH key

用 Git bash 执行命令： $ cd ~/ .ssh ，如果提示“No such file or directory”，说明是第一次使用，没有 SSH key；配置方法如下：

1. 粘贴下面的命令，并将邮件部分替换成你的 GitHub 注册邮箱：

   $ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

   回车确认后会提示：

   Generating public/private rsa key pair.

2. 当提示输入要保存密钥的文件时，直接回车确认，表示接受默认的文件位置：

   Enter a file in which to save the key (/c/Users/you/.ssh/id_rsa):[Press enter]

3. 提示输入密码和再次确认密码都直接回车使用空密码即可：

   Enter passphrase (empty for no passphrase): [Type a passphrase]

   Enter same passphrase again: [Type passphrase again]

4. 最终会出现一个像很多泡泡的图案，说明以及生成完毕；

5. 打开用户目录，找到 .ssh 文件夹，用编辑器打开其中的 id_rsa.pub 文件，复制里面的所有内容；

6. 打开你的 GitHub 主页，进入个人设置，找到 “SSH and GPG keys” 选项，选择“New SSH key”，“Title”项中可以填写这个 key 所在的设备，在“Key”项中，把刚才复制的内容粘贴进去，然后确认添加并保存；

7. 在 Git bash 中输入命令：

   $ ssh -t git@github.com

   提示：

   Are you sure you want to continue connecting (yes/no)?

   输入 yes ，然后提示：

   Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.

   username 是你的 GitHub 用户名，后面的意思就是成功通过身份验证；

8. 初始化 Git 的个人信息，分别输入并回车确认：

   $ git config --global user.name "username" username 是你的 GitHub 用户名，非昵称；

   $ git config --global user.email "email" email 是你的 GitHub 注册邮箱。

4. 安装

在 Git bash 中使用 npm 工具来全局安装 HEXO，命令如下：

$ npm install hexo -g

安装完成后，可以使用 -version 命令查看 HEXO 版本。