使用Github搭建Hexo技术博客--安装教程

本文将讲解使用Github搭建Hexo技术博客!

使用Github搭建Hexo技术博客

部署前介绍

Hexo 是什么

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

为什么要用 Hexo

hexo_idea

  • 因为其他博客框架太烂了
  • 想自己管理博客,不受其他品台的约束

适合人群

  • 有开发基础的程序员(或者你是前端开发的前端工程师)
  • 想搭建一个技术博客的人(真心别搞太多,没那么多精力去搞)

文章要求

  • 如果是 Git,Node.js 的新人,则这篇文章不要间断操作,要一气呵成,不然可能会遇到各种问题。

本文环境

本文在20171027修改

搭建所需软件

Windows 用户

由于众所周知的原因,从上面的链接下载git for windows最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

文章前提

域名绑定

  • 如果你一开始就打算要绑定域名,则下面教程中所有可以填写域名的地方你都填写上你要绑定的域名,如果你没独立域名,那就使用 Github 默认给你的:XXXXXX.github.io 域名即可。

部署开始

git 安装

  • 双击运行 Git-2.14.1-64-bit.exe,接下来一律下一步,不需要多余的选择,假设你安装的目录位置跟我一样:C:\Program Files\Git
  • 打开 Git Bash(路径:C:\Program Files\Git\git-bash.exe),输入:git --version
  • 如下图,如果出现:git version 2.14.1.windows.1,这表示安装成功
    验证 git 安装

Node.js 安装

  • 双击运行 node-v8.7.0-x64.msi,接下来一律下一步,不需要多余的选择。
  • 安装完之后,打开 Git Bash,输入:npm -v
  • 如下图,如果出现:5.4.2,则表示 Node.js 安装成功
    验证 node.js 安装

Node.js 源设置

  • 在安装 Hexo 之前,先说一下 Node.js 的源,Node.js 官方源默认是:http://registry.npmjs.org,但是由于在国外,说不定你使用的时候就抽风无法下载任何软件。所以我们决定暂时使用淘宝提供的源,淘宝源官网:http://npm.taobao.org/
  • 在 Git Bash 中我们执行下面这一句(这是一整句的):
1
2
3
4
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

为npm设置代理

  • 如果电脑使用了代理服务器的(有的公司会使用代码服务器)需要如下设置:
1
2
npm config set proxy http://server:port
npm config set https-proxy http://server:port

.npmrc中的内容

1
2
3
proxy=http://10.74.46.23:8080/
registry=https://registry.npm.taobao.org/
https-proxy=http://10.74.46.23:8080
  • 如果代理需要认证的话可以这样来设置。
1
2
npm config set proxy http://username:password@server:port
npm config set https-proxy http://username:pawword@server:port
  • 如果代理不支持https的话需要修改npm存放package的网站地址。
1
npm config set registry "http://registry.npmjs.org/"

没有使用代理的忽略这个设置

  • Mac下执行:sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 现在验证下是否可以使用淘宝的 cnpm 命令:cnpm info express
    • 如果能输出一大堆介绍,则说明成功了,以后每次要使用淘宝的源都需要这样来。现在除了默认的 npm,还多了一个 cnpm 可以使用,我们下面有关安装的讲解内容也都是基于此临时命令。
    • 如果输出:bash: cnpm: command not found,则表示没成功,需要你在排查下

安装 Hexo 框架

  • 安装 Hexo(注意,现在是 cnpm 开头了,不是 npm 了):cnpm install -g hexo-cli
    • Mac下执行:sudo cnpm install -g hexo-cli
    • 安装时间不一定很快,有可能需要等 3 ~ 5 分钟。
    • 安装完有 WARN 警告也没关系的。

