使用Hexo搭建个人博客(二)-安装部署

Hexo1
整个Hexo搭建过程虽然看是步骤比较多,但是自己装一遍后,就发现其实要做的事情就那么几样,安装Node.JS、Git、Hexo,然后需要配置下GitHub,访问国外的GitHub如果速度比较慢的话,也可以用国内的Coding net(我用的就是这个,其实也就是找个能免费放静态网站的地方,不用自己再去买个虚拟主机,而且也还有免费的域名可用)。
整个安装过程大致如下所示,每一步我会详细说明:
1、搭建 Node.js 环境
2、搭建 Git 环境
3、安装配置 Hexo
4、GitHub 注册和配置
5、关联 Hexo 与 GitHub Pages
6、GitHub Pages 地址解析到个人域名
7、Hexo 的常用操作

搭建 Node.js 环境

Node.js是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。而Hexo就是一款基于Node.js的静态博客框架,通过Node.js来生成静态的Web页面。
Node.js的官方网站如下所示:
中文网站https://nodejs.org/zh-cn/
英文网站https://nodejs.org/en/
可以在以上网站来下载所需要的版本。
在官方网站上可以看到有两个版本,一个是LTS版本,一个是Current版本。
Hexo2
LTS是长期支持(Long Term Support)的缩写,意味着提供长期稳定的维护,Current版本也就是最新版,包含了很多新特性。下载哪个版本可以看自己的喜好。
因为我自己电脑是Win10系统,并且也想使用下新特性,所以下载的node-v8.2.1-x64.msi文件。

安装Node.js

Windows环境下Node.js安装非常简单,一路”Next”,最后等待安装完成即可:
Hexo3
Hexo4
保持默认设置即可,一路Next,安装很快就结束了。 然后我们检查一下是不是要求的组件都安装好了,同时按下Win和R,打开运行窗口:
Hexo5
在新打开的窗口中输入cmd,敲击回车,打开命令行界面。(下文将直接用打开命令行来表示以上操作,记住哦~)在打开的命令行界面中,输入:

node -v
npm -v

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

搭建 Git 环境

Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。
安装Git用途其实也就是把本地的Hexo内容(既静态的Web网站)提交到github或者Coding net等其他的代码托管站点上。
Git的官网下载地址为https://git-scm.com/downloads

安装Git

大部分按默认安装,一路点击”Next” :
Hexo7
这里选择对应的windows选项,将会使得Git安装程序在系统PATH中加入Git的相关路径,使得你可以在CMD界面下调用Git,不用打开Git Bash了。如下图 :
Hexo8
Hexo9
等待安装完成
Hexo10
安装完成后我们来检查一下Git是不是安装正确了,打开命令行,输入:

git --version

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

安装配置 Hexo

Hexo的官网地址为https://hexo.io/zh-cn
网站中有详细的介绍和说明,大家可以访问此网站进行详细的了解。
Node.js和Git都安装好后,即可开始安装Hexo
安装Hexo很简单只需一条命令即可,不管你是在CMD命令行中执行,还是右键选择Git Bash Here进入来执行都可以。
在命令行中输入:

npm install hexo-cli -g

Hexo17
可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用。
下面我们来看一看Hexo是不是已经安装好了。 在命令行中输入:

hexo -v
创建Hexo站点

安装 Hexo 完成后,就可以创建Hexo站点了。可以在E盘或者其他盘中创建Hexo目录,名字随意取。
比如CMD在命令行窗口中,进入到创建好的Hexo目录中
Hexo16
进入到此目录下后,我们依次运行以下命令,即可创建好Hexo站点

hexo init <folder>   <folder> 自己随意命名
cd <folder>   进入到已命名的<folder>目录中
npm install

命令全部执行完成后,既可在目录中查看到相应的文件生成,此时站点全部创建完毕。

首次体验Hexo

继续操作,同样是在命令行中,输入hexo g 来生成静态页面:

hexo g

Hexo18
然后输入hexo s 开启web服务:

hexo s

然后会提示:

INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器中打开http://localhost:4000/,你将会看到:
Hexo19
到目前为止,Hexo在本地的配置已经全都结束了。此时只是在本地创建好了站点并生成了静态页面,下面我们就需要在GitHub上创建代码库,并将本地的代码上传到GitHub上。

GitHub 注册和配置

GitHub 是一个代码托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub。
Github官网地址为https://github.com

Github注册

打开https://github.com,在下图的框中,分别输入自己的用户名,邮箱,密码。
Hexo12
然后前往自己刚才填写的邮箱,点开Github发送给你的注册确认信,确认注册,结束注册流程。
一定要确认注册,否则无法使用Github pages(既静态页面托管)!

创建代码库

注册完成,登陆之后,点击页面右上角的加号,选择New repository:
Hexo13
新建代码库
进入代码库创建页面:
在Repository name下填写yourname.github.io,Description (optional)下填写一些简单的描述(不写也没有关系),如图所示:
Hexo14
注意:比如我的github名称是lijunboy008 ,这里你就填 lijunboy008.github.io,如果你的名字是yourname,那你就填yourname.github.io

