第一次用Hexo+Github搭建个人博客

发表于 更新于
本文字数： 4.9k 阅读时长 ≈ 4 分钟

转自手把手教你用Hexo+Github 搭建属于自己的博客和手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo，我的博客基本上是照着这两个教程搭建出来的，不过在搭建过程中遇到了一个坑，搞了很久才解决。所以第一篇博客就写这些来记录我的个人博客是如何搭建，遇到了什么坑以及主题怎么设置的，当然也是为了练手，MarkDown的语法是在这学的，MarkDown基本语法，如何用Next主题来优化界面是在这学的，Hexo博客优化之Next主题美化，用来写博客的软件是Typora，个人认为挺好用的

搭建环境准备

主要是三方面的准备

  • Node.js的安装和准备

  • Git的安装和准备

  • Github账户的配置

Node.js的安装和准备

  1. 下载Node.js安装文件:

  • Node.js官网下载地址

    根据自己的操作系统在官网下载自己所需的版本即可，安装十分简单，保持默认设置一路next就结束了

  1. 检查要求的组件是否都安装好了:

    以管理员身份打开cmd命令行界面，输入

    1
    node -v

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

Git的安装和准备:

  1. 下载Git安装文件:

  • Git官网下载地址

    根据自己的操作系统在官网下载自己所需的版本即可，安装也十分简单，大部分设置保持默认设置就行，但出于方便考虑，建议Path选项按如图选择

    这是对上图的解释，不需要了解请直接跳过 Git的默认设置下，出于安全考虑，只有在Git Bash中才能进行Git的相关操作。按照上图进行的选择，将会使得Git安装程序在系统PATH中加入Git的相关路径，使得你可以在CMD界面下调用Git，不用打开Git Bash了

  1. 检查要求的组件是否都安装好了:

    以管理员身份打开cmd命令行界面，输入

    1
    git --version

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

Github的账户的配置

如果已经拥有账号，请跳过第一步

  1. Github账号注册：

    打开Github官网，，在下图的框中，分别输入自己的用户名，邮箱，密码

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

  2. 创建代码库:

    登陆自己的账号，来到个人主页，点击页面右上角的加号，选择New repository进入代码库创建页面：

    在Repository name下填写yourname.github.io(yourname就是你的github账号的用户名)，Description不写就可以，如图所示：

注意: 比如我的github名称是morichina，这里你就填morichina.github.io，如果你的名字是liuyi，那你就填liuyi.github.io

  1. 代码库设置

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

如果前面某步出现问题，想删除代码库，则点击settings,如图所示:

再滑到页面最下方的Danger Zone, 找到Danger Zone中的Delete this repository，如图:

然后会要求你输入代码库的名称以及GitHub账户的密码来确定执行这一操作，确定以后，便将代码库删除了

代码库正确创建以后，GitHub账户的配置就完成了

安装Hexo

首先打开cmd命令行,，原本应该是直接使用npm这个包管理器来安装，但因为国内镜像源的速度很慢，所以先利用npm来安装cnpm，也就是淘宝的源，输入

1
npm install -g cnpm --registry=https://registry.npm.taobao.prg

安装好以后输入

1
cnpm -v

若结果如图，则说明安装没问题

然后使用cnpm全局安装hexo，输入

1
cnpm install -g hexo-cli

然后你将会看到：

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

1
hexo -v

结果如图，则说明没有问题

接着建立一个空的文件夹来存博客，我是在C:/Users/morcihina下建立了一个叫blog的文件夹来存放，接下来就可以真正的使用hexo来生成我们的博客

首先进入blog文件夹, 因为我的路径为C:/Users/morcihina/blog，所以在cmd命令行下输入

1
cd blog

然后来初始化我们的博客，输入

1
hexo init

这个过程会需要一点时间，耐心等待即可，安装完成以后，便可启动我们的博客，输入

1
hexo s

会出现如下结果

在浏览器中打开http://localhost:4000/，你将会看到

想要再新建文章的话，可以在命令行输入

1
hexo n "博客名"

便会在C:/Users/morcihina/blog/source/_posts目录下创建一篇新文章，再输入

1
hexo g

文件生成好以后，再输入

1
hexo s

在浏览器中打开http://localhost:4000/，便会看到新文章加入了博客中

到目前为止，Hexo在本地的配置已经全都结束了

下面会讲解怎样将本地的博客部署到GitHub上

下面会讲解怎样将Hexo与github page 联系起来

首先安装一个GitHub部署的插件，在cmd命令行中输入

