Hexo+NexT(一):在Windows下安装Hexo+NexT及搭建博客
阅读本篇之前,假定读者已经有了Node.js
的基础,如需要补充Node.js
知识的,请自行百度。
Hexo
是在Node.js
框架下的一个项目,利用Node.js
提供的强大功能,完成从Markdown到静态网页的转换。
NexT是Hexo项目下的一个主题插件,提供可高度定制的页面外观。
1. 我们要做什么
- 搭建Node.js环境
- 下载Hexo项目
- 下载NexT的主题插件
- 运行博客
2. 在Windows系统下安装Node.js
在Windows下,Node.js
的核心是命令行可执行文件Node.exe
。无论安装版或者绿色版,只要满足以下两个基本条件,Hexo
即可运行。
node.exe
在命令行控制台的当前文件夹,或者可以通过系统环境变量path
找到。Node.js
相关的工具包(如npm
,实际上是Windows脚本文件npm.cmd
)在命令行控制台的当前文件夹或者可以通过系统环境变量path
找到。
注意:npm
是Node.js
自带的模块包管理工具,跟node.exe
位于同一文件夹。Hexo
项目也是提供了命令行工具hexo.cmd
。这个项目被所有的实例共享,Hexo
一般应全局安装。它的hexo.cmd
所在文件夹应被放入系统path
变量中。
安装Node.js
上面的信息对Windows老司机已经足够。本节余下内容请老司机略过。
-
从http://nodejs.cn/download/下载32或64位zip压缩包版本,建议安装长期支持版本。
-
把下载包解压缩到你希望安装的文件夹,比如
D:\DevelopTools\Nodejs\
。 -
任选下面一种方式把
Node.exe
的路径放到系统path
变量中去。修改path
变量后,只有在新打开的命令行窗口中生效。-
使用
setx
命令setx PATH "%PATH%;D:\DevelopTools\Nodejs\;" /M
-
直接修改注册表
用注册表编辑器打开
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment
,在path
变量后追加;D:\DevelopTools\Nodejs\;
。 -
在
我的电脑
上点击右键,选择属性,选择高级系统设置
,选择高级
,选择系统变量
,在path
变量中追加上述路径。
-
-
以下面任意方式设置包的全局安装位置,假设其位置为
d:\node_global
。- 用
npm
命令npm config set prefix ="d:\node_global"
。 - 直接打开
C:\Users\Administrator\.npmrc
文件,增加或修改其中的prefix=d:\node_global
。
- 用
-
参照3的方式把Node.js包的全局安装路径
d:\node_global
放到系统path
变量中去。 -
运行
node -v
和npm -v
,显示正常的版本则说明安装完毕。
补充:国内环境下把包的远程服务器设置为淘宝镜像,以加快下载速度。
- 使用命令行运行
npm config set registry=https://registry.npm.taobao.org/
。 - 或者,直接修改
C:\Users\Administrator\.npmrc
文件,增加一行registry=https://registry.npm.taobao.org/
。
3. 安装或下载Hexo项目
官方推荐采用npm
进行安装。
npm install hexo-cli -g
上面的命令会把hexo.cmd
安装到全局包仓库中,由于该仓库文件夹在Windows系统的path
中。所以你就可以在任意位置执行hexo
命令了。
执行一下命令确认hexo
安装完好。
hexo -v
该命令会显示hexo
的版本及依赖的包。
4. 安装或下载NexT主题插件
通过git
指令下载NexT
最新的主题文件。
git clone https://github.com/iissnan/hexo-theme-next themes/next
或者,直接从发布页https://github.com/iissnan/hexo-theme-next/releases下载源指定版本源代码。
Assets 2
下载之后,解压缩主题主题文件,并把它放到themes
主题文件
+---public
| +---about
| +---archives
| +---categories
| +---css
| +---images
| +---js
| +---lib
| +---page
| +---post
| \---tags
+---scaffolds
+---source
| +---about
| +---categories
| +---images
| +---tags
| +---_drafts
| \---_posts
\---themes
\---next
+---languages
+---layout
+---scripts
+---source
| +---css
| +---fonts
| +---images
| +---js
在站点配置文件_config.yml
里面,找到它
# 原来的值是landscape
theme: next
5. 创建及运行博客
-
创建一个空白文件夹,作为博客根目录,在该根目录下,初始化博客
hexo init
-
把主题文件拷贝到博客文件的
theme
下面 -
执行
Hexo
提供的服务器命令。hexo serve
控制台显示:
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
在浏览器地址栏里面输入http://localhost:4000
,就可以访问博客了。
重要信息
本文章用到的项目版本
hexo:3.8.0
NexT:5.1.2