大三的时候一直想建自己的博客，但是因为各种原因，最近最后都是免费的，所以就参考网上的教程建了自己的博客。

为什么要建立自己的博客？

哈哈，大概是装逼吧。同时，如果自己建博客，可以自由选择自己的风格，不需要受到各种平台的限制。

转载，请注明原博客地址：教你用Hexo Github建立自己的博客。

大致可以分为以下几个步骤

设置环境准备(包括node.js和git环境，github账号配置)安装Hexo配置，如何连接Hexo和gitHub页面，如何发布文章主题，推荐主题Net的简单配置，添加sitemap和feed插件，添加404公益页面设置环境准备

大致可以分为以下三个步骤——node . js的安装和准备git的安装和准备github账号的配置

配置节点环境

下载Node.js安装文件：

Windows installer 32位Windows installer 64位根据您自己的windows版本选择相应的安装文件。如果你不知道，安装32位的。

您可以使用我的电脑的右键属性

如图所示：

只要保持默认设置，一路Next，安装很快就结束了。然后我们检查是否安装了需要的组件，同时按Win和r打开运行窗口：

Windows的运行界面

在新打开的窗口中输入cmd，点击回车打开命令行界面。(以下，上述操作将直接通过打开命令行来表示，记住~)在打开的命令行界面中，输入

如果node -vnpm -v的结果如下图所示，则表示安装正确，可以继续下一步。如果不正确，您需要返回并检查您的安装过程。

配置Git环境

下载Git安装文件：

GIt官网下载地址：

Git-2.6.3-64-bit.exe

然后进入Git安装界面，如图所示：

Git安装界面

和Node.js一样，大部分设置只需要默认保留即可，但为了方便我们操作，建议按照下图选择PATH选项：

Git PATH设置

这是上图的解释。请直接跳过Git的默认设置。出于安全考虑，与Git相关的操作只能在Git Bash中执行。根据上面的选择，Git安装程序会将Git相关的PATH添加到系统路径中，这样就可以在CMD接口下调用Git，而无需打开Git Bash。同样，让我们检查Git是否安装正确，打开命令行并输入：

Git - version如果结果如下图所示，说明安装是正确的，可以继续下一步。如果不正确，您需要返回并检查您的安装过程。

关于下载和安装git，请参考我的博客：Git下载和配置环境变量

Github帐户注册和配置

如果你已经有账号，请跳过这一步~

Github注册

打开https://github.com/,在下面的框中输入您的用户名、电子邮件地址和密码。

然后去你刚刚填写的邮箱，点击Github发给你的注册确认信，确认注册，结束注册流程。

请务必确认您的注册，否则您不能使用gh-pages！

创建代码库

登录后，单击页面右上角的加号，然后选择新建存储库：

创建新的代码库

进入代码库创建页面：

在Repository name下填写yourname.github.io，在Description(可选)下填写一些简单的描述(不写也没关系)，如图：

注：比如我的github名字是gdutxiaoxu，这里你填写gdutxiaoxu.github.io If如果你的名字是徐俊，那么你填写xujun.github.io

代码库设置

正确创建后，您将看到以下界面：

接下来，打开gh-pages功能，点击界面右侧的设置，就会打开这个库的设置页面，向下拖动，直到看到GitHub Pages，如图：

Github页面

点击自动页面生成器，Github会自动为你创建一个gh页面。如果你的配置没有问题，你的名字。Github.io大约15分钟后可以正常访问。如果可以正常访问yourname.github.io，那么github端的配置已经全部结束。

建设hexo博客的相关环境配置已经完成，下面将对Hexo的相关配置进行说明

安装Hexo

在我认为合适的地方创建一个文件夹。这里我就以e:/Hexo为例。首先，在e disk目录中创建一个hexo文件夹，并在命令行窗口中输入该目录。

在命令行中，输入：

Npm安装hexo-cli -g，然后您将看到：

也许你会看到一个WARN，但不用担心，它不会影响你的正常使用。然后进入

Npm安装hexo - save然后你会在命令行窗口看到很多白色字符。让我们看看是否已经安装了Hexo。在命令行中，输入：

Hexo -v如果看到图片中的文字，说明已经安装成功。

hexo的相关配置初始化Hexo

然后进行上述操作，输入：

Hexo init然后输入：

npm安装后，npm会自动安装您需要的组件，只需等待npm运行即可。

第一次体验Hexo

继续，也是在命令行上，输入：

赫克索格

然后输入：

然后Hexo s会提示：

INFO Hexo运行于http://0.0.0.0:4000/。按Ctrl+C停止。

在浏览器中打开http://localhost 33604000/会看到：

截至目前，Hexo的本地配置已经全部结束。

下面将解释如何将Hexo与github页面相关联

如何用github页面连接Hexo

它大致分为以下步骤-配置git个人信息-配置部署

配置Git个人信息

如果您之前已经配置了git个人信息，请跳过此步骤，直接访问

1.设置Git的用户名和电子邮件：(如果这是第一次)

Gitconfig-globaluser.name '徐俊' git config-global user . email '[email protected]2。生成密钥

