抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

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


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

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

创建新的文章

一些大佬们都会告诉你使用(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

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

评论