手把手教你用Hexo+Github搭建属于自己的博客(详细图文)

站长资源 2024/12/27 佚名

2 0 1

在大三的时候，一直就想搭建属于自己的一个博客，但由于各种原因，最终都不了了之，恰好最近比较有空，于是就自己参照网上的教程，搭建了属于自己的博客。

至于为什么要搭建自己的博客了？

哈哈，大概是为了装逼吧，同时自己搭建博客的话，样式的选择也比较自由，可以自己选择，不需要受限于各大平台。

转载请注明原博客地址：手把手教你用Hexo+Github 搭建属于自己的博客

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

搭建环境准备（包括node.js和git环境，gitHub账户的配置）
安装Hexo
配置Hexo
怎样将Hexo与github page 联系起来
怎样发布文章
主题推荐
主题Net的简单配置
添加sitemap和feed插件
添加404 公益页面
搭建环境准备

大概可以分为以下三步
- Node.js 的安装和准备
- git的安装和准备
- gitHub账户的配置

配置Node.js环境

下载Node.js安装文件：

Windows Installer 32-bit
Windows Installer 64-bit

根据自己的Windows版本选择相应的安装文件，要是不知道，就安装32-bit的吧- -。

可以通过我的电脑 > 右键 > 属性

如图所示：

保持默认设置即可，一路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 Bash中才能进行Git的相关操作。按照上图进行的选择，将会使得Git安装程序在系统PATH中加入Git的相关路径，使得你可以在CMD界面下调用Git，不用打开Git Bash了。
一样的，我们来检查一下Git是不是安装正确了，打开命令行，输入：

git --version

如果结果如下图所示，则说明安装正确，可以进行下一步了，如果不正确，则需要回头检查自己的安装过程。

关于 git的下载即安装，可以参考我的这一篇博客： Git下载及配置环境变量

github账户的注册和配置

如果已经拥有账号，请跳过此步~

Github注册

打开https://github.com/，在下图的框中，分别输入自己的用户名，邮箱，密码。

然后前往自己刚才填写的邮箱，点开Github发送给你的注册确认信，确认注册，结束注册流程。

一定要确认注册，否则无法使用gh-pages！

创建代码库

登陆之后，点击页面右上角的加号，选择New repository：

新建代码库

进入代码库创建页面：

在Repository name下填写yourname.github.io，Description (optional)下填写一些简单的描述（不写也没有关系），如图所示：

注意：比如我的github名称是gdutxiaoxu ,这里你就填 gdutxiaoxu.github.io,如果你的名字是xujun，那你就填 xujun.github.io

代码库设置

正确创建之后，你将会看到如下界面：

接下来开启gh-pages功能，点击界面右侧的Settings，你将会打开这个库的setting页面，向下拖动，直到看见GitHub Pages，如图：

Github pages

点击Automatic page generator，Github将会自动替你创建出一个gh-pages的页面。如果你的配置没有问题，那么大约15分钟之后，yourname.github.io这个网址就可以正常访问了~ 如果yourname.github.io已经可以正常访问了，那么Github一侧的配置已经全部结束了。

到此搭建hexo博客的相关环境配置已经完成，下面开始讲解Hexo的相关配置

安装Hexo

在自己认为合适的地方创建一个文件夹，这里我以E：/hexo 为例子讲解，首先在E盘目录下创建Hexo文件夹，并在命令行的窗口进入到该目录

在命令行中输入：

npm install hexo-cli -g

然后你将会看到:

可能你会看到一个WARN，但是不用担心，这不会影响你的正常使用。然后输入

npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字，下面我们来看一看Hexo是不是已经安装好了。在命令行中输入：

hexo -v

如果你看到了如图文字，则说明已经安装成功了。

hexo的相关配置初始化Hexo

接着上面的操作，输入：

hexo init

然后输入：

npm install

之后npm将会自动安装你需要的组件，只需要等待npm操作即可。

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白 Mist - Muse 的紧凑版本，整洁有序的单栏外观 Pisces - 双栏 Scheme，小家碧玉似的清新 Scheme 的切换通过更改主题配置文件，搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面