概念简介

什么是Github Pages？

“GitHub Pages是GitHub提供的一个网页寄存服务，于2008年推出。可以用于存放静态网页，包括博客、项目文档甚至整本书。Jekyll软件可以用于将文档转换成静态网页，该软件提供了将网页上传到GitHub Pages的功能。一般GitHub Pages的网站使用github.io的子域名，但是用户也可以使用第三方域名。”

——维基百科

什么是Hexo？

“hexo是静态的博客框架，可以生成网站，从2012年起开始创建和维护。hexo支持使用markdown语言进行文章编写，hexo将自动把您的文章编写为html的文档以供浏览器访问。hexo是快速的博客框架，可以高速的完成网站的渲染工作，可以为建设站点节省大量的时间。因为hexo是静态网页，因此您可以在gitpage上进行部署，您亦可以使用自己的服务器或其他的托管服务平台。hexo可以更换主题以更改网站的风格，hexo目前已经有相当多的主题可供使用，他们多半为用户制。”

——维基百科

搭建流程

环境准备

安装Node.js：输入node -v和npm -v出现版本号则安装成功。可使用国内镜像加速，如：npm config set registry https://registry.npm.taobao.org。
安装Git：输入git --version验证是否安装成功。
注册Github账号，新建项目[Github用户名].github.io，进入项目Settings，在Github Pages设置下点击choose a theme选择一个主题，稍等片刻再回到Github Pages，点击网页链接[Github用户名].github.io则会出现自己的博客主页。
安装Hexo：
1. 本地新建一个文件夹用于存放自己的博客文件，目录下打开命令行，输入如下命令。
2. npm i hexo-cli -g：安装Hexo。
3. hexo -v：安装完验证是否安装成功。
4. npm install：安装必备的组件。
5. hexo g：生成静态网页。
6. hexo s：本地浏览器打开http://localhost:4000/即可看到博客。
7. npm i hexo-deployer-git：安装扩展。
连接Github：
1. Git设置用户名和邮箱：git config --global user.name "realtommyhu"，git config --global user.email "xxxxxxxx@qq.com"。
2. 生成密钥SSH key：ssh-keygen -t rsa -C "xxxxxxxx@qq.com"。
3. 打开Github，头像下点击Settings，点击SSH and GPG keys，新建一个SSH，拷贝本地~/.ssh/id_rsa.pub文件中的公钥内容到网页上的内容框中。
4. ssh -T git@github.com：出现用户名则验证连接成功。
5. 打开博客根目录下的配置文件_config.yml，修改最后的几行配置：
  1
  2
  3
  4
  deploy:
  type: git
  repository: https://github.com/realtommyhu/realtommyhu.github.io
  branch: master

更换主题

next主题

安装与更新

最简单的安装方式是直接克隆整个仓库：

1 2	$ cd hexo $ git clone https://github.com/theme-next/hexo-theme-next themes/next

NexT 每个月都会发布新版本。你可以通过如下命令更新到最新的 master 分支：

1 2	$ cd themes/next $ git pull

最后，Set it up

Set theme in main Hexo root config _config.yml file:

1	theme: next

增加评论功能

Gitalk评论系统

什么是Gitalk？

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。特性：

使用 GitHub 登录
支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]
支持个人或组织
无干扰模式（设置 distractionFreeMode 为 true 开启）
快捷键提交评论（cmd|ctrl + enter）

配置安装

先在 GitHub 上注册新应用，https://github.com/settings/applications/new。
点击注册，获取Client ID和Client Secret，在后面的配置中需要用到，这是应用访问你 Github 的凭证。

Next 主题 v7.6.0 中已经默认集成了gitalk，只需在\themes\next_config.yml锁定gitalk配置开启使用。

gitalk:
enable: true  #启用gitalk
github_id:   #github帐号
id: location.pathname  #此设置参照下文常见问题说明
repo:   #存放评论的仓库名称
client_id:   #application的id，即上文Client ID
client_secret:  #application的密码，即上文Client Secret
admin_user:  #GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language: zh-CN

