写在前面的话:本系列文章主要参考 Hexo官方说明文档,同时结合自己在使用过程中的一些心得体会,撷取下来,和大家分享分享。好,下面闲话不多说,马上开始我们的 Hexo 之旅吧

温馨提醒:博主使用的操作系统是 Win10,其他操作系统可能会略有不同

一、Hexo 简介

Hexo 是什么呢?也许引用官方文档中的说明是再好不过了:

Hexo 是一个快速、简洁且高效的 博客框架。它使用 Markdown(或其他渲染引擎)解析文章,在数秒内,即可使用靓丽的主题生成静态网页

二、Hexo 安装

1、安装 Git

Git 是一个开源的分布式版本控制系统

下载地址:https://git-scm.com/download,按照默认傻瓜式安装就好了

补充一句,如果你已经安装了 Git,你可以通过 Git 本身获得最新的开发版本:

$ git clone https://github.com/git/git

完成之后到桌面空白处单击鼠标右键,如果有出现 Git Bash Here 选项,则证明已经安装成功

2、安装 Node.js

Node.js 是一个基于 Google V8 引擎的 JavaScript 环境,它支持在后端运行 JavaScript

而 NPM 是默认与 Node.js 一起安装的包管理工具

下载地址:https://nodejs.org/en,同样是按照默认傻瓜式安装就好了

完成之后到桌面空白处点击鼠标右键,选择 Git Bash Here 进入 bash 窗口

输入 node -v 命令可查看 node 版本,输入 npm -v 命令可查看 npm 版本,用于验证安装是否成功

$ node -v
v8.11.3 $ npm -v
5.6.0

3、下载 Hexo

在之前说过,NPM 是一个包管理工具,因此我们可以通过 NPM 工具下载 Hexo 框架

npm install moduleName 命令用于下载模块,其中 -g 参数表示在全局进行安装

$ npm install -g hexo

等待完成之后,输入命令 hexo -v 查看 Hexo 版本,验证安装是否成功

$ hexo -v
hexo: 3.7.1
hexo-cli: 1.1.0
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

三、Hexo 本地建站

1、本地建站

选择一个合适的位置创建一个文件夹,该文件夹将作为 Hexo 的根目录,用来储存本地文件

进入该文件夹打开 git bash 窗口,输入命令 hexo initnpm install

hexo init 命令可以将该文件夹初始化为 Hexo 根目录

npm install 命令可以自动安装依赖列表中列出的所有模块

$ hexo init
INFO Cloning hexo-starter to file
......
INFO Install dependencies
......
added 397 packages in 34.63s
INFO Start blogging with Hexo! $ npm install
......
audited 4704 packages in 5.315s
found 0 vulnerabilities

2、基本配置

打开 根目录 下的 _config.yml 文件,它是一个配置文件,可以直接用记事本打开

下面介绍几个比较重要配置,完整的网站配置可以参考我的另一篇文章 —— Hexo系列(二) 配置文件详解

注意在设置时,属性与值之间需要留有一个空格,例如:language: zh-CN

#Site 网站相关配置
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词
author 网站作者名字
language 网站使用的语言,这里填zh-CN
timezone 网站使用的时区,这里默认使用电脑的时区

3、测试

至此,利用 Hexo 搭建的个人博客网站已经可以在本地上正常运行了

我们一起来看看效果吧,打开 git bash,输入命令 hexo s 启动本地站点

$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

如果出现了这样的提示信息,即表示本地建站成功

在浏览器地址栏中输入 http://localhost:4000/, 就可以看到站点在本地运行的结果了

四、Hexo 远端部署

我们知道,GitHub 是一个基于 git 的代码托管平台,是世界上最大的开源社区

GitHub 提供了一项名为 GitHub Pages 的服务,它允许用户自定义项目首页替代默认的源码列表

因此,GitHub Pages 可以被认为是由用户编写的、托管在 GitHub 上的静态网页

而我们的目的,正是要把用 Hexo 在本地搭建的网站部署到 Github 上,使得站点可以被公共访问

1、注册 Github 账号

登陆 GitHub官网 ,按要求填写好自己的个人信息(包括用户名,邮箱,密码等),然后进行邮箱验证后就注册好 GitHub 账号了,十分方便快捷

完成之后还需要在本地配置一下自己的个人信息,打开 git bash 窗口,输入以下的命令即可

(注意要将 your_name 和 your_email 替换成自己的信息)

$ git config --global user.name your_name
$ git config --global user.email your_email

2、创建 GitHub 仓库

打开 GitHub 官网的个人首页,点击 New repository 新建仓库,并按以下说明填写仓库信息:

Repository name 的格式为 username.github.io,其中,username 是自己的 GitHub 名称

另外,建议勾选 Initialize this repository with a README 选项,生成 README.md 文件

最后点击 Create repository,创建仓库

此时打开 Settings 就可以看到自己的个人网站已经生成,网址为 https://username.github.io

3、安装插件

进入站点根文件夹,打开 git bash 输入 npm install hexo-deployer-git --save 命令安装插件

$ npm install hexo-deployer-git --save

4、修改配置

打开根文件夹下的 _config.yml 配置文件,进行如下配置

(注意要将 username 替换成自己的名字,并且在属性与值之间留一个空格)

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: master

5、配置 SSH

进入站点根文件夹,打开 git bash,输入 ssh-keygen -t rsa -C "your_email" 命令并一路回车获得密钥

(注意将 your_email 替换成自己的邮箱地址)

完成后,根据提示信息中的文件地址 /c/Users/user/.ssh/id_rsa.pub 找到 id_rsa.pub 文件,复制文件里面的内容

