基于 GitHub Pages 的 Hexo+NexT 博客搭建

发表于 2018-08-20 更新于 2021-08-22

基于 GitHub Pages 的 Hexo + NexT 博客 —— 引导篇

基于 GitHub Pages 的 Hexo + NexT 博客概述

使用这一套博客系统架构您将获得稳定免费、美观、易定制的个人博客。通过 Markdown 语法编辑文章，git命令发布文章，优雅的博客发布体验。

搭建本博客系统的技术条件

基本的终端命令与理解，比如：如何 cd 进入一个需要进入的文件夹。
GitHub项目创建和项目下载。

GitHub Pages

GitHub Pages 简介

GitHub Pages 是GitHub免费为用户提供的，适用于 GitHub 用户发布自己的网页内容（静态网页）。官网🐱
GitHub Pages 的容量限制为1GB，流量限制为一个月100GB。GitHub用户名将作为github.com的二级域名，而每一个 github repository 都是可以部署在GitHub Pages上的，这样低成本的为前端开发人员免费的提供了一台稳定免费的测试服务器和域名。

GitHub Pages 同样是个人博客的优良载体, 以下教程将基于 GitHub Pages 打造个人博客。

GitHub Pages 博客项目建立

将项目创建于 GitHub Pages 的根目录下（”/“）。
保持创建普通GitHub项目的姿势，将项目名称命名为 GitHub用户名.github.io。
URL == “GitHub用户名.github.io/“

每个GitHub项目都可以部署到 GitHub Pages，作为二级路径(“项目名/“)。
Settings -> GitHub Pages -> Source -> master branch
URL == “GitHub用户名.github.io/项目名/“

Hexo

Hexo 简介

Hexo 基于Node.js开发是一个纯静态的博客框架，使用Markdown渲染引擎文章。

Hexo 安装及配置

Hexo 详细安装及配置请参考
Hexo 官方文档
建议：完成官方文档“建站”继续查看后面的内容。
配置文件 : 后面都要加空格。
对_config.yml站点配置文件简要配置。

1 2	# URL url: https://GitHub用户名.github.io/

Hexo 的使用

相信您已经了解source文件夹是您以后存放文章的地方，并且已经看见官方文档中的这句话“Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。”
而这个public文件夹的内容正是需要上传到GitHub Pages的内容，如何去生成呢？请继续往后看。

写完文章发布到服务器之前，先看看效果呗！现在source/_posts文件夹里面正好有一篇hello-world。
在站点文件夹根目录下执行如下命令（插件都在该目录安装）：

1	$ npm install hexo-server --save

安装完成后，输入以下命令以启动服务器，您的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，您无须重启服务器。

1	$ hexo s (即 hexo server)

现在介绍两种发布文章的方式, 建议Windows用户用第一种，Mac用户使用第二种：

方案一：通过 hexo-deployer-git 插件
在站点文件夹根目录下执行如下命令（插件都在该目录安装）：

1	$ npm install hexo-deployer-git --save

文件解析生成 public 文件夹

1	$ hexo g (即 hexo generate)