重新部署博客，打开页面进入某一博客内容下，评论会出现在页面最下方。

增加图片插入功能

cd到博客根目录下查看_config.yml文件查找 post_asset_folder 字段确定post_asset_folder 设置为true -> post_asset_folder:true 设置 post_asset_folder 参数后，在建立文件时，Hexo 会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到此文件夹内，这样就可以更方便的使用资源。
到博客的根目录下执行 npm install hexo-renderer-marked –save 命令安装插件hexo-renderer-marked，并配置_config.yml：
1
2
3
4
post_asset_folder: true
marked:
prependRoot: true
postAsset: true
然后创建一文章 hexo new “test” 然后查看博客的 ../source/_posts 目录下的文件，会看到存在一个test 文件夹和 test.md 文件。
图片资源放在文章同名文件夹下，在Markdown文章中引用带后缀的图片名称即可：![](image.jpg)。hexo-renderer-marked插件会自动帮我们处理路径前缀。通过这种方式，图片将会同时出现在文章和主页以及归档页中。
hexo g、hexo d 将本地博客推送到远程，即可看到文章中的图片。

切换中文

博客根目录下修改 _config.yml 文件，查找 language 字段，设置其值为：zh-CN 。

hexo使用教程

文章发布

新建文章：hexo new post “article_title”，打开.\source\_posts目录可看到文章文件article_title.md，打开文件即可写文章。
生成静态网页：hexo g。然后可通过hexo s在本地预览效果。
上传到Github：hexo d。
- 遇到的问题：
  - 报错：Spawn failed，以及OpenSSL SSL_read: Connection was reset, errno 10054。解决：hexo config deploy.repository git@github.com:[yourgitname]/[yourgitname].github.io.git，再次执行hexo d。

为文章添加分类和标签

在博客根目录输入：hexo new page tags，打开tags/index.md，修改为：

title: 标签
date: 日期
type: "tags"
comments: false

分类同理：hexo new page categories，打开categories/index.md，改为：

title: 分类
date: 日期
type: "categories"
comments: false

设置首页只显示部分摘要而不是全文

修改配置，设置Next主题的_config.yml：

1 2	# Automatically excerpt description in homepage as preamble text. excerpt_description: true

方法一：写概述

在文章的front-matter中添加description，其中description中的内容就会被显示在首页上，其余一律不显示。

---
title: 让首页显示部分内容
date: 2020-02-23 22:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
---

比较不方便的是还得写一下概述，很多时候会懒得写概述，于是就需要第二种方法了。

方法二：文章截断

在需要截断的地方加入：

1	<!--more-->

首页就会显示这条以上的所有内容，隐藏接下来的所有内容。

这个明显就方便很多，但当然有利有弊，比如开头都是废话首页看着就不是很好看，因此可以先选择方法二，如果感觉文章前面的写的不太好再用方法一。

写作基本操作

你可以执行下列命令来创建一篇新文章或者新的页面。

1	$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

布局（Layout）

Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
post	source/_posts
page	source
draft	source/_drafts

文件名称

Hexo 默认以标题做为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量	描述
:title	标题（小写，空格将会被替换为短杠）
:year	建立的年份，比如， 2015
:month	建立的月份（有前导零），比如， 04
:i_month	建立的月份（无前导零），比如， 4
:day	建立的日期（有前导零），比如， 07
:i_day	建立的日期（无前导零），比如， 7

草稿

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

1	$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 –draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

模版（Scaffold）

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

1	$ hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量	描述
layout	布局
title	标题
date	文件建立日期

Front-matter

Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数	描述	默认值
layout	布局	config.default_layout
title	标题	文章的文件名
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）
categories	分类（不适用于分页）

TommyHu的技术小馆

通过GithubPages和静态站点生成框架Hexo搭建博客