$ ssh-keygen -t rsa  -C "your_email"

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/user/.ssh/id_rsa): <Enter>
Enter passphrase (empty for no passphrase): <Enter>
Enter same passphrase again: <Enter>
Your identification has been saved in /c/Users/user/.ssh/id_rsa.
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:0Is/n+PgAf+mUEhFgTx+nVyJRZ4Pk/nqj3YOnVOAQmE email_address
The key's randomart image is:
+---[RSA 2048]----+
| . o+.E=o. |
| +o o..o= |
| .o..o.oO . |
| ..+..+. = . |
| +.S o .|
| = o o |
| . * o + |
| o *oo.o.. |
| o+=oo+o |
+----[SHA256]-----+

登录 Github,打开 Settings

选择 SSH and GPG keys,选择 New SSh Key

将复制的内容添加到 Key 中, Title 可以自己设定,最后点击 Add SSH Key 即可

最后,回到站点根文件夹,打开 git bash,输入 ssh -T git@github.com 命令验证是否添加成功

$ ssh -T git@github.com

The authenticity of host 'github.com (13.250.177.223)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)? <yes> <Enter>
Warning: Permanently added 'github.com,13.250.177.223' (RSA) to the list of known hosts.
Hi Forwhfang! You've successfully authenticated, but GitHub does not provide shell access.

6、发布网页

git bash 中输入命令 hexo g 生成静态文件,输入命令 hexo d 部署到 Github

此时,打开 https://username.github.io 就可以看见已经部署好的网站了,大功告成!

【Hexo系列相关文章】

Hexo系列(一) 搭建博客网站的更多相关文章

  1. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  2. Django搭建博客网站(四)

    Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...

  3. Django搭建博客网站(三)

    Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...

  4. Django搭建博客网站(二)

    Django搭建自己的博客网站(二) 这里主要讲构建系统数据库Model. Django搭建博客网站(一) model 目前就只提供一个文章model和一个文章分类标签model,在post/mode ...

  5. 部署项目到服务器 & 搭建博客网站

    搭建博客网站 作为名程序员,或者是网络编程爱好者,拥有一个自己的博客网站再好不过,本篇文章手把手教你部署自己的网站

  6. GitHub+Hexo+gulp搭建博客网站

    一.前期准备 1.注册GitHub账号. 不做说明 2.创建仓库 创建一个新的仓库来放置我们的文件. 3.下载安装Node.js https://nodejs.org/en/   两个版本,选择右边那 ...

  7. hexo零基础搭建博客系列(一)

    关于其他搭建 [hexo4快速搭建博客(二)更换主题](https://blog.csdn.net/weixin_41800884/article/details/103750634)[hexo4快速 ...

  8. 基于Hexo和Github搭建博客

    搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...

  9. Django搭建博客网站(一)

    Django搭建自己的博客网站(一) 简介 这个系列主要是通过使用Django这个python web框架实现一个简单的个人博客网站.对Django有疑问可以上Django官网查文档. 功能 后台管理 ...

随机推荐

  1. 关于Windows下程序运行的说明

    预计有非常多人首次都是通过Windows(微软的操作系统)来使用计算机的.Windows的设计导致非常多人觉得全部程序仅仅要双击一下就能够被正确运行了,所以一大堆初学程序设计的童鞋就会遇到些疑问: 为 ...

  2. wordpress相关

    事故:wordpress不论什么页面所有是404 not found,找不到不论什么页面. 解决:在nginx.conf中80port以下的凝视消除掉. location ~ \.php$ {     ...

  3. MySQL命令行登陆

    环境介绍 OS:CentOS6.X & Win2003 & Win2008 MySQL版本号:5.5.x 除了经常使用的MySQL管理工具,还有MySQLclient命令行工具经常被用 ...

  4. 【你你你你在开玩笑吧】什么叫凭借纯兴趣搞ACM?涨姿势了

        好长时间不扯淡了,今天扯个玩玩,吐个槽.     在上海回济南的列车上,回顾起这两天在携程codingtrip颁奖仪式上大牛们的种种心得,姿势涨了不少,着实涨了不少啊.我这样的渣渣毕竟图样图森 ...

  5. Java集合类汇总记录--guava篇

    BiMap HashBiMap<K,V> 实现了两份哈希表数据结构(本类独立实现).分别负责两个方向的映射. EnumBiMap<K,V> 两个EnumMap对象分别负责两个方 ...

  6. 抽象类(Abstract)和接口的不同点、共同点(Interface)。

    同样点: (1) 都能够被继承 (2) 都不能被实例化 (3) 都能够包括方法声明 (4) 派生类必须实现未实现的方法 区 别: (1) 抽象基类能够定义字段.属性.方法实现.接口仅仅能定义属性.索引 ...

  7. oc65--协议应用1,接口.做数据类型限定

    // WifeCondition.h #import <Foundation/Foundation.h> @protocol WifeCondition <NSObject> ...

  8. P1052 过河(状态压缩)

    P1052 过河(状态压缩) 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把 ...

  9. 检测含有挖矿脚本的WiFi热点——果然是天下没有免费的午餐

    见:http://www.freebuf.com/articles/web/161010.html 本质上是在开放wifi热点,自己搭建挖掘的网页,让接入的人访问该网页. 802.11无线协议本身特点 ...

  10. PHPExcel 使用心得

    最近有个项目需要将数据导出成excel,以前都没接触过.便google一下知道了PHPExcel 这个据说很强大的类库. 写这个博文主要目的等同于做笔记 1首先看了下官方的文档.http://phpe ...