1
cnpm install hexo-deployer-git --save

耐心等待安装就好，安装好以后，需要配置一个文件，打开blog文件夹内的_config.yml文件，用记事本打开即可，如果用记事本打开的话格式太乱，那可以用sublime或NotePad++之类的文本编辑器打开，找到Deployment，然后按照如下修改:

1
2
3
4
deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

注意冒号后面要跟一个空格，repo后面的一串地址，实际上就是之前创建的代码库的HTTPS地址，直接复制过来就行，yourname就是你的GitHub账户名，如图：

将修改保存以后，在命令行当中进入blog文件夹，输入

1
hexo d

就会自动开始部署，这时候会让你输入GitHub的账号和密码，正确输入以后，等一会部署就会完成，然后刷新之前创建的代码库，便会发现仓库里多了些东西，如图：

然后可以去访问yourname.github.io，便可以看到里面有你的博客

至此，个人博客便成功搭建并部署到GitHub上了

关于我踩到的坑

我自己搭建博客时，使用hexo d命令来将本地的博客部署到GitHub上时，上面一直不会让我输入GitHub的账号和密码，本地的博客无法部署过去，一直刷新代码仓库也不会有什么变化，在网上也并没有查到这方面的解决方法，于是后面就采取了另外一种办法来将博客部署到GitHub上，使用的是Git SSH Key的方法

大概分为以下几步

  • 配置Git个人信息
  • 生成密钥
  • 将密钥添加到GitHub上
  • 配置Deployment

配置Git个人信息

如果你之前已经配置好git个人信息，请跳过该步骤

设置Git的user name和email：(如果是第一次的话)

在命令行中输入

1
2
git config --global user.name "morichina"
git config --global user.email "moric_deng@qq.com"

生成密钥

在cmd命令行中输入

1
ssh-keygen -t rsa -C "moric_deng@qq.com"

然后按三个回车，设置密码为空

最后你的C:\Users\admin\.ssh路径下会生成两个文件：id_rsa和id_rsa.pub

将密钥添加到GitHub上

在github上添加ssh密钥，这要添加的是“id_rsa.pub”里面的公钥，用记事本打开id_rsa.pub文件，复制内容，在github.com的网站上到ssh密钥管理页面，添加新公钥，随便取个名字，内容粘贴刚才复制的内容

接着可以来测试一下，打开命令行中，进入blog文件夹，输入

1
ssh git@github.com

结果如图，则添加密钥成功

配置Deployment

同样在_config.yml文件中，找到Deployment，然后按照如下修改：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

注意冒号后面要跟一个空格，repo后面的一串地址，实际上就是之前创建的代码库的SSH地址，直接复制过来就行，yourname就是你的GitHub账户名，如图：

然后命令行中进入blog文件夹，输入

1
hexo d

至此我才部署成功

主题推荐

每个不同的主题会需要不同的配置，主题配置文件在themes目录下的_config.yml。有两个比较好的主题推荐给大家。

Yilia

Yilia 是为 hexo 2.4+制作的主题
崇尚简约优雅，以及极致的性能

Yilia地址

NexT

我的博客就是采用这个主题，简洁美观
目前Github上Star最高的Hexo主题，支持几种不同的风格
作者提供了非常完善的配置说明

Next地址

Next主题的配置

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件

比如我的电脑下的 C:/Users/morcihina/blog 目录下的成为 站点配置文件，C:/Users/morcihina/blog\themes\next 目录下的成为主题配置文件

安装next

命令行下进入blog文件夹，输入

1
git clone https://github.com/theme-next/hexo-theme-next.git thems/next

意思就是把next主题的文件克隆到你的themes目录里的next文件夹中，https://github.com/theme-next/hexo-theme-next, 是next主题的GitHub地址，为了防止网址丢失，可以将其设为star，如图

设置博客主题为next

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

启用 Next 主题

1
theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存

验证主题

在命令行中进入blog文件夹，输入

1
hexo s

然后使用浏览器访问 http://localhost:4000 ，检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

之后在命令行中进入blog文件夹输入

1
hexo g

文件生成以后输入

1
hexo d

部署好以后，便可进入yourname.github.io，验证远端部署的博客主题是否改变，若未改变，等待一会刷新即可

至此，便已成功安装并启用了 Next主题，可以开始写自己的个人博客了

若想对Next主题进行进一步的配置与美化，可参考这篇博客Hexo博客优化之Next主题美化

想学习写博客用的MarkDown格式的语法，可参考这篇博客MarkDown基本语法