美文网首页
Hexo+NexT(一):在Windows下安装Hexo+Nex

Hexo+NexT(一):在Windows下安装Hexo+Nex

作者: Guide2IT | 来源:发表于2019-07-09 13:56 被阅读0次
    精于心 简于形

    欢迎访问作者主页www.guide2it.com

    阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度。

    Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到静态网页的转换。

    NexT是Hexo项目下的一个主题插件,提供可高度定制的页面外观。

    Hexo博客专题索引页

    1. 我们要做什么

    1. 搭建Node.js环境
    2. 下载Hexo项目
    3. 下载NexT的主题插件
    4. 运行博客

    2. 在Windows系统下安装Node.js

    在Windows下,Node.js的核心是命令行可执行文件Node.exe。无论安装版或者绿色版,只要满足以下两个基本条件,Hexo即可运行。

    1. node.exe在命令行控制台的当前文件夹,或者可以通过系统环境变量path找到。
    2. Node.js相关的工具包(如npm,实际上是Windows脚本文件npm.cmd)在命令行控制台的当前文件夹或者可以通过系统环境变量path找到。

    注意npmNode.js自带的模块包管理工具,跟node.exe位于同一文件夹。Hexo项目也是提供了命令行工具hexo.cmd。这个项目被所有的实例共享,Hexo一般应全局安装。它的hexo.cmd所在文件夹应被放入系统path变量中。

    安装Node.js

    上面的信息对Windows老司机已经足够。本节余下内容请老司机略过。

    1. http://nodejs.cn/download/下载32或64位zip压缩包版本,建议安装长期支持版本。

    2. 把下载包解压缩到你希望安装的文件夹,比如D:\DevelopTools\Nodejs\

    3. 任选下面一种方式把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变量中追加上述路径。

    4. 以下面任意方式设置包的全局安装位置,假设其位置为d:\node_global

      • npm命令npm config set prefix ="d:\node_global"
      • 直接打开C:\Users\Administrator\.npmrc文件,增加或修改其中的prefix=d:\node_global
    5. 参照3的方式把Node.js包的全局安装路径d:\node_global放到系统path变量中去。

    6. 运行node -vnpm -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

    Source code(zip)

    Source code(tar.gz)

    下载之后,解压缩主题主题文件,并把它放到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. 创建及运行博客

    1. 创建一个空白文件夹,作为博客根目录,在该根目录下,初始化博客

      hexo init
      
    2. 把主题文件拷贝到博客文件的theme下面

    3. 执行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

    相关文章

      网友评论

          本文标题:Hexo+NexT(一):在Windows下安装Hexo+Nex

          本文链接:https://www.haomeiwen.com/subject/wazbhctx.html