ssh-key gen-t RSA-c“[电子邮件保护]”配置部署

同样在_config.yml文件中，找到部署并按如下方式进行修改：

部署：键入： git repo :[电子邮件保护] :您的姓名/您的姓名。以github.io.gitbranch: master为例，我仓库的地址是[email protected]: gdutxixu/gdutxixu . github . io . git，所以配置如下

部署：型： Git回购：[电子邮件保护] : GDUT小旭/GDUT小旭。github.io.git Branch : Master写博客，发表文章

创建新博客并执行以下命令：

hexo新帖'文章标题'

此时，在我电脑的目录下，f : hexo source u post会看到文章title.md文件

你可以用MarDown编辑器打开文章来编辑它。编辑文章后，运行生成和部署命令：

Hexo g //生成hexo d //部署。当然，您也可以执行以下命令，这相当于上面两个命令的效果

Hexo d -g #在部署前进行示教

部署成功后，访问您的地址，https://yourName.github.io(在此输入我的地址：https://gdutxio . github . io)，即可看到生成的文章。

踩坑提醒

1)注意提前安装分机的必要性：

npm安装hexo-部署者-git -保存

如果没有执行器行命令，会被提醒

德洛尔没有找到：git

2)如果出现以下错误，

权限被拒绝(公钥)。致命：无法从远程存储库中读取。请确保您拥有正确的访问权限，并且存储库存在。这是因为公钥设置不正确。在这台机器上生成公钥，如果你不懂，可以参考我的博客Git ssh配置和使用

主题推荐

每个不同的主题都需要不同的配置，主题配置文件在主题目录下的_config.yml中。有两个更好的话题推荐给大家。

伊莉亚

Yilia是hexo 2.4的一个主题。崇尚简约、优雅、极致的表现。

彝语地址

然后

我的网站采用了这个主题，简单又美观。目前Github上星级最高的Hexo主题支持几种不同的风格。作者提供了完美的配置说明。

的配置。网络主题

Hexo中有两个主要的配置文件，它们的名称是_config.yml.其中，一个位于网站根目录，主要包含Hexo本身的配置；另一个位于主题目录中。该配置由主题作者提供，主要用于配置与主题相关的选项。

为了描述方便，在下面的描述中，前者称为站点简介，后者称为主题简介。

例如，我的电脑下的F:hexo目录成为站点配置文件，F:hexothemesnext目录成为主题配置文件。

1.安装NexT

Hexo安装主题的方式很简单，只需将主题文件复制到站点目录的themes目录中，然后修改配置文件即可。就NexT而言，安装步骤如下。

下载主题

如果你熟悉git，建议你克隆最新版本，后续更新可以通过Git拉取快速更新，而不是重新下载压缩包。

克隆最新版本并在终端窗口下载稳定版本，在Hexo站点目录中定位。使用Git结账代码：

光盘你的网站Git克隆https://github.com/iissnan/hexo-theme-next主题/下一个2。启用主题

与所有Hexo主题启用模式相同。克隆/下载完成后，打开站点配置文件，找到主题字段，并将其值更改为next。

启用NexT主题

主题：下一个

此时，安装了NexT主题。接下来，我们将验证主题是否正确启用。切换话题后，验证前，最好用hexo clean清除hexo的缓存。

3.验证主题

首先，启动Hexo本地站点并启动调试模式(即adddebug)。整个命令就是hexo s -debug。在启动服务的过程中，注意观察命令行输出是否有异常信息。如果您遇到问题，这些信息将帮助其他人更好地定位错误。当命令行输出提示：

INFO Hexo运行于http://0.0.0.0:4000/。按Ctrl+C停止。

此时，您可以使用浏览器访问http://localhost:4000，并检查站点是否正常运行。

当您看到网站的外观类似于下图所示时，这意味着您已经成功安装了NexT主题。这是下一个默认方案——缪斯

现在，您已经成功安装并启用了NexT主题。接下来，我们将更改一些主题的设置，包括第三方服务的个性化和集成。

4.主题设置

选择方案

Scheme是NexT提供的一个特性。在Scheme的帮助下，NexT为你提供了很多不同的外观。同时，几乎所有的配置都可以在方案间共享。目前，NexT支持三个方案，分别是：

Muse-Default方案，是NexT的原版，黑白主色调，紧凑版的Mist-Muse，整齐有序的单列外观双鱼-双柱方案，小家碧玉般清新的方案切换。通过更改主题配置文件来搜索方案关键字。您将看到有三行方案配置，您只需在启用的方案前面注释#即可。

选择计划

双鱼座5。设置语言

编辑站点配置文件，并将语言设置为所需的语言。建议明确设置自己需要的语言，比如选择简体中文，配置如下：

语言：

下表显示了NexT当前支持的语言：

语言代码设置示例英语en language: en简体中文zh-Hans language : zh-Hans franais fr-fr language 3360 fr-frportugs pt language : pt繁体中文zh-hk或zh-twlanguage : zh-hkru language 3360 ru Deutsch de language 3360 de日语ja language 3360 ja印度尼西亚id language 3360 id

