利用GitHub Pages + Hexo框架搭建个人博客

Author Avatar
山小杰 7月 30, 2017
  • 在其它设备中阅读本文章

+++本文全部是在Windows10平台联网环境下操作的+++

准备工作

安装Node.js

Hexo是基于Node.js的静态博客框架,所以需要安装这个。官网下载msi安装程序(我用的是node-v6.10.3-x64.msi)安装,同时安装过程中不要忘了勾选Add to PATH选项,用来添加系统环境变量:

安装Git for Win

Git可以很方便的提交代码到GitHub仓库中。由于众所周知的原因,官网下载Git会很慢,所以我找了个国内下载源。
Git安装(全部默认即可)完成后开始菜单会有个Git文件夹,我们需要用到的是Git Bash:

注册GitHub账号

因为需要用到GitHub的GitHub Pages功能,所以需要有一个GitHub账号。还有,没有GitHub账号的程序员不是一个合格的程序员!

Git配置

1.配置账户:
打开Git Bash,输入以下两条命令(name替换成你的github用户名,email替换成你注册github时用的邮箱):
git config --global user.name "name"
git config --global user.email "email"

可以使用git config --list命令来查看当前的配置信息,可以看到user.nameuser.email已经出现在了最后两行:

如果你发现信息输入有误,重新执行上面两条命令即可。

2.配置SSH密钥:
打开Git Bash,确保当前位置是用户工作目录,也就是:~这个位置:

不在这个位置的话可以输入:
cd ~
进入这个目录

可以看到,这个目录其实是对应电脑上C:\Users\用户名这个位置。
执行下面的命令来生成ssh密钥文件:
ssh-keygen -t rsa -C "email"
email替换成你注册github时用的邮箱。
一路回车,过程中让你输入东西的时候不要输入,直接回车,使用默认即可,完后当前目录
会多出一个名叫.ssh的文件夹,我们进入这个文件夹:
cd .ssh
里面有两个密钥文件:

不带.pub后缀的是私钥,带.pub后缀的是公钥,私钥我们要自己保存好,不要泄露出去,公钥是可以公开分享的。
然后我们把公钥里面的内容全部复制出来,可以使用cat命令使密钥内容显示出来再复制,也可以使用文本编辑器(不推荐使用记事本)打开再复制:

再然后登陆我们前面注册的github账号,点击头像,进入设置
找到SSH and GPG keys,点击右侧的New SSH key

Title随便填,把我们刚才复制的公钥内容粘贴进Key下面的输入框内,点击Add SSH key

最后测试一下SSH
命令行执行:

第一次执行这个命令的话程序会问你是否要继续进行连接,输入yes回车就好。
然后控制台输出:
Hi Staroon! You've successfully authenticated, but GitHub does not provide shell access.
说明SSH密钥配置成功!!!

创建本地Git仓库

我这里把它建在了D盘,所有文件夹名字都是可以自定义的。打开Git Bash:
cd \d:
mkdir git_repository
创建我们的博客文件夹:
cd git_repository
mkdir blog
进入blog文件夹:
cd blog
这是我电脑上的blog文件夹全路径: /d/git_repository/blog

部署Hexo

安装Hexo

打开Git Bash,执行下面的命令:
npm install -g hexo-cli
稍等一会儿,不要着急,会开始自动下载安装:

可能会报下面的两个警告,不用理会,我还没发现有什么影响。

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\hexo-cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

可以使用hexo -v命令测试是否安装成功:

初始化Hexo

进入blog文件夹,空白处鼠标右键,点击Git Bash Here进入命令窗口,执行初始化命令:
hexo init
等待初始化完成…
最后会有一句:

INFO Start blogging with Hexo!

然后执行:
npm install
等待执行结束,初始化成功!现在就已经可以开始使用Hexo了!!!

但是还有一些插件最好提前装上:

  • 索引生成器:npm install hexo-generator-index --save
  • 归档生成器:npm install hexo-generator-archive --save
  • 分类生成器:npm install hexo-generator-category --save
  • 标签生成器:npm install hexo-generator-tag --save
  • 本地搜索: npm install hexo-generator-search --save
  • 本地化服务:npm install hexo-server --save
  • Git部署功能:npm install hexo-deployer-git --save
  • 渲染器:npm install hexo-renderer-marked --save
  • 渲染器:npm install hexo-renderer-stylus --save
  • 置顶功能:npm install hexo-helper-post-top --save
  • 二维码分享: npm install hexo-helper-qrcode --save
  • 站点地图: npm install hexo-generator-seo-friendly-sitemap --save

