第一个静态博客告你日记

node环境搭建

什么是Node.js

node.js不是一个库，也不是一个新的语言，他是一个平台，一个基于JavaScript的运行容器。它被创造出来的目的就是使得浏览器里面才能运行的代码能在电脑，手机上随时运行。

假设这样一个例子：我们想在浏览器里面上传一个文件，JavaScript是不能读取磁盘上的文件的，我们必须通过<input type="file"/>这样的标签来选择文件，而这个选择文件的接口是HTML的规范，前端开发者对于这个规范除了遵从，没有任何抵抗的方式。

这个时候Node出现了，他可以解决这个问题，不过不是在浏览器里面。

首先，任何语言都会有自己的运行环境，不管是像Java、Golang、C/C++这种编译型语言，还是像JavaScript、Python这种解释型语言，比如Java的虚拟机(JVM)，Golang二进制文件执行的操作系统环境，还是Python的解释器(Interpreter)，他都要有一个运行的环境，而不同的环境就能决定代码能否跨平台运行，比如说在不同的操作系统上都能安装Java运行环境，那么一套java代码被编译后的文件就能在不同的操作系统上运行，因为对于编译好的.jar文件来说，它只是运行在JVM上，它对于当前操作系统是什么基本上是无感知的。

另一方面，JavaScript是浏览器语言，而浏览器本身就是跨平台的，每个设备都要上网，都要通过浏览区。Google Chrome在这一方面是先驱了，带领HTML5的Webkit标准一路领先，V8引擎的效率比IE6高数十倍。

所以Node.js就是基于Chrome的V8引擎来做的。

一方面，Node.js可以把以前只能在浏览器里面运行的代码放到桌面，手机，平板上面来运行。

比如我们上面说到的“文件上传”，在node.js里面，就可以通过fs模块，读取文件流，进行上传，打破了JavaScript不能操作磁盘文件，不能读取操作系统状态，不能执行终端命令，等诸多限制。

另一方面，Node.js给JavaScript添加了模块化的支持，

const fs = require('fs') // fs 是 文件系统 的缩写: file system

我们可以通过export关键字决定什么是模块里面可以向外暴露的，其他都是私有的，通过require可以引入其他模块提供的API，这也是JavaScript能做大项目的基础——模块化。

这两方面的改进，使得JavaScript在Node.js中从浏览器语言蜕变成为一门独立自主，独当一面，独树一帜的优秀语言，前端开发者社区空前活跃，node项目在github上屡次登上冠军榜！

JavaScript 高涨的人气带来了很多变化，以至于如今使用其进行网络开发的形式也变得截然不同了。就如同在浏览器中一样，现在我们也可以在服务器上运行 JavaScript ，从前端跨越到后端，这样巨大的反差让人难以想象，因为仅仅在几年前 Javascript 还如同 Flash 或者 Java applet 那样嵌入网页在沙箱环境中运行。^[1]

我们可以用JavaScript写服务端代码，可以用JavaScript写桌面应用，并很容易移植到多平台（Mac，PC，Linux各发行版）上（使用Electron等框架）。

我们本章使用的hexo就是一个node.js开发的跨平台程序，详情请继续阅读。

下载

访问https://nodejs.org/zh-cn/下载Node.js

建议选择长期支持版(LTS)，非常稳定。

安装

在安装的过程中，把Add to PATH勾选上，这样的话，安装完毕，我们就可以直接在命令行或是终端中直接运行，就不用去额外添加环境变量了。

验证

等待安装完毕之后，按下win+R，输入powershell或在开始菜单上右键，选择powershell，打开一个现代化的命令行终端。

此时会弹出一个如下的窗口

在里面输入如下命令，如果出现了版本号，就说明nodejs已经安装成功了：

$ node -v
v10.13.0

$ npm -v
6.4.1

Git

什么是Git

我们来看一个例子：假设大四毕业生小张在写毕业论文，写好初稿后经常删改，甚至还会在第二天把前一天删掉的东西找回来。如果他动点脑子，就不会只在一个文档中改来改去，而会在文件夹中有：

毕业论文_初稿.doc
毕业论文_修改1.doc
毕业论文_修改2.doc
毕业论文_修改3.doc
毕业论文_完整版1.doc
毕业论文_完整版2.doc
毕业论文_完整版3.doc
毕业论文_最终版1.doc
毕业论文_最终版2.doc
……

看起来是不是很郁闷啊？小张当然也郁闷了，因为自己总是改不好，所以他把自己的论文发给女朋友（是学霸），求帮忙；与此同时他自己也在继续修改。第二天就有了：

毕业论文_最终版3.doc
毕业论文_女友版1.doc

他女友毕竟是学霸，当然给他的论文做了比较大的修改，此时小张虽然看到了希望，但还要纠结着做一件事情：把上面两个版本的论文合并成：

毕业论文_死也不改版.doc

等合并好，已是凌晨三点半。小张无比怨念：这样子真是没法和女友开心的玩耍了呢！

怎么办？

小张想，如果能有个什么东西来帮忙控制一下这该死的版本，那真是谢天谢地了！就像这样：

版本	修改人	说明	日期
初稿	小张	这是初稿	Day1
修改1	小张	修改目录	Day2
修改2	小张	合并段落	Day3
……	……	……	……
最终版2	小张	xxx	Day7
死也不改版	女友	bala	Day8