菜单配置包括三个部分，第一部分是菜单项(名称和链接)，第二部分是菜单项的显示文本，第三部分是菜单项对应的图标。NexT使用了Font Awesome提供的图标，Font Awesome提供了600个图标，可以满足大部分场景，不用担心Retina屏幕下的模糊图标。

编辑主题配置文件并修改以下内容：

设置菜单内容，对应字段为菜单。菜单内容的设置格式为：项目名称：链接。其中项目名称是一个名称，它不会直接显示在页面上，但将用于匹配图标和翻译。

菜单示例配置

menu : home 3360/archives :/archives # about :/about # categories :/categories tags 3360/tags # common wea :/404 . html如果您的站点运行在子目录中，请从链接前缀中删除/字样

NexT默认菜单项为(标记的项目表示需要手动创建此页面):

键值设置显示文本(简体中文)home home 3360/home page archives archives 3360/archives page categories 3360/categories分类页面标签tags:/Tags标签关于：/关于页面公益公益公益：/404 . html公益404设置菜单项的显示文本。第一步设置的菜单名称不直接用于界面显示。生成Hexo时，会用这个名字找到对应的语言翻译，提取显示文本。这些翻译文本以语言/{language}放置。NexT主题目录下的yml ({language}是您的语言)。

以简体中文为例，如果需要添加菜单项，比如什么的。然后需要修改简体中文对应的翻译文件languages/zh-Hans.yml，在菜单字段下增加一项：

menu : home : home archives : archives categories :分类标签:关于标签:关于搜索：搜索公益：公益404某事：素材设置菜单项图标，对应字段为menu_icons。该设置的格式为项目名称：图标名称，其中项目名称对应上一步配置的菜单名称，图标名称为Font Awesome图标的名称。Enable可用于控制是否显示图标，您可以将其设置为false以移除图标。

菜单图标配置示例

menu _ icons:启用： true #图标映射。首页：首页关于：用户类别： th标签:标签存档：存档公益：心跳当菜单图标打开时，如果菜单项与菜单不匹配(没有设置或无效的Font Awesome图标名称)，NexT会将其用作图标。

请注意，关键值(如home)的大小写应严格匹配

7.补充报道

默认情况下，侧边栏仅显示在文章页面(带有目录)上，并位于右侧。您可以通过修改主题配置文件中的边栏栏来控制边栏的行为。侧边栏的设置包括两部分，一是侧边栏的位置，二是侧边栏的展示机会。

设置侧边栏的位置并修改侧边栏的值。支持的选项有：

左-左-右-右

目前只有双鱼座方案支持位置配置。影响5.0.0和更低版本。

左侧栏：位置：

设置侧边栏显示的时间并修改侧边栏显示的值。支持的选项有：

post-默认行为，总是在文章页面(有目录列表)时显示-隐藏在所有页面中-隐藏在所有页面中(可以手动展开)移除-完全移除sidebar:display: post

众所周知，当使用motion: false时，侧栏将不会显示。影响5.0.0和更低版本。

8.设置头像

编辑站点配置文件，添加头像字段，并将该值设置为头像的链接地址。头像的链接地址可以是：

地址值完整的http://example.com/avtar.png站点地址配置为：avatar: /uploads/avatar.png或者放在source/Images/目录中配置为：avatar :/Images/avatar . png avatar设置示例

http://example.com/avtar.机场：号

9.设置作者昵称

编辑站点配置文件，并将作者设置为您的昵称。

10.网站描述

编辑站点配置文件，设置

该字段是您的站点的描述。网站描述可以是你喜欢的签名(:)

网络主题的官方文档地址

添加插件

添加站点地图和提要插件

切换到您的本地hexo目录CIA，在命令行窗口中，它属于以下命令

Npm安装hexo-generator-feed-save NPM安装hexo-generator-sitemap-save modify _ config . yml并添加以下内容

# extension splugins :-hexo-generator-feed-hexo-generator-sitemap # feed atom feed : type : atom . xmllimit : 20 # sitemap sitemap 3360 path 3360 sitemap . XML执行以下命令部署服务器。

hexo d -g

匹配后，可以访问https://gdutxiaoxu.github.io/atom.xml和https://gdutxiaoxu.github.io/sitemap.xml，发现这两个文件已经成功生成。

增加404页

GitHub Pages有一个制作404页的指南：Custom 404 Pages可以直接在根目录下创建自己的404.html或404.md。但是自定义404页面只对绑定顶级域名的项目起作用，GitHub默认分配的二级域名不起作用，用hexo服务器调试在本地不起作用。

推荐腾讯公益404

我的404页面配置如下

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 '//headsdyscript type=' text/JavaScript ' src=' http :https://www.qq.com/404/search _ children . js ' charset=' utf-8 ' homepage URL=' gdutxixu . github . io ' homepage name='

Hexo主页

史上最详细的Hexo博客构建图文教程

我的git系列参考教程

Git下载并配置环境变量Git命令行教程和示例教程git ssh配置并使用Git ssh配置多个帐户。请注明原博客地址：教你用Hexo Github建立自己的博客