初始化完成后的文件夹结构是这样的:

关于该目录下的文件及文件夹说明,查看hexo官方文档即可。

配置

配置文件_config.yml,具体的配置信息还是去hexo官方文档看吧。

建议用专业的文本编辑器编辑该文件,不要用Win自带的记事本。我用的是EditPlus.

开始写文章

参考hexo官方文档挺好,突然发现官方文档挺详细。。。
说明一下,官方文档里新建文章的命令是:
hexo new [layout] <title>
[layout]默认为post,可以不用加[layout]命令。
比如我想新建一个名叫helloHexo的文章,直接命令:
hexo new "helloHexo"
即可,然后控制台会输出该文档位置信息:

进入存放我们文章的文件夹,可以看到我们的helloHexo.md已经在这了,另外还有一个hello-word.md文件,这里面写的是一些常用hexo命令,可以删掉这个文件。

用文本编辑器或者Markdown编辑器打开helloHexo.md就可以写文章啦~~
我正在用的Markdown编辑器是:Visual Studio Code

打开该文件,里面已经有一部分内容了:

这一部分内容官方称为Front-matter,可以参考官方文档补充这一部分的内容。

三道杠---下面的空白地方就是我们要写文章内容的部分了,全部使用Markdown语法。

一些Markdown语法:

文章写完了,先预览一下吧~~
这就需要用到我们之前装的server插件了
命令行输入:
hexo server
启动本地服务器:

浏览器访问 http://localhost:4000/ 就可以看到最原始状态的博客啦~

说明:同样的Markdown语法在不同的网站上可能会显示出不同的效果,不过没关系,只要能在Github上显示出我们想要的效果就行了,因为我们的目的就是把博客部署在Github上!

默认的主题太丑?
hexo有很多第三方主题,如何配置使用可以去各主题官网查看。

如何搜索主题?
Github上搜索关键字hexo theme一大堆主题

至此,本地博客已经搭建完成!

部署博客到GitHub

创建Github仓库

仓库名字一定要是:{github username}.github.io
比如我的github用户名是Staroon,则仓库名字为:Staroon.github.io
用户名即是Owner那里的用户名

部署配置

配置_config.yml文件。
翻到最下面找到deploy这一项,填写:

type: git
repo: git@github.com:{username}/{username}.github.io.git
branch: master

如下图所示

博客发布

命令行执行:
hexo g
然后执行:
hexo d
当控制台输出:INFO Deploy done: git的时候,说明项目已经成功的发布到github上,耐心等待一会儿,就可以通过访问{username}.github.io来访问博客了~~

博客更新

hexo new "name"或者直接在/source/_posts/里面新建.md文件
写完Markdown文章后,执行:
hexo g -d
即可一键部署。

每次博客内容有改动都可以使用hexo g -d进行部署。

至此,博客搭建教程已经全部完成!

注册个人域名

找个正规的域名厂商注册即可。
我是在GoDaddy上注册的。

将个人域名与博客绑定

DNS设置

国内推荐使用DNSPod
国外的话可以使用Cloudflare,可以免费使用https。

这里以DNSPod为例:
注册登录,在域名解析里面添加域名
将上面注册的域名添加进去
然后点击添加纪录添加3条记录,如下图所示:

两条A记录指向的IP分别是:

  • 192.30.252.153
  • 192.30.252.154

CNAME记录指向的是你的原博客地址:{username}.github.io

域名服务器设置

这里以GoDaddy为例:
进入我的产品页,找到要管理的域名,点击DNS进入DNS管理页面:

然后找到域名服务器点击更改

将域名服务器修改为DNSPod提供的域名服务器即可。

博客内设置

在博客source目录下,新建一个CNAME文件

编辑该文件,将你的新域名写进去:

然后执行hexo g -d重新部署

完成!!!

耐心等待一会儿,就可以使用新域名访问博客了!