Hello, Hexo.

从零安装并远程部署Hexo博客

请注意，本文编写于 171 天前，最后修改于 171 天前，其中某些信息可能已经过时。

Hello World

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

$ hexo new "My New Post"

More info: Writing

Run server

$ hexo server

More info: Server

Generate static files

$ hexo generate

More info: Generating

Deploy to remote sites

$ 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文件，然后由网站前端输出。

• 中文官网：https://hexo.io/zh-cn
• 官方中文文档：https://hexo.io/zh-cn/docs
• 一款Hexo主题Volantis

经过今天的学习我才发现，Hexo并不因为其是静态博客就比较简单，相比之下，它的配置我觉得比Typecho难得多，对没有编程基础的小白不是很友好~

环境安装

举个?

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

“操作系统”的安装

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

“应用商店”的安装

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

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

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

cnpm -v

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

“APP软件”的安装

直接使用命令：

cnpm install -g hexo-cli

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

hexo -v

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

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

本地部署

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

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

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

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

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

请记住这个博客根文件夹，它很重要，以后关于该博客的所有操作，如果未做特殊声明，都是在该路径下进行CMD命令行的操作。

创建博客

在该文件夹中使用命令：

hexo init

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

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

基本操作

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

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/即可访问你的博客。

看到该页面意味着你已经成功在本地安装了Hexo博客

创建新的文章

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

hexo n "我的第一篇文章"

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

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

重生成

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

hexo clean

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

hexo g

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

GitHub远程部署

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

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

创建GitHub仓库

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

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

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

部署插件的安装

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

cnpm install --save hexo-deployer-git

配置文件的修改

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

# 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→部署）：

hexo d

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

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

所有本地与远程部署的命令其实都可以简写：

#本地运行
hexo clean && hexo g && hexo s
# 部署到git或者自己的域名
hexo clean && hexo g && hexo d

还有需要注意的是，每次运行完这两道命令，一定要仔细看一遍CMD控制台输出是否有报错，有报错的话说明我们刚才修改的配置有误！！！

Hexo的使用

主题的安装

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

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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia # 填写你下载的主题名称

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

一些小问题

run npm fund for details

安装主题的时候总是显示：run npm fund for details，使用命令：

npm config set fund false

即可永久解决。

found 0 vulnerabilities

奶奶的，折腾了一个晚上，只要安装有的主题就会出现这个：

PS D:\code\Hexo-Demo> npm i hexo-theme-volantis
up to date, audited 243 packages in 2s
found 0 vulnerabilities

Google查了很多国内外资料，没有解决办法，或者说很难解决，俺也不知道是为啥，劝退了~

1. How to fix npm create-react-app stuck at 'found 0 vulnerabilities'?
2. npm install shows vulnerabilities

大家可以自己再了解下，我找到的办法就是有人重装解决了，但是我自己重装还是不行，会遇到这个问题。但是经过多次尝试，我自己总结出来了规律，只要是使用：

 npm i 

命令就会出现这个问题，使用：

git clone

就不会。太傻X了?！！！所以我们只要把所有的npm安装命令换成git就行了~

----- END -----