使用Github搭建Hexo技术博客托管在GitHub Pages上--安装教程

使用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 中我们执行下面这一句(这是一整句的):
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
  • 现在验证下是否可以使用淘宝的 cnpm 命令:cnpm info express
    • 如果能输出一大堆介绍,则说明成功了,以后每次要使用淘宝的源都需要这样来。现在除了默认的 npm,还多了一个 cnpm 可以使用,我们下面有关安装的讲解内容也都是基于此临时命令。
    • 如果输出:bash: cnpm: command not found,则表示没成功,需要你在排查下

安装 Hexo 框架

  • 安装 Hexo(注意,现在是 cnpm 开头了,不是 npm 了):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
# 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:表示文章所属标签
---
title: 这是文章标题
categories:
  - hexo
tags:
  - hexo
  - git
  - github
  - nodejs
date: 2015-05-01 10:46:18
description: 这里可以写描述
---

结束语

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

资料

推荐阅读更多精彩内容