Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置

最新推荐文章于 2024-09-01 15:18:12 发布

zdaiot

最新推荐文章于 2024-09-01 15:18:12 发布

阅读量5.5k

点赞数 2

分类专栏：搭建博客文章标签： hexo next github

本文链接：https://blog.csdn.net/zdaiot/article/details/82833901

版权

本文详述在Windows系统下使用GitHub Pages搭建个人博客的全过程，包括注册GitHub、安装Hexo、配置Next主题等步骤。教程详细解释了从创建GitHub仓库、安装必备软件、配置SSH，到安装、部署Hexo，再到自定义Next主题的各项设置，如菜单、语言、头像、404页面、Favicon、返回顶部按钮、MathJax公式、代码高亮等。此外，还介绍了如何处理可能出现的错误，以及如何进行博客的SEO优化和第三方服务的集成，如百度统计和畅言评论。

摘要由CSDN通过智能技术生成

根据下面的教程搭建的博客见这里

前言

马上要进入研究生了，不能再过浑浑噩噩的日子了，搭建一个小网站，用于记录自己所学的东西。其实，之前在腾讯云1元乞丐版上也搭建过博客，但是呢，只用来扯淡了。这次使用 GitHubPages 和 Hexo 建立自己的博客，希望能够促进自己成长。

下面先介绍为何选择 GitHubPages 和 Hexo 来搭建博客，然后介绍搭建博客的详细过程。

Why GitHub Pages and Hexo

因为 GitHub 的存在，我们得以简单快速地搭建个人博客。

GitHub
GitHub，是一个代码托管网站和社交编程网站。这里聚集了世界上各路技术牛叉的大牛，和最优秀的代码库。把你的博客托管在这里，还有什么不放心的呢O(∩_∩)O。

GitHub Pages
GitHub Pages，是用来托管 GitHub 上静态网页的免费站点，那 GitHub Pages具体有哪些功能呢：

有足够的免费空间（1G），资料自己管理，保存可靠；
享受 GitHub 的便利，上面有很多大牛，眼界会开阔很多；
可以使用很多现成的博客框架，搭建过程简单快速。

HEXO

Hexo 是一个简单、快速、强大的静态博客框架,出自台湾大学生 tommy351 之手。我也看过使用 Jekyll、Octopress 搭建个人博客的过程，确实要繁琐许多。相比之下 Hexo 更轻便更快捷，下面是其官网强调的四大特点：

极速生成静态页面
一键部署博客
丰富的插件支持
支持 Markdown

相信大家对 GitHub Pages 和 Hexo 有了一定的了解，下面进入正题。

准备工作

注册 GitHub

访问 GitHub，注册十分简单，一定要记住注册时使用的邮箱，因为 GitHub 上很多通知都是通过邮箱的。如下图所示，框里有各种提示，这里就不多说了：

申请成功后，在 GitHub 官网上登录，并验证邮箱即可。

在 GitHub 上建立仓库

与 GitHub 建立好连接之后，就可以方便的使用它提供的 Pages 服务，GitHub Pages 分两种，一种是用你的 GitHub 用户名建立的 http://username.github.io 这样的用户&组织站点，另一种是依附项目的 Pages。

想建立个人博客是用的第一种，形如 http://username.github.io 这样的可访问的站点，每个用户名下面只能建立一个。

首先，点击右上角的+号，点击 New repository，新建一个仓库

然后，在Repository name，填写自己的用户名.github.io，例如我的用户名为zdaiot，则填写zdaiot.github.io

关于 Github 的使用，Crossin先生也写了一篇通俗易懂的教程，大家可以去看看

极简 Github 上手教程

安装软件

Node.js

Node.js 下载

下载完成后根据提示一步一步安装就好，这个没有什么需要特别说明的。

安装git

git 下载

下载并安装下面两个软件，一直点击下一步即可。

配置 SSH

默认的cmd是没有ssh的，所以我们需要安装ssh：https://www.mls-software.com/opensshd.html 下载openssh，安装即可。

我们如何让本地 git 项目与远程的 GitHub 建立联系呢？方法是用 SSH。打开命令行，输入以下命令：

ssh -T git@github.com

如图：

如果是下面之类的反馈（或者显示 Hi xxx）：

The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

不用紧张，输入 yes 之后,看到下图的结果，就配置成功了。

但是，输入yes后，若提示如下图：

极大多数情况是由于github账号没有设置ssh公钥信息所致。前往 GitHub 网站的"account settings"
依次点击"Setting -> SSH Keys"->“New SSH key”