配置_config.yml站点配置文件

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
   type: git
   repository: 您下载自己项目的URL (项目在 GitHub Pages 根目录：https://github.com/GitHub用户名.github.io.git/)
    branch: master

项目部署

1	$ hexo d (即 hexo deploy)

这里会提示输入您的github账号密码，通过前面提到的 URL 访问到您的博客，项目部署成功。

方案二：通过 git 命令部署
进入站点文件夹根目录，克隆您的项目到本地（目的是获取 .git 文件夹，这是 git 的全部）

1	$ git clone https://github.com/GitHub用户名/GitHub用户名.github.io.git .deploy/GitHub用户名.github.io

解析及部署命令如下（可将以下命令直接 deploy.sh 脚本文件里）:

$ hexo generate                      # 文件解析生成 public 文件夹
$ cp -R public/* .deploy/GitHub用户名.github.io  # 复制 public 文件夹的全部内容到 .deploy 隐藏文件夹下
$ cd .deploy/GitHub用户名.github.io
$ git add .
$ git commit -m “update”
$ git push origin master

将 deploy.sh 脚本文件放在站点文件夹根目录，cd 进入根目录，执行命令如下：

1	$ sh deploy.sh

这里会提示输入您的github账号密码，通过前面提到的 URL 访问到您的博客，项目部署成功。

这一小节记住两个命令： hexo s 和 hexo d 或 sh deploy.sh
事实上 hexo s -s 更常使用（详情查看官方文档 -> 服务器）

使用个人域名

如果想要使用自己的域名，在域名解析的时候使用CNAME记录类型。并实现个人博客向个人域名的映射，在source文件夹下创建CNAME文件（无后缀名），在文件中直接写入您的域名（http:// 后面的内容）

NexT 简介

NexT 是一款完全基于 Hexo 的主题，使用者众多，成熟度高，我们可以基于它创造出属于我们不一样的个人博客。

下面更多的是对该主题一些基本配置的讲述，请勿照搬，按自己的喜好描绘属于自己的博客吧。

NexT 安装及配置

建议下载最新版本
v6.0.x版本 GitHub 地址

NexT 详细安装及配置请参考
NexT 官方文档
 NexT 使用文档 GitHub Wiki

NexT 的配置围绕配置文件，对内置样式与第三方插件进行配置。（NexT 配置文件在 NexT 主题根目录，文件名和站点配置文件名相同）。

外观设置

目前官方有四款外观供选择，在 NexT 的配置文件下搜索 Schemes 删除注释符号 # 即可使用。

搜索 footer 将 powered theme 的 enable 调整为 false。

添加标签 tags 页

执行以下命令将在 source 文件夹下将生成 tags 文件夹，打开修改里面的 index 文件添加 type : “tags”。

1	$ hexo new page tags

添加分类 categories 页

执行以下命令将在 source 文件夹下将生成 categories 文件夹，打开修改里面的 index 文件添加 type : “categories”。

1	$ hexo new page categories

分类和标签的应用

事实上，分类和标签都是 hexo 实现的，可查看官方文档 Front-matter 部分。

Front-matter 是通过 hexo new 生成的 md 文件 - - - 以上的区域。
categories 是有顺序性和层次性的而 tags 没有，例如:

categories:
- 人文
- 散文
tags:
- 毕淑敏
- 早年

搜索 menu 你可以选择打开一些菜单按钮 || 后面对应的是 Font Awesome 图标名。
Font Awesome
图标库 – Font Awesome 中文网

搜索 site_state，文章、标签和分类默认在侧边栏中显示链接。

搜索 social, 打开或自行添加。

avatar 添加侧边栏头像

建议使用对象存储OSS 存储图片或其他文件，易于管理。

creative_commons 知识共享协议

署名（BY）
署名（BY）-禁止演绎（ND）
署名（BY）-非商业性使用（NC）
署名（BY）-非商业性使用（NC）-禁止演绎（ND）
署名（BY）-非商业性使用（NC）-相同方式共享（SA）
署名（BY）-相同方式共享（SA）

onmobile

对于 Muse 和 Mist 两种外观生效，在手机端打开侧边栏。

设置多说 DISQUS 评论

DISQUS 和 GitHub Pages 有一个相似之处,用户的站点 URL 会生成一个 Shortname, 二级域名与之对应, 所以注册完后点击头像左边的 Admin, 点击 Settings 选择注册的网站, Shortname 在 Website Name 的上面。其实不用查看也可猜出 Shortname, 将域名的 . 替换成 - 即可，例如 https://blog.xyang.xin 对应的 Shortname 为 blog-xyang-xin。

关闭 tags 和 pages 页面的评论窗口，分别在它们的 index 文件添加 comments: false。

基于 GitHub Pages 的 Hexo + NexT 博客 —— 样式优化篇

为文章边框添加立体阴影效果

定位：themes/next/source/css/_common/components/post/post.styl文件
修改：在use-motion .post 下，添加box-shadow的代码 box-shadow 生成网站

修改菜单栏的文字颜色

定位：themes/next/source/css/_schemes/Mist/menu.styl文件
修改：在.menu-item a下添加color: 颜色

修改文章底部的那个带#号的标签

定位：themes/next/layout/_macro/post.swig
修改：搜索 rel=”tag”>#，将 # 换成

文章内链接

定位：themes/next/source/css/_custom/custom.styl 文件
添加：

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

修改网站背景样式，自动切换背景图

定位：themes/next/source/css/_custom/custom.styl 文件
添加：

// 背景
.main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
	  opacity: 0.9;
    min-height: 500px;
}
body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:cover;
}

注意：.mian-inner 将覆盖前文提到的文章的阴影将 box-shadow 代码剪切到 .main-inner 里面即可。

更改头部 site-title 的字体颜色

定位：theme/next/source/css/_common/components/header/site-meta.styl 文件，找到.brand{}。
添加：color: 颜色

头部背景颜色与透明度

1
2
3

.header {
          background:rgba(13,26,31,0.8) none repeat scroll !important;
        }

定位：themes/next/source/css/_schemes/Mist/index.styl 文件中的 footer。
修改：将 .footer-inner 的 text-align: left 修改为 center。

底部文字颜色

定位：theme/next/source/css/_custom/custom.styl 文件
添加：

1	.footer-inner {color: 颜色代码;}

底部背景颜色与透明度

1
2
3

.footer {
          background:rgba(13,26,31,0.8) none repeat scroll !important;
        }