第一个静态博客告你日记

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上,它对于当前操作系统是什么基本上是无感知的。

Java和Node.js

另一方面,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 那样嵌入网页在沙箱环境中运行。[3]

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

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

下载

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

Node.js官网

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

安装

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

安装过程

安装中

验证

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

win+R

开始菜单上右键

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

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,就能轻松管理好项目版本,做好项目的追踪和辅助进度控制。[4]

安装 Git

  • Windows:下载并安装 git.
  • Mac:使用 Homebrew, MacPortsbrew 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

这条命令是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安装项目依赖的一个命令,其中npmnode 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, StylusMarkdown 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 codenotepad ++,windows自带的记事本有严重的bug,可能会导致无法解析)来填写内容:

使用vscode打开的博客内容

假设您已经熟悉了Markdown语法(如不熟悉,请点击链接前去学习)

填充如下文本:

# 我的博客

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

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

# 写更多的博文

;啊;a;aa;哈哈哈

保存之后,我们再次执行

$ hexo server

或,简写

$ hexo s

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

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

新的文章

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

第一篇博客

参考资料


   转载规则


《第一个静态博客告你日记》 Harbor Zeng 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
如何搭配一个无与伦比的主题 如何搭配一个无与伦比的主题
前言在这篇文章中您将学到: 如何创建一篇文章 什么是front-matter 如何下载主题 如何启用主题 创建一篇文章$ hexo new "关于一个人住,享受孤独的一些感受" INFO Created: 添加博文内容--- title: 史上最全hexo静 tags: - hexo img: https://static.tellyouwhat.cn/blogimg/20190506
下一篇 
新秀语言go:Golang入门语法知识点总结 新秀语言go:Golang入门语法知识点总结
为什么是Golang? “ Go将成为未来的服务器语言。“ - TobiasLütke,Shopify 因为他是Google开发的语言! 谷歌非常擅长创造最注重效率和用户友好性的产品。 GoRoutings在Java中创建新线程不是内存有效的。由于每个线程消耗大约1MB的内存堆大小,并且最终如果你开始旋转数千个线程,它们将对堆施加巨大压力并导致由于内存不足而导致关闭。此外,如果要在两个或多
2019-02-24
  目录