Title处填写“id_rsa.pub”或其他任意信息。 key处原样拷贝下面命令的打印 ~/.ssh/id_rsa.pub 文件的内容：
如果没有该文件

ssh-keygen -t rsa

一路回车…

最后，输入

ssh -T git@github.com

确认OK即可。

安装Hexo

Hexo 安装

更改npm为国内镜像源：

npm config set registry https://registry.npm.taobao.org 
npm info underscore
（如果上面配置正确这个命令会有字符串response）

打开命令行，依次输入以下命令：

cd /
npm install hexo-cli -g

如图：

提示：cd / 作用是返回根目录，Git Shell 默认装在 C 盘，启动时默认路径为 C:\Users\xxx(用户名)\Documents\GitHub，输入 cd / 命令后就返回到了 C 盘根目录下，需不需要使用 cd / 看个人习惯（下同）

部署Hexo

Hexo 的部署可采用如下方法，输入命令：

hexo init [文件名]。

打开控制台，依次输入以下命令：

cd /
hexo init Hexo

回车后出现该提示则表示正确：

若报错，如下图：

则是因为环境变量设置的原因，如下所示，我们之前有个步骤是 cd /，所以路径如下：

添加系统环境变量如下：

添加成功后，即可运行 hexo 指令。

部署过程中，报错如下：

删除掉：C:\Users\<your username>\.config\configstore\insight-bower.yml，在我的这个文件夹下，只有一个文件update-notifier-npm.json，删除掉，在执行上述指令。

部署成功之后，Hexo 会自动在目标文件夹建立博客网站所需要的所有文件。此时可以通过输入以下命令在本地进行预览（在刚才创建的文件夹里）：

C:\>cd /d C:\Hexo
hexo generate
hexo server

系统可能会出现提示，请点击允许。如下图所示则表示正确：

此时打开浏览器，在浏览器地址栏输入 http://localhost:4000/ （默认端口为4000）, 便可以看到最原始的博客了。以后发表博文想先预览，也可以通过 hexo server 在本地先跑起来，看看效果。
效果如下图所示：

恭喜，到目前为止个人博客的雏形已经有了。

在 Git Shell 中按 Ctrl + C 并输入 y 可以停止该服务

将本地文件部署到 GitHub

** 修改 Hexo 中的 _config.yml 文件**
在 Hexo 文件夹下找到 _config.yml 文件,如下图所示：

找到其中的 deploy 标签，改成下图所示形式，并保存。注意：冒号后面要加上一个空格，否则会报错。

deploy:
  type: github
  repository: https://github.com/zdaiot/zdaiot.github.io.git
  branch: master

将其 deploy 到仓库中
打开 Git Shell 进入创建的文件夹，依次输入以下命令：

hexo clean
hexo generate
hexo deploy

如果出现下图错误，不要着急：

将deploy 的 type 改成 git，即改为：

deploy:
  type: git
  repository: https://github.com/zdaiot/zdaiot.github.io.git

然后再在 Git Shell 中运行以下命令:

npm install hexo-deployer-git --save

再重新来一遍：

hexo clean
hexo generate
hexo deploy

出现以下提示则表示正确：

但是，若报错提示：fatal: Not a git repository (or any of the parent directories): .git 提示说没有.git这样一个目录，则是因为上面没有安装git，就进行安装hexo，安装git软件，重新进行上面步骤

但是，若出现下面bug：

则，将 _config.yml 文件中配置改为：

deploy:
  type: git
  repository: git@github.com:zdaiot/zdaiot.github.io.git
  branch: master

恭喜，到这一步，个人博客就已经部署到 GitHub 上了，你可以到你的GitHub仓库查看是否已经更新。此时，通过
http://your_user_name.github.io
（即你那个仓库的名称，形如：“你的 GitHub 用户名”.http://github.io）
就可以看到你的个人博客了。
若看不到，则参照下面的步骤，写一篇博客，发表上去！即可看到！
注意：这里可能会出现这种需要输入账号密码的情况

输入github的账号密码就可以了，记住那里输入密码的时候光标是不会移动的，只要你输入了就好，不要以为没输入上：）

安装Next主题

下载主题：
使用 Git Shell 进入 Hexo 文件夹，输入以下两条命令将主题下载到 theme/next文件夹下：

cd Hexo
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

接着按照如下几个步骤进行：

设置站点Hexo/_config.yml的theme字段值为next
生成静态文件

hexo g

开启服务，在本地查看效果

hexo s --debug

同步代码到gitHub

hexo d