创建 Hexo 项目

  • 现在假设我要创建一个名为 hexo 的项目,项目目录就放在:E:\blog_space 目录下,所以我们在 E:\blog_space 目录下创建一个 hexo 目录。现在这个项目的全路径是:E:\blog_space\hexo
  • 打开 Git Bash:
  • 进入该目录:cd e:/blog_space/hexo
  • 然后执行:hexo init,这个时间也会比较长,也有可能要等几分钟,有显示 WARN 也不用管
  • 最后执行:cnpm install,有显示 WARN 也不用管
  • 安装完成之后,E:\blog_space\hexo 目录结构是这样的:
    安装 hexo 后的目录结构
  • 现在我们启动 hexo 本地服务,看下默认的博客是怎样的,命令:hexo server
  • 现在用浏览器访问:http://localhost:4000/,效果如下图
    默认模板效果
  • 如果要停止 hexo 服务:在 Git Bash 下按 Ctrl + C 即可

选用其他主题

  • 由于默认主题太大众了,所以现在我们换个主题。
  • 你可以去这里找主题:
  • 现在假设你跟我要用的模板是一样:
    • 还是让 Git Bash 保持在 E:\blog_space\hexo 目录下,然后输入命令:git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee
    • 这样就在 E:\blog_space\hexo\themes 目录下生成了一个 yelle 文件夹,里面有我们刚刚 clone 下来的主题内容。
    • 如果以后你不自己修改这个主题的话,可以考虑经常更新下作者的更新内容:
      • cd e:/blog_space/hexo/themes/yelee
      • git pull origin master
  • 下载好主题文件之后,我们现在要修改 E:\blog_space\hexo 目录下的项目配置文件:_config.yml,把对应的主题目录名改下,编辑如下图。
    修改主题目录
  • 更改主题目录名后,我们还要重新生成主题静态内容:
  • 继续在 Git Bash 中输入命令:
  • 重新生成静态博客的所有内容:hexo generate
  • 重启 hexo 本地服务:hexo server
  • 重新访问:http://localhost:4000/,效果如下图
    新主题效果

创建 Github pages 并 SSH 授权

  • 现在假设你已经有一个 Gtihub 账号,你还需要一个特别的仓库,特别在仓库名就是你的 Github 账号登录名,比如我的用户名是:chenjh0611,那我要创建的仓库名字完整滴填写是:chenjh0611.github.io
  • 创建好仓库之后,要本地生成 SSH 秘钥,方便电脑上的 git 软件好提交内容到 Github 上
  • 在 Git Bash 中,输入:ssh-keygen -t rsa -C "你的邮箱地址",然后回车,回车,再回车,一共 3 次回车,具体含义自己 Google。
  • 比如我的:ssh-keygen -t rsa -C "chenjh0611@163.com"
  • 此时,生成密钥后,在你电脑目录:C:\Users\你的计算机用户名.ssh 下,会生成两个文件:
  • 私钥:id_rsa
  • 公钥:id_rsa.pub
  • 如果生成的不是这样的文件,那删除掉这两个生成的,重新执行上面的命令,让它再一次生成。
  • 现在用记事本打开 id_rsa.pub,复制文件中的所有内容。
  • 访问:https://github.com/settings/ssh,添加新秘钥,效果如下图
    添加密钥
  • Title:自己随便取
  • Key:把刚刚复制的都粘贴进来

把本地的博客内容同步到 Github 上

  • 要把本地的静态博客同步到 Github,我们还需要先安装两个跟部署相关的 hexo 插件:
    • 继续在 Git Bash 中输入:
    • cnpm install hexo -server --save
    • cnpm install hexo-deployer-git --save
  • 编辑全局 hexo 的配置文件:_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 这一块区域主要是设置博客的主要说明,需要注意的是:每个冒号后面都是有一个空格,然后再书写自己的内容的s
title: Chenjh Code #网站标题
subtitle: 这里只有代码相关,要了解更多 >> www.skyheng.com #网站副标题
description: 这里是 www.skyheng.com 一部分
author: Chenjh
email: 1225948009@qq.com
language: zh-CN
timezone: #网站时区。Hexo 默认使用您电脑的时区

# URL 这一块一般可以设置的是 url 这个参数,比如我要设置绑定域名的,这里就需要填写我的域名信息
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://code.skyheng.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source #源文件夹,这个文件夹用来存放内容。
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #nclude code 文件夹
i18n_dir: :lang #国际化(i18n)文件夹
skip_render: #跳过指定文件的渲染,您可使用 glob 表达式来匹配路径

