Fork me on GitHub

Hexo搭建博客教程(1) - 安装环境与本地搭建

前言

搭建个人博客一般有两种选择,一个是使用WordPress,但是需要将博客搭建在服务器上,不过搭建好后写文章方便,适合没有程序基础的人使用。另一个是使用Hexo,相对简洁高效,不需要服务器,既可以部署在本地,也可以将博客部署到GitHub Pages上,支持Markdown语法,缺点是需要有Git基础,写文章比WordPress麻烦点。

初次使用Hexo来搭建个人博客,确实比较手忙脚乱,这里记录一下流程,希望对大家能有所帮助。

(注:本文是只针对Windows平台的搭建教程)

有兴趣的可以戳下这里看看我的个人博客。

How to play

本教程一共分为3章:

请根据自身需要选择章节,以节省时间。

一、安装环境

  • 安装Node.js
  • 安装Git
  • 安装Hexo

1.1 安装Node.js

Hexo是一个基于Node.js的快速、简洁且高效的静态站点生成框架,想要安装Hexo,需要先安装Node.js,官网的安装包有两种,一种是安装程序.msi文件,一种是.zip压缩包,这里选择.msi文件,安装后会自动配置好环境变量。

下载链接

1.2 安装Git

Git就不多说了,作为开发者或多或少都会接触过吧,直接前往官网下载安装包即可。操作教程网上也是一堆,这里就不赘述了。

下载链接

如果Git和Node.js的环境变量都配置好了,可以通过在cmd中确认安装结果。

1
2
git --version
node -v

1.3 安装Hexo

安装好Node.js,就可以使用npm来安装Hexo

1
npm install -g hexo-cli

安装完毕后,可以通过hexo version来确认是否安装成功。

二、开始搭建个人博客

千里之行,始于足下,在安装好所有的环境之后,我们终于可以开始搭建博客的第一步了。

2.1 初始化Hexo项目

首先是选择一个文件夹,用来给我们我们的个人博客的存放各种文件。接着进入该文件夹的路径,打开cmd命令窗口,这里有两种打开方式:

  1. 按住Shift,同时点击鼠标右键,选择在此处打开命令窗口
  2. 在上方的地址栏里输入cmd,接着回车即可快速打开命令窗口。

当然,你也可以直接Win+R然后输入cmd来打开命令窗口,不过需要再通过cd命令将路径切换到你指定的文件夹。

接着输入指令来初始化你的博客

1
hexo init

初始化成功后,你会看到

Start blogging with Hexo!

2.2 生成静态页面文件

接下来,执行命令

1
hexo g

该命令用来生成静态页面文件到public目录,Hexo会将 source 文件夹中除 posts 文件夹之外,以下划线_开头命名的文件或文件夹、以及隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件夹会被拷贝过去。

最后,我们只要启动Hexo服务器就行了。

2.3 本地启动Hexo服务器

1
hexo s --debug

Hexo启动服务器的速度非常快,很快你就可以看到

Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

恭喜你,你的个人博客已经搭建成功了,接下来只要在浏览器输入http://localhost:4000/就可以在本地访问你的博客了。

这里使用hexo s也可以启动服务器,只不过加上--debug参数,如果运行中出错可以看到错误信息。

2.4 关闭Hexo服务器

要想关闭服务器,只需要在命令窗口按下Ctrl+C就可以了,这个组合键不仅仅用于关闭服务器,事实上你在cmd窗口中任何执行中的命令都可以用这个组合键来结束命令,只要连按两次该组合键就可以连输入Y或者N都不用。

三、常用的命令

1
2
3
4
5
6
7
8
hexo new "postName"  #新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 启动服务器(默认端口4000,'ctrl+c'关闭server)
hexo deploy # 项目部署
hexo help # 查看帮助
hexo version # 查看Hexo的版本
hexo clean # 清除Hexo的缓存

上边的一些命令可以使用简写

1
2
3
4
hexo n
hexo g
hexo d
hexo s

3.1 本地调试三连

1
2
3
hexo clean
hexo g
hexo s --debug

3.2 远程部署三连

1
2
3
hexo clean
hexo g
hexo d

注:在使用部署命令时,需要先用npm安装 hexo-deployer-git 插件:

npm install hexo-deployer-git --save

四、撰写第一篇博文

Hexo撰写博文也不难,分为 post 和 draft 两种,其中 post 存放在 source/_posts 目录下,draft 存放在 source/_drafts 目录下。

post 和 draft 的区别在于前者会被发布到博客,而后者不会被发布。

4.1 第一篇文章

1
hexo n post "my-first-post"

Hexo会自动在 source/_posts 目录下新建一个名为 my-first-post 的 .md 文件;打开该文件,可以看到:

1
2
3
4
5
---
title: my-first-post
date: 2018-04-21 23:11:30
tags:
---

这是 post 模板自动生成的 YAML 文件头,title 是这篇 post 的标题,可以将其改为 My First Post;date 是创建的日期;tags 是该 post 的标签,可以添加自定义的标签:

1
2
3
4
5
6
7
---
title: My First Post
date: 2018-04-21 23:11:30
tags:
- demo
- first-post
---

接着再进行本地调试三连,就可以看到刚刚写好的博文了。

1
2
3
hexo clean
hexo g
hexo s --debug

4.1 第一篇草稿

创建命令和前边类似:

1
hexo n draft "my-first-draft"

另外草稿的头文件是没有日期的:

1
2
3
4
---
title: my-first-draft
tags:
---

草稿文件是不会被 hexo g 命令生成到public目录下的。

0%