钧言极客钧言极客

钧言极客

零基础玩转 Hexo :本地化部署

有一些东西,用过不久就遗忘了,等在使用的时候,再各种去翻资料,再加上国内的搜索环境,所以要留下有点脚印。

认识Hexo

Hexo使用node.js编写,生成静态网页的速度也很迅速。

支持Markdown渲染,部署方便,可以一条指令部署到Github pages等平台。

插件丰富+中文文档,也降低入门的门槛。

必备技能

  • node.js 基础知识
  • Git 基础知识
  • Markdown 基本知识
  • Html、css、JavaScript等知识
  • npm install 和 uninstall
  • ......

看到这里,你不要被吓到关闭页面。除了Markdown,其他都可以不用熟练掌握,有空也可以学习一下(Markdown是必备技能,文章的排版插图都需要,但是还是要好好复习一下)。

安装Hexo

在安装之前,你需要安装以下两个软件:

如果已经安装好以上工具,可以直接跳过,往下看。

安装 Git

  • Windows:下载并安装 git
  • Mac:使用 Homebrew, MacPorts 或者下载 安装程序
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core
  • Linux (Arch 系列): sudo pacman -S git

Mac 用户如果在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows 用户对于中国大陆地区用户,可以前往 淘宝 Git for Windows 镜像 下载 git 安装包。

安装 Node.js

Node.js 为大多数平台提供了官方的 安装程序。对于中国大陆地区用户,可以前往 淘宝 Node.js 镜像 下载。

其它的安装方法:

  • Windows:通过 nvs(推荐)或者 nvm 安装。
  • Mac:使用 HomebrewMacPorts 安装。
  • Linux(DEB/RPM-based):从 NodeSource 安装。
  • 其它:使用相应的软件包管理器进行安装,可以参考由 Node.js 提供的 指导

切换npm为淘宝npm镜像

国内的网络环境不是很好,访问外网的速度不是理想的时候,可以进行切换,提高下载速度。

Git bash命令行进行切换,如果遇到权限问题,请使用管理员身份运行。

# 全局替换命令
npm config set registry http://registry.npm.taobao.org/

# 查看版本
npm get registry

# 切换官方命令
npm config set registry http://www.npmjs.org

安装 Hexo 程序

  1. Git bash Here 命令行

输入官方安装命令

npm install hexo-cli -g

看看安装版本

hexo v
  1. 创建 hexo 目录

这个目录是存放主题、运行文件、写的博文、生成的静态网站文件等等都在这里完成。

在指定的文件夹,选择 Git Bash Here 输入指令

# 建立你的网站根目录,名字自己修改一下
mkdir <blog_name>

然后往这个文件夹里面,初始化 hexo。

hexo init <blog_name>
  1. 安装主题

默认的主题应该没有什么人使用吧?换一个赏心悦目一下!

这里使用安知鱼的hexo主题,就是本站的主题一样,其他主题切换的方法也是差不多的。

Git Bash 里面输入获取主题的GitHub地址,并安装到 themes目录

git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

安装主题后,要进行主题的运用,修改安装目录下 _config.yml配置文件,修改成刚刚下载主题的名称。

# 修改为主题的名称
theme: anzhiyu

安装 pug 和 stylus 渲染插件

这里是安知鱼主题的需要的应用拓展的,安装一下。

npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 配置网站信息

网站相关信息

在安装文件夹 _config.yml 这个文件里配置!更多配置可以看一下官方文档。

title:
subtitle:
description:
keywords:
author:
language:
timezone:
参数描述
title网站标题
subtitle网站副标题
description网站描述
keywords网站关键词
author作者名字
language网站使用的语言
timezone网站时区:详见时区列表

更多的文档资料请查看Hexo 官方文档

Hexo 相关命令

hexo init [name]

这个是hexo的初始化命令,[name]代表你要初始化的目录路径,hexo init是初始化当前文件夹

hexo new [layout] <title>

这个命令是新建文章或页面用的命令。其中 [layout] 表示他的模板(即页面或者文章), <title> 表示标题。

布局路径详解
postsource/_posts文章页面
pagesource页面页面

hexo naw post hello,表示在 _posts创建了一篇为 hello的文章

hexo server

当你你想浏览本地生成网站的时候,使用这个命令。

命令可以简写为 hexo s

默认地址为 http://localhost:4000 如果想修改端口号,可以在 Git Bash 输入 hexo s -p 端口

hexo generate

这个命令是生成网站静态文件的时候用的,生成后网页将会放在根目录下面的 public 文件夹里。

命令也可以简写为 hexo g

hexo clean

这个命令用来清空 public 文件夹。

命令可以简写为 hexo cl

hexo deploy

这个命令用来部署网站,使用此命令将会把生成好的页面(即 public 文件夹里的内容)部署到指定的地方上。

命令可以简写为 hexo d

hexo version

这个命令用来输出你所使用的 Hexo 目前的版本号。

一键本地预览

清理本地public文件夹,重新生成静态文件到public,运行本地代理服务器

hexo cl
hexo g
hexo s

# 也可以这样
hexo cl && hexo g && hexo s
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《零基础玩转 Hexo :本地化部署》
文章链接:https://jinjun.top/455.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 2

  1. 写的很详细具体,学习到了,多谢博主的分享!!!

    优惠券推广平台 2月3日    回复
  2. “有一些东西,用过不久就遗忘了,等在使用的时候,再各种去翻资料,再加上国内的搜索环境,所以要留下有点脚印。”这句话说的太对了

    Chase 1月15日    回复