搭建本地环境:Hexo框架
Hexo为何物
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown解析文章,并瞬间利用靓丽的主题生成静态网页。其中,Markdown是一个用于将普通文本转换为HTML的工具,它以易于阅读和编写的纯文本格式进行编写,然后将其转换为的HTML(或XHTML)。
Hexo安装
本文是基于Windows7系统安装,如果是其他系统可参见Hexo官方文档。
Hexo安装的前提是电脑预安装Node.js和Git。如果你的电脑已安装Node.js和Git,直接跳到第三步开始安装Hexo;如果未安装则需要先按照前两步提示进行安装,下载安装非常快。
- Node.js下载安装,默认安装即可。
- Git下载安装,Git官网下载速度非常慢,建议在腾讯软件中心下载Git,默认安装即可。用作将本地的内容提交到GitHub仓库,后续会介绍如何操作。
- 利用 npm 命令安装Hexo。在任意位置右击鼠标,选择Git Bash输入以下命令即可安装。耗时稍长,安装顺利的话只需要几分钟,如果在安装过程中遇到问题,可重新安装。其中,npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。
1
$ npm install -g hexo-cli
成功安装Node.js、Git和Hexo后,可用以下命令查看相应版本,结果如下图:
1 |
$ node -v |
建站
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。了解目录结构及相关信息可参看Hexo官方文档,稍后配置Hexo时会涉及到。
1 |
$ hexo init <folder> |
至此博客本地环境已经搭建完毕,并附上Hexo常用命令。下面进行测试一下,发布一篇名为”Test”的博文,结果展示如下图:
1 |
$ hexo new "Test" //新建一篇文章,new后面跟的是标题,最好用双引号括起来,特别是标题中有空格 |
搭建GitHub环境
- Github注册
- 新建仓库(new repository)。注意Owner与repository的前半部分必须一致,比如
- 开启GitHub Pages。进入刚才新建的仓库,点击Settings并将页面拉到底,即可看见GitHub Pages,该主页托管了上述建立的仓库,主页地址如下图所示,即为刚才新建的仓库地址。
关联Hexo与GitHub Pages
初次运行 Git 前的配置
-
初始化Git,创建一个空的Git仓库,或者重新初始化存在的仓库:
1
$ git init
-
设置你的用户名称与邮件地址:
1
2$ git config --global user.name "John Doe" //GitHub注册用户名
$ git config --global user.email johndoe.com //GitHub注册邮箱
如果使用了 –global 选项,那么该命令 大专栏 Hexo+Git一个小时快速搭建个人博客只需要运行一次,因为之后无论你在该系统上做任何事情, Git 都会使用那些信息。 当你想针对特定项目使用不同的用户名称与邮件地址时,可以在那个项目目录下运行没有 –global 选项的命令来配置。
使用SSH连接到GitHub
该部分参考Github帮助文档:Connecting to GitHub with SSH。
-
查看存在的SSH公/私钥。通常私钥保存在文件id_rsa,私钥保存在文件id_rsa.pub。
1
$ ls -al ~/.ssh
-
生成SSH公/私钥
1
2
3
4$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com" //替换邮箱为注册邮箱
$ Enter a file in which to save the (/c/Users/you/.ssh/id_rsa): //提示输入公/私钥保存路径,直接回车即可
$ Enter passphrase (empty for no passphrase): //输入密码,可以留空,直接回车即可
$ Enter same passphrase again: //再次输入密码,可以留空,直接回车即可 -
将秘钥添加到SSH代理
1
2
3
4$ eval $(ssh-agent -s) //首先确保SSH代理在运行
Agent pid 59566 //显示进程id $ ssh-add ~/.ssh/id_rsa //将秘钥添加到SSH代理 -
将公钥添加到Github账户
1
$ clip < ~/.ssh/id_rsa.pub //复制刚才生成的公钥,如果公钥保存路径不是默认路径则该命令无效
然后点击Github页面右上角的头像,在弹出栏中点击Settings,并在新页面左边栏中点击SSH and GPG keys,在弹出页面点击New SSH key,并将复制的公钥贴过去,title会根据邮箱自动生成。
- 测试SSH连接
1
2$ ssh -T git@github.com //测试代码,出现下一行提示表示连接成功
Hi username! You've successfully authenticated, but GitHub does not provide shell access.
将网站部署到服务器
-
安装 hexo-deployer-git:
1
$ npm install hexo-deployer-git --save
-
配置Deployment。
1
2
3
4deploy:
type: git
repo:git@github.com:githubname/githubname.github.io.git
branch: master
找到根目录中_config.yml中Deployment,按照以下代码格式,将其中的githubname更换为你的Github注册用户名即可。
- 将博客发布到Github
1
2
3$ hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)。
$ hexo generate // 生成静态文件
$ hexo deploy // 部署网站
这样就实现了Hexo本地环境与Github的关联,即可通过 http://githubname.github.io 访问你部署在Github上的博客了,如下图所示。
绑定域名
- 购买域名。阿里云,腾讯云等都有,最便宜的9块钱
- 域名解析设置。需要设置的参数,如下表所示,其他参数默认即可。
记录类型 | 主机记录 | 记录值 |
---|---|---|
CNAME | @ | githubname.github.io |
A | www | IPV4地址1 |
- 记录类型选择CNAME,则记录值填写githubname.github.io(GitHub Pages 对应域名)。
- 记录类型选择A,则记录值填写IPV4地址,通过ping上述GitHub Pages 域名获取IPV4地址,即下表的185.199.108.153,每次ping获取得到的IPV4地址可能都不相同,所以可以不采用这种方式。
- 主机记录填写@,则直接解析主域名,前边没有www,如aliyun.com,无论你在浏览器地址栏输入的网址是否加www。
- 主机记录填写www,则解析后的域名含有www,如www.aliyun.com。
1
2$ ping zhaoshengxu.github.io //ping操作
正在 Ping zhaoshengxu.github.io [185.199.108.153] 具有 32 字节的数据: //返回结果第1行
在博客根目录下的source文件夹中新建名为CNAME的无后缀文件,并将购买的域名写入(不加www),如下图所示。
将购买的个性化域名绑定到Github Pages。将个性化域名填入Github Pages页面的Custom domain中并保存,上翻Github Pages页面即可看到,该页面已经和你的个性化域名绑定成功。
测试输入个性化域名访问你的博客首页。
恭喜完成博客的初期搭建,起航吧!