这样就不用手动控制那么多版本啦！

所以，所谓“版本控制系统”，就是来解决这类问题的。

没错，Git就是一个版本控制软件。在进行软件开发时，一个团队的人靠使用Git，就能轻松管理好项目版本，做好项目的追踪和辅助进度控制。^[2]

安装 Git

• Windows：下载并安装 git.
• Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。
• Linux (Ubuntu, Debian)：sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

验证

在powershell命令行终端里面输入如下命令判断git是否安装成功：

$ git --version
git version 2.19.1.windows.1

hexo搭建

安装

前往hexo官网，查看最新的安装命令

这条命令是npm install hexo-cli -g

我们在刚刚打开的powershell里面执行这条命令

$ npm install hexo-cli -g
[ .................] / loadDep:kind-of: sill resolveWithNewModule object-copy@0.1.0 checking install

如果网络状况良好的话，执行成功就像这样子的：

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-cli@1.1.0
updated 2 packages in 21.422s

验证

在命令行里面输入如下命令来判断hexo是否成功安装：

$ hexo version
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.13.0
v8: 6.8.275.32-node.36
uv: 1.23.2
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0i
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

如果出现红色的报错代码，则说明，安装失败。

第一个静态博客

初始化博客

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件

此教程以tellyou-diary为例，您可以自定义博客文件夹的名字（并非最终博客的名字，稍后将指引您设置博客的标题名字），我将创建一个个人日记博客站。

$ hexo init tellyou-diary
INFO  Cloning hexo-starter to ~\tellyou-diary
Cloning into 'C:\Users\zengxg\tellyou-diary'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 71 (delta 0), reused 0 (delta 0), pack-reused 68
Unpacking objects: 100% (71/71), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'C:/Users/zengxg/tellyou-diary/themes/landscape'...
remote: Enumerating objects: 8, done.
remote: Counting objects: 100% (8/8), done.
remote: Compressing objects: 100% (8/8), done.
remote: Total 885 (delta 1), reused 5 (delta 0), pack-reused 877
Receiving objects: 100% (885/885), 2.55 MiB | 337.00 KiB/s, done.
Resolving deltas: 100% (464/464), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated titlecase@1.1.2: no longer maintained
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 421 packages from 504 contributors and audited 4697 packages in 18.372s
found 2 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
INFO  Start blogging with Hexo!

cd意为 change directory，改变目录的意思。

$ cd tellyou-diary

安装依赖

npm install是nodejs安装项目依赖的一个命令，其中npm是node package manager的缩写，加上install动词，意思就很明显了。

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 4697 packages in 3.344s
found 2 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

文件目录结构

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

文件简要解释

_config.yml

网站的 配置 信息，您可以在此配置大部分的参数。

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
author	您的名字
language	网站使用的语言
timezone	网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Asia/Shanghai, Japan, 和 UTC 。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

参数	描述	默认值
url	网址
root	网站根目录
permalink	文章的 永久链接 格式	:year/:month/:day/:title/
permalink_defaults	永久链接中各部分的默认值

网站存放在子目录

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

参数	描述
theme	当前主题名称。值为false时禁用主题
deploy	部署部分的设置

默认的主题是landscape，下一章我们来讲如何更换主题。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.0.0",
    "hexo-generator-archive": "^0.1.0",
    "hexo-generator-category": "^0.1.0",
    "hexo-generator-index": "^0.1.0",
    "hexo-generator-tag": "^0.1.0",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-stylus": "^0.2.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-server": "^0.1.2"
  }
}

scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

运行起来吧

执行以下命令：

$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

转到http://localhost:4000这个链接，就能看到您的第一个博客启动了：

在确定运行无误之后，我们来

创建一篇自己的文章

在命令行终端中按下ctrl+c来停止预览

终止批处理操作吗(Y/N)? Y

输入Y，按下回车即可停止预览

命令行里面输入如下命令即可新建文章：

$ hexo new "我的第一个静态博客成立了"
INFO  Created:

接下来我们要编辑这篇文章的内容：

windows用户：在命令行中输入explorer .并执行，就会得到一个打开在博客目录下面的资源管理器

或者手动点击图标打开，并导航到~\hello-hexo\source\_posts您的文章目录下，我们双击第一篇文章我的第一个静态博客成立了.md，用文本编辑器（建议使用VS code或notepad ++，windows自带的记事本有严重的bug，可能会导致无法解析）来填写内容：

假设您已经熟悉了Markdown语法（如不熟悉，请点击链接前去学习）

填充如下文本：

# 我的博客

2019年我新建了一个静态博客，**他有很多好处**

~~9102年了，不能再长胖~~

# 写更多的博文

；啊;a;aa;哈哈哈

保存之后，我们再次执行

$ hexo server

或，简写

$ hexo s

打开浏览器进入http://localhost:4000

就能看见我们新发布的文章了：

点击标题进入文章详情页：

参考资料

---

1. Node.js是什么? 案例逐一介绍 https://blog.csdn.net/h330531987/article/details/60875417 ↩︎

2. Git入门指引 http://blog.a0z.me/2014/05/21/GitBeginning/ ↩︎