与github建立联系

我们如何让本地git项目与远程的github建立联系呢?用 SSH keys
1、生成SSH keys
在命令行中使用如下命令输入你自己的邮箱地址(不管你是在CMD命令行中执行,还是右键选择Git Bash Here进入来执行都可以)

ssh-keygen -t rsa -C "xxxx@qq.com"

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入,我们按回车不设置密码。
2、添加 SSH Key 到 GitHub
打开 C:\Users\lijun.ssh\id_rsa.pub,此文件里面内容为刚才生成的密钥,准确的复制这个文件里的内容,粘贴到 https://github.com/settings/ssh 的 new SSH key 中
3、测试是否添加成功
可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:

ssh -T git@github.com

如果是下面类似的反馈:

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就好,然后会看到:

Hi lijun! You've successfully authenticated, but GitHub does not provide shell access.
配置Git个人信息

现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的。
Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的。

git config --global user.name "xxxxx"
git config --global user.email "xxxxx@qq.com"
配置 Deployment

_config.yml文件中(此文件在你创建好的Hexo站点目录中),找到Deployment,然后按照如下修改,用户名改成你自己的GitHub信息:
需要注意的是:冒号后面记得空一格!

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:lijun/lijun.github.io.git
  branch: master
本地文件提交到GitHub
// 删除旧的 public 文件
hexo clean
// 生成新的 public 文件
hexo generate
或者
hexo g
// 开始部署
hexo deploye
或者
hexo d

如果没有错误产生,此时你本地的代码就已经上传到了Github中。
注意1:若上面操作失败,则需要提前安装一个扩展:

npm install hexo-deployer-git --save

注意2:如果在执行 hexo d 后,出现 error deployer not found:github 的错误(如下),则是因为没有设置好 public key 所致,重新详细设置即可。

Permission denied (publickey). 
fatal: Could not read from remote repository. 
Please make sure you have the correct access rights 
and the repository exists.

关联 Hexo 与 GitHub Pages

代码库正确创建之后,并且已经将代码上传到了Github中,此时你将会看到如下界面:
Hexo15
接下来开启Github pages功能,点击界面右侧的Settings,你将会打开这个库的setting页面,向下拖动,直到看见GitHub Pages,如图:
Hexo20
在红框中选择已经上传的master branch代码。
保存之后,此时直接访问之前创建New repository时所填的信息:lijun.github.io,就可以看到相应的web页面信息了,域名和站点都是免费的,是不是很cool!

GitHub Pages 地址解析到个人域名

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服 务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。

看着博客的域名是二级域名,总有一种寄人篱下的感觉,为了让这个小窝看起来更加正式,我在阿里云上买了一个域名,打算将博客绑定自己的域名。进行该绑定过程,其实就是一个重定向的过程。
在 GitHub 仓库的根目录下建立一个 CNAME 的文本文件(注意:没有扩展名),文件里面只能输入一个你的域名,不能加http://

www.xxxxx.com

注意:CNAME 一定是在你 Github 项目的 master 根目录下
进入阿里云域名解析地址,添加解析:
1、记录类型选择CNAME
2、主机记录填www
3、解析线路选择默认
4、记录值填yourname.github.io
5、TTL值为10分钟
6、再添加一个解析,记录类型A
7、主机记录填www
8、解析线路选择默认
9、记录值填你GitHub 的ip地址(在cmd中ping:)
点击保存,等 1 分钟,访问下你自己的域名,一切就ok了。
域名绑定成功,域名解析成功,因此你在浏览中输入 www.xxxxx.com,或 xxxxx.com 就可以访问到博客了,输入 lijun.github.io 会重定向到 www.xxxxx.com。
过程:www 的方式,会先解析成 http://xxxx.github.io,然后根据 CNAME 再变成 www
注意:CNAME文件在下次 hexo deploy的时候就消失了,需要重新创建,这样就很繁琐
方法一:每次 hexo d 之后,就去 GitHub 仓库根目录新建 CNAME文件
方法二:在 hexo g 之后, hexo d 之前,把CNAME文件复制到 “\public\” 目录下面,里面写入你要绑定的域名。
方法三(推荐):将需要上传至github的内容放在source文件夹,例如CNAME、favicon.ico、images等,这样在 hexo d 之后就不会被删除了。
方法四:通过安装插件实现永久保留

$ npm install hexo-generator-cname --save

之后在_config.yml中添加一条

plugins:
- hexo-generator-cname

需要注意的是:如果是在github上建立的CNAME文件,需要先clone到本地,然后安装插件,在deploy上去即可。CNAME只允许一个域名地址。
注意:每次生成的 CNAME 都是 yoursite.com 怎么解决?
修改 _config.yml

url: http://www.xxxxx.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

Hexo 的常用操作

参考资料:
http://blog.csdn.net/qq80583600/article/details/72828063
http://blog.csdn.net/gdutxiaoxu/article/details/53576018
http://blog.csdn.net/jzooo/article/details/46781805

posted @ 2018-01-15 21:13  归来似少年  阅读(4570)  评论(1编辑  收藏  举报