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

Hexo简介

Hexo 是一个基于Node.js的静态博客网站生成器，作者是来自台湾的 Tommy Chen。常规的WordPress或者Typecho博客系统都需要借助于Apache或者Nginx服务器配合PHP程序与数据库完成博客的部署，除了前端的HTML&CSS、JavaScript你需要学习之外，还需要对后端PHP程序以及MySQL数据库有一定的认识和了解，而学习了这么多，却仅仅是为了搭建一个博客。别忘了，搭建博客的目的是写作，是博客的内容，这才是重点，所以说传统博客系统的复杂程序直接对很多小白进行了劝退。但是Hexo则是静态博客，不需要服务器端处理复杂的任务，类似于docsify，可以让你抛弃后端PHP、MySQL，直接编辑Markdown文件，然后由网站前端输出。

环境安装

举个🌰

安装之前，我先给大家举一个不恰当的栗子用于理解这个安装过程，Node.js就像我们的手机操作系统，nmp就是手机上的软件商店，而Hexo就是一个APP应用。我们安装的步骤就是先装操作系统，然后是应用商店，最后才是软件。

“操作系统”的安装

Hexo博客基于Node.js，因此首先要安装Node.js，可以查看文章docsify学习笔记，学习如何安装。

“应用商店”的安装

成功安装后，需要将nmp源切换为国内淘宝源：

1

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装完成后可以使用命令：

1

cnpm -v

查看cnpm版本，如果可以成功显示，说明安装成功。

“APP软件”的安装

直接使用命令：

1

cnpm install -g hexo-cli

安装Hexo博客。安装完毕后，使用命令：

1

hexo -v

查看Hexo版本，如果可以正常显示，说明安装成功。

至此，“操作系统”、“应用商店”、“APP软件”所有环境已经安装完毕。

本地部署

接下来就是如何在本地部署Hexo博客。

如图所示，我在我的PC中D:\code文件夹中新建了一个Hexo-Demo的文件夹，我想把博客就在这个文件夹中。

打开CMD窗口，使用命令cd即可切换工作目录：

1
2

PS C:\Users\myxc> cd D:\code\Hexo-Demo
PS D:\code\Hexo-Demo>

或者你也可以直接在Hexo-Demo文件夹中点击鼠标右键，然后选择Open in Termainal。

创建博客

在该文件夹中使用命令：

1

hexo init

即可生成博客，这个时候你会发现原来空白的文件夹中已经自动生成了很多文件，这也就意味着你已经完成了博客的创建。

需要注意的是，往后去所有关于本博客的操作，基本都是在文件根目录打开CMD进行。

基本操作

接下来就是启动本地博客服务（server→服务）：

1
2
3
4

D:\code\Hexo-Demo>hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

按照提示，打开浏览器，输入本地地址http://localhost:4000/即可访问你的博客。

创建新的文章

一些大佬们都会告诉你使用（new→新建）：

1

hexo n "我的第一篇文章"

命令完成文章的创建，但是对于我这样的VIM小白来说，命令行的方式显然不够直观且很麻烦。

你可直接使用一些Markdown编辑工具在博客路径\source\_posts文件夹下新建md文件来实现文章的创建。

重生成

创建新文章后，使用命令：

1

hexo clean

清理缓存，然后（generate→生产）：

1

hexo g

重新生成博客页面，再次刷新浏览器页面即可看到新发布的文章。

GitHub远程部署

上面我们已经在本地Node.js环境中部署了Hexo博客系统，但是如果想将让全世界的人都可以访问到你的博客，那就需要将这个博客系统放置到云服务器中，让你在浩瀚无际的互联网当中也拥有一席之地。

这个时候我们就不需要购买自己的网站服务器，而是借助于GitHub完成博客的线上部署。

创建GitHub仓库

首先登录GitHub，然后点击New repository：

然后在Repository name中填写YourGithubName.github.io，注意，这个名字是固定的，必须是你前面显示的名字作为二级域名，然后Description中填写一段描述的话，还有就是记得要设置为Public，这样的话才保证任何人都可以通过域名来访问你的博客。

填写完毕之后，点击Create repository，即可完成仓库的创建。

部署插件的安装

