使用GitCafe搭建Hexo博客教程

Hexo介绍

Hexo是使用Node.js实现的快速、间接且高效的博客框架。

Hexo的特点

  • 超快速度:Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  • 支持MarkDown:Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一键部署:只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
  • 丰富插件:Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

Hexo的官网: https://hexo.io/zh-cn/

安装前提

安装Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

  • 访问NodeJS的官方网站: https://nodejs.org/en/
  • 选择针对你的操作系统版本的安装文件
  • 或者你可以直接下载我提供的文件
  • 安装NodeJS环境。
    • 双击或鼠标右键选择”安装”选项,开始安装Node.js。
    • 点击”next”按钮,继续安装。
    • 勾选”I accept the terms in the Linense Agreement”选项,点击”next”按钮,继续安装。
    • 点击”change”按钮,可以更改安装目录。 建议安装目录使用默认目录或者自定义安装目录中不能包含中文或空格(引起路径乱码问题)。
    • 选择安装选项,默认全部安装。 如果是第一次安装,建议全部安装,以免有些组件不能使用。
    • 点击”Install”按钮,开始安装Node.js。
    • 等待Node.js自动安装即可。
    • 如果看到上述图片,表示Node.js已经安装完成。
  • 运行命令行,输入”node”命令。如果进入到”>…”提示方式,说明NodeJS安装成功。
  • 运行命令行,输入”npm”命令。如果出现以下提示,说明”npm”命令可以正常使用。

安装Git

Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。

  • 访问Git的官方网站: http://git-scm.com
  • 选择针对你的操作系统版本的安装文件

  • 或者你可以直接下载我提供的文件

  • 安装Git环境。
    • 双击Git安装文件,开始安装Git环境。
    • 点击”next”按钮,继续安装。
    • 点击”next”按钮,继续安装。
    • 点击”Browse”按钮,可以自定义Git的安装目录。 建议安装目录使用默认目录或者自定义安装目录中不能包含中文或空格(引起路径乱码问题)。
    • 勾选”On the Desktop”选项,点击”next”按钮,进行安装。
    • 点击”next”按钮,进行安装。
    • 默认选项,点击”next”按钮,进行安装。
    • 默认选项,点击”next”按钮,进行安装。
    • 默认选项,点击”next”按钮,进行安装。
    • 默认选项,点击”next”按钮,进行安装。
    • 等待Git自动安装即可。
    • 如果看到上述图片,表示Git已经安装完成。
  • 在桌面双击Git Bash文件,进入到Git运行环境中。

安装Hexo

  • 打开命令行,在命令行中输入以下命令:
npm install -g hexo-cli

  • 命令会自动运行,直到Hexo安装完成。
  • 安装Hexo的Git插件(如果不安装这个插件,会导致Hexo博客内容无法发布)。
npm install hexo-deployer-git --save

  • 命令同样会自动运行,直到Git插件安装完成。

本地搭建Hexo博客

  • 打开命令行,输入以下命令,用于创建Hexo博客目录。
// <folder>指的是用于创建Hexo博客的目录,例如C:/hexo
hexo init <folder>

  • 在命令行中,进入到刚创建的目录中。
// <folder>指的是用于创建Hexo博客的目录,例如C:/hexo
cd <folder>

  • 在命令行中,执行以下命令,开始初始化Hexo博客程序。
npm install

  • 如果看到以下图片,说明hexo博客程序已经初始化完成。

  • 初始化完毕后,可以在命令行中输入以下命令,启动本地Hexo博客程序。

hexo server

发布博客到GitCafe

注册GitCafe用户

  • 访问GitCafe的官方网站: https://gitcafe.com
  • 点击右上角的”登录”,会弹出登录注册页面,进行注册即可。

创建Git工程

  • 注册后登录到GitCafe网站,点击右上角的头像中的”操控中心”。
  • 点击左边菜单中的”新建”
    • 项目名称,为你的项目起的名字(建议使用hexo或blog)
    • 项目状态,设置为私有项目(如果你不想写的内容源码被别人看到的话)
  • 点击”创建”,创建一个新的git项目。
  • 在之前本地已经创建好的hexo博客目录中,鼠标右键选择”Git Bash Here”选项。
  • 按照提示信息,配置GitCafe的全局变量。
  • 按照提示信息,配置GitCafe的pages服务。
  • 进入到新创建的git项目中,点击”项目设置”选项。
  • 在项目设置页面点击”pages”服务(这个就是可以开放域名给别人访问的服务,免费滴),点击”创建pages”选项。
  • 再按照提示信息,在本地配置相关信息。
    关于pages服务的具体使用,可以参考 https://help.gitcafe.com/manuals/help/pages-services

配置Hexo程序

  • 进入Hexo的安装目录,打开_config.yml配置文件。
# Site
title: 网站名称
subtitle: 网站简介
description:
author: 作者
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 网站域名
root: /
permalink: :category/:title.html
permalink_defaults:

...

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repo: GitCafe新建工程的地址(例如https://gitcafe.com/longestory/hexo.git)
branch: gitcafe-pages
  • 在本地Hexo博客程序目录中,鼠标右键选择”Git Bash Here”选项。
npm install hexo-deployer-git --save

发布Hexo到GitCafe

  • 在Hexo的安装目录中,鼠标右键选择”Git Bash Here”选项。
  • 在Git命令行中,输入以下命令。
// 生成hexo本地目录结构
hexo generate

// 将hexo本地目录上传至GitCafe
hexo deploy
  • 当上传完毕后,我们就可以通过浏览器访问之前设置pages服务的域名来使用我们的博客了。

具体使用Hexo的更多内容,可以访问Hexo的官网查看。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章