注：此时登录网站，发现是空白的，打开控制台，提示很多vendors目录下的文件404，解决办法是将next主题下即Hexo/themes/next/source下的vendors目录名改为lib，并修改Hexo/themes/next/_config.yml的_internal: vendors改为_internal: lib。

参考：iissnan的回答

配置Next主题

风格配置

通过修改next主题下的_config.yml的scheme字段，配置不同的风格。

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

本站点使用的是默认的Gemini，显示效果如下：

菜单设置

通过修改next主题下的_config.yml的menu字段，选定显示的菜单项。

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

其中，home代表主页，categories代表分类页，about代表关于页面，archives代表归档页，commonweal代表404页面（page not found时候显示的页面）。

添加标签页面

前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found。

添加标签页面的具体方法是：
新建页面，输入如下命令：

cd Hexo
hexo new page tags

输入命令后，在Hexo/source下会新生成一个新的文件夹tags，在该文件夹下会有一个index.md文件。

设置页面类型，在上步新生成的Hexo/source/tags/index.md中添加type: “tags”，index.md文件内容如下：

---
title: tags
date: 2018-08-01 00:00:00
type: "tags"
---

设置具体文章的tags
当要为某一篇文章添加标签，只需在Hexo/source/_post目录下的具体文章的tags中添加标签即可，如：

---
title: 基于Hexo和Github搭建博客
date: 2018-08-01
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加为标签后的效果如下：

添加分类标签

步骤与添加标签页面类似，具体如下：

新建页面，输入如下命令：

cd Hexo
hexo new page categories

输入命令后，在Hexo/source下会新生成一个新的文件夹categories，在该文件夹下会有一个index.md文件。
设置页面类型

在上步新生成的Hexo/source/categories/index.md中添加type: “categories”，index.md文件内容如下：

---
title: categories
date: 2018-08-01 00:00:00
type: "categories"
---

设置具体文章的categories
当要为某一篇文章添加分类，只需在Hexo/source/_post目录下的具体文章的categories中添加分类即可，如：

---
title: 基于Hexo和Github搭建博客
date: 2016-11-09
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加为标签后的效果如下：

添加我的页面

步骤与添加标签页面类似，具体如下：

新建页面

cd Hexo
hexo new page about

输入命令后，在Hexo/source下会新生成一个新的文件夹about，在该文件夹下会有一个index.md文件。
修改about/index.md，本站点index.md如下

---
title: about
date: 2018-08-01 00:00:00
---
## 关于我
一只学AI的小菜鸟，欢迎分享知识。
From zdaiot
QQ：972392704
Email: zdaiot@163.com

效果如下：

语言设置

若想显示为中文，需要在Hexo根目录下的_config.yml 文件修改，而Next主题下的_config.yml 文件不需要想应的修改

language: zh-CN

菜单项文本修改是在对next主题下的language文件夹下的文件进行修改，若当前语言是简体中文，直接修改language/zh-CN.yml里的对应字段即可。
本站点显示主页，分类页，关于页面和归档页。

头像设置

打开头像

打开themes/next下的_config.yml文件，搜索 Sidebar Avatar关键字，去掉url后面的#

# Sidebar Avatar
# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: http://example.com/avatar.png

或者使用本地图片,在next/source/images/下放置头像文件avatar.gif，更改avatar：

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.gif

设置头像边框为圆形框并旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面更改添加如下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

头像下方文字和作者设置

打开Hexo下的_config.yml文件

# Site
title: zdaiot
subtitle: QS的大西瓜
description: QS的大西瓜
keywords: QS的大西瓜
author: zdaiot
language: zh-CN
timezone:

新建404界面

在站点根目录下,输入 hexo new page 404,默认在Hexo 站点下/source/404/index.md
打开新建的404界面，在顶部插入一行，写上permalink: /404，这表示指定该页固定链接为 http://"主页"/404.html

---
title: 404-找不到页面
date: 2016-05-21 18:53:59
comments: false
permalink: /404
---
<center>404 Not Found<center>
-------
<center>**对不起，您所访问的页面不存在或者已删除**
你可以**[点击此处](http://www.zdaiot.com)**返回首页。
你也可以<a href="#" class="popup-trigger">**点击此处**</a>重新搜索结果。</center>
![网站二维码](/images/website.png)<center>扫一扫，用手机访问本站<center>

如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

设置网站的图标Favicon

实现效果图

并且修改themes/next下的_config.yml文件中，代码如下：

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

在EasyIcon中找一张图标,或者去别的网站下载或者制作，要求按照代码中的大小与格式。并将图标名称改为代码中的名