然后回到本地博客文件夹，需要在安装一个用于Git部署插件，具体作用就是可以帮助我们把本地博客部署到刚才创建的GitHub仓库。

1

cnpm install --save hexo-deployer-git

配置文件的修改

安装完成后，使用文件编辑器（例如VSC）打开博客文件根目录下的配置文件_config.yml，在102行的位置填写：

1
2
3
4
5
6

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/Man-Yacan/Man-Yacan.github.io.git
  branch: master

其中只要把repo后面的网址更改为你创建的仓库地址就行了，然后别忘了Ctrl + S保存。

关于博客设置的很多所有选项基本都是在这个配置文件中进行设置，基本配置文件的设置及其含义额可以参考官方文档：https://hexo.io/docs/configuration。

完成

使用命令（deploy→部署）：

1

hexo d

即可将本地博客部署到GitHub云端，注意，这一步需要在弹出框中登陆你的GitHub。

然后访问你创建的域名，例如我的：https://man-yacan.github.io就可以访问你的在线博客了，如果加载不出来，请使用Ctrl + F5强制刷新页面即可。

Hexo的使用

主题的安装

直接在Hexo官网上挑选合适的主题，一般每个主题都会有与之对应详细文档，按照文档操作来就不会错。

主题下载完成后，要启用主题就要在博客根目录配置文件_config.yml第97行的位置进行修改：

1
2
3
4

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia

然后记得清除缓存，重新生成博客然后部署至远程服务器。

VSCode 简介

Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT 等特性，支持插件扩展等等。

推荐理由：

• 比 sublime 开源，比 webstorm 更轻

• 智能提示很强大

• 自带 emmet

• 插件安装非常方便

• 自带强大的调试功能

• 软件跨平台支持 Win、Mac 以及 Linux。

VSCode 安装

官网下载地址： https://code.visualstudio.com/

安装步骤：默认傻瓜式安装，直接下一步即可。

• 如果需要改变默认的安装路径，在选择目标位置时直接修改即可。

• 为方便以后使用，建议创建桌面快捷方式。

VSCode 使用

文件目录管理

• 选择File，然后选择Open Folder，打开文件夹。

• 界面主要分为EXPLORER（资源管理界面）和代码编辑页面。

颜色主题

• 设置首选项按钮 – Color Theme
• 在弹出的选择主题界面，选择喜欢的主题界面即可。其中Monokai是与sublime一致的风格。

其他操作

• 放大缩小视图：ctrl + 加号 和 ctrl + 减号

• 向上复制一行：alt+shift+↑

• 向下复制一行：alt+shift+↓

• 当光标点击到某一行时，默认选中全行，可以直接复制粘贴

VSCode 插件

安装方法

点击左侧《扩展》图标，在搜索框输入需要安装的插件名称，点击install进行安装即可。安装完毕，需要重新加载软件使插件生效。

推荐安装的插件

注意：插件安装需要联网。

快捷键

Shift+ Alt+ ↓：快速复制本行到下一行

禁用或卸载已安装的插件

在扩展界面，点击“更多操作”（三个点），选择“显示安装的扩展”，在列表中找到需要禁用的插件，点击“禁用”或者“卸载”即可。同样操作完毕需要重新加载生效。

使用Remote SSH连接远程服务器

1. 安装插件Remote SSH；
2. 点击窗口左下角远程连接图标（可能需要重启软件生效）；
3. 选择Connect to Host；
4. 选择Configure SSH Hosts；
5. 打开第一个选项；
6. 编写文件如下格式：

1
2
3

Host 连接名称
    HostName 服务器地址
    User 用户名

编写完成后，保存文件，输入密码即可访问远程服务器。

用了之后有个问题，一旦成功连接SSH服务器CPU立马100%，断开SSH也没有效果，只能重启服务器，无语了，还不如用软件麻烦点算了。

VSC调试运行JS

在VSC编写完JS代码，如果在放到浏览器中运行检查太过于麻烦，可以借助Node.js与Code Runner插件实现在VSC中运行JS代码。Node.js的安装可以查看docsify学习笔记，安装完成后，在VSC中安装插件Code Runner：

安装完毕之后可以在VSC中直接右键运行JS代码或者使用快捷键Ctrl + Alt + N。