# Writing
new_post_name: :year-:month-:day.:title.md #新建文章默认文件名
default_layout: post # 默认布局
titlecase: false # Transform title into titlecase
external_link: true # 在新标签中打开一个外部链接,默认为true
filename_case: 0
render_drafts: false #是否渲染_drafts目录下的文章,默认为false
post_asset_folder: true #启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址,默认false
future: true #显示未来的文章,默认false
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: false
tab_replace:

# Category & Tag #分类和标签的设置
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # next yelee

search:
path: search.xml
field: all

# Deployment
## 这里是重点,这里是修改发布地址,因为我们前面已经加了 SSH 密钥信息在 Github 设置里面了,所以只要我们电脑里面持有那两个密钥文件就可以无需密码地跟 Github 做同步。
## 需要注意的是这里的 repo 采用的是 ssh 的地址,而不是 https 的。分支我们默认采用 master 分支,以后你翅膀硬了要换其他也无所谓。
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:chenjh0611/chenjh0611.github.io.git,master
coding: git@git.coding.net:chenjh0719/chenjh0719.git,master
  • 编辑全局配置后我们需要重新部署:
  • 继续在 Git Bash 中输入命令:
  • 先清除掉已经生成的旧文件:hexo clean
  • 再生成一次静态文件:hexo generate
  • 在本地预览下:hexo server
  • 本地没问题之后,Ctrl + C 停掉本地预览,使用部署命令部署到 Github 上:hexo deploy,有弹出下面提示框,请输入:yes
    确认提交
  • 提交成功效果如下:
    提交成功
  • 访问服务器地址进行检查:http://chenjh0611.github.io
  • 通过上面几次流程我们也就可以总结:以后,每次发表新文章要部署都按这样的流程来:
    • hexo clean
    • hexo generate
    • hexo deploy
  • 也因为这几个命令太频繁了,所以又有了精简版的命令:
    • hexo clean == hexo clean
    • hexo g == hexo generate
    • hexo s == hexo server
    • hexo d == hexo deploy

绑定域名

整合 Notepad++ 提高效率

  • 为了提交写作效率,我个人建议使用 Notepad++ 作为 Markdown 编辑工具
  • 现在我们用 Notepad++ 打开我们本地目录:E:\blog_space\hexo,打开后效果如下图:
    Notepad++
  • hexo 新文章内容的开头需要这样定义:
    • categories:表示文章所属分类
    • tags:表示文章所属标签
1
2
3
4
5
6
7
8
9
10
11
12
---
title: 这是文章标题
categories:
- hexo
tags:
- hexo
- git
- github
- nodejs
date: 2015-05-01 10:46:18
description: 这里可以写描述
---

结束语

  • 我希望从这一篇你也可以为自己搭建一个属于你自己的博客,在博客中畅写。
  • 最后,祝你搭建博客成功,创造属于你的世界!

资料

个人微信公众号技术交流QQ群
文章目录
  1. 1. 部署前介绍
    1. 1.1. Hexo 是什么
    2. 1.2. 为什么要用 Hexo
    3. 1.3. 适合人群
    4. 1.4. 文章要求
    5. 1.5. 本文环境
    6. 1.6. 搭建所需软件
    7. 1.7. 文章前提
    8. 1.8. 域名绑定
  2. 2. 部署开始
    1. 2.1. git 安装
    2. 2.2. Node.js 安装
    3. 2.3. Node.js 源设置
  3. 3. 为npm设置代理
    1. 3.1. 安装 Hexo 框架
    2. 3.2. 创建 Hexo 项目
    3. 3.3. 选用其他主题
    4. 3.4. 创建 Github pages 并 SSH 授权
    5. 3.5. 把本地的博客内容同步到 Github 上
    6. 3.6. 绑定域名
    7. 3.7. 整合 Notepad++ 提高效率
  4. 4. 结束语
  5. 5. 资料