利用Hexo+Github Page从零开始搭建自己的博客(一)——环境配置

发表于 | 分类于

Hexo的介绍和安装

什么是Hexo?

Hexo是一个非常流行, 易于上手的博客框架. 利用这个博客框架, 我们可以免去自己写代码构建网站的麻烦, 只需要安装好博客框架, 选择自己喜欢的主题, 就可以搭建自己的个性化网站了！

Hexo的环境配置

安装Node.js

Hexo是基于Node.js开发的博客框架, 所以我们首先需要安装Node.js.
直接从Node.js官网下载安装即可.

注意Node.js版本不应该低于8.10, 推荐使用Node.js 10.0以上版本.

安装时选择默认安装全部即可, 如图所示.

node.js安装

安装完成后可以在终端里面输入(Windows下可以使用cmd或者powershell里面输入

1
2
node -v
npm -v

来查看是否安装成功.

查看node.js版本信息

安装git

git是一个常用的分布式版本控制系统. 若想要详细了解git, 可以参考廖雪峰的Git教程

点击这里安装git.

安装完成后, 在cmd输入

1
git version

查看git版本信息

查看git版本信息

安装Hexo

上述环境搭好之后, 就可以利用npm进行Hexo的安装了.

只要在命令行下执行下面命令:

1
npm install -g hexo-cli

安装完成之后, 在终端执行以下命令来初始化自己的博客目录

1
hexo init myBlog

上面这条命令是在当前目录内新建一个myBlog文件夹, 并在myBlog文件夹里初始化了一些创建博客所需要的文件.

比如说你是在C:\Users\yourUserName\>下执行了上述命令, 则会在对应的目录下新建一个myBlog文件夹.

然后可以利用cd命令进行myBlog文件夹

1
cd myBLog

然后执行以下命令, 利用npm进行安装

1
npm install

完成安装后, myBlog文件夹的下的目录如下所示:

1
2
3
4
5
6
7
8
.
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主题文件夹

安装完成之后, 在myBlog目录下运行hexo s命令, 然后在浏览器中输入 http://localhost:4000 就可以预览网页了.

1
hexo s

将博客部署到GitHub

注册GitHub

如果你还没有GitHub的账号, 可以在GitHub官网进行注册.

顺便提一下:

是Git和GitHub是两个不同概念的东西:

  1. Git一个是版本控制系统
  2. GitHub是一个用Git版本控制的代码托管平台

创建GitHub Page

上面说了, GitHub是一个代码托管平台, 但其实它还提供了一个叫做GitHub Page的功能. 我们可以用GitHub Page作为自己的博客网站.

首先, 需要在GitHub新建一个repository(仓库)

然后点击new

新建的仓库名的格式必须为你的github用户名.github.io

需要注意的是github仅能使用一个同名仓库的代码托管一个静态网站

仓库类型选择Public

打开刚刚创建的仓库, 点击Create new file, 新建一个index.html文件, 在里面随便输入点什么作为测试.

然后选择commit new file, 并在文本框上输入这次commit的备注, 比如”first commit”之类的.

commit成功之后, 在浏览器中输入 http://你的用户名.github.io 就可以看到自己的博客啦(当然, 还没有把hexo中的博客内容添加到github page里面).

配置SSH Key

为了部署本地博客到github上, 首先需要对git进行本地账户配置.

在终端上执行以下命令, “Your name”和”Your email”填入自己的用户名和邮箱

1
2
git config --global user.name "Your name"
git config --global user.email "Your email"

执行下面命令创建ssh key, 一直按回车保持默认设置即可

1
ssh-keygen -t rsa -C "Your email"

如果一切顺利的话, 可以在用户主目录处找到.ssh目录, 里面可以看到有id_rsa和’id_rsa.pub两个文件. 其中id_rsa是密钥, 不可以泄露. id_rsa.pub是公钥.

然后登录github, 添加SSH Key

部署到github

本地和github上的准备工作都做得差不多了, 现在是时候把二者连接起来了.

  1. 打开myBlog项目根目录下的_config.yml配置文件, 拉到文件末尾, 填上如下配置

  2. 安装部署插件

    在myBlog目录下执行以下命令

    1
    npm install hexo-deployer-git --save

    安装完成之后, 可以在博客项目根目录下, 即myBlog路径下执行以下命令进行部署上传. 其中g是代表generate,d代表deploy

    1
    hexo g && hexo d

    上传成功之后, 稍等片刻, 在浏览器输入 http://你的用户名.github.io 就可以看到你自己的博客啦!

如果发现部署之后, git page还是没有变化, 可以尝试输入

1
hexo clean

上述这条命令用于清除缓存, 如果你发现部署之后网页没有变化, 可以尝试使用上述命令清楚缓存, 尤其是在更改主题的时候.

注:

如果觉得github上传速度慢的话, 可以参考我写的这篇文章