最近想用GitHub搭建个人博客，于是下功夫搜索了一番。网上有很多的教程，最终决定用hexo来搭建，因为简单、快速。本教程只是对整个搭建的记录，以及遇到的一些坑，高手可以直接跳过。
说明：本教程针对window环境
首先hexo是一款基于Node.js的静态博客框架, 官网传送门，所以你要了解一些node基础；其次是结合github自然要有一个github账号；最后hexo生成的代码上传需要用到git。
准备工作
1、安装node
2、安装git
3、申请github账号
上面步骤都很简单，不具体说明了，不懂得赶紧去恶补。
安装hexo
npm install hexo-cli -g
进入放博客的文件夹，执行下面命令：
hexo init blog // 该命令会创建一个blog的文件夹，里面就是相关配置文件。
cd blog // 进入blog文件夹
npm install // 安装package.json里配置的模块
hexo server // 运行本地服务，在网页中查看效果。
安装完后进入文件夹，可以看到如下文件夹及文件：
node_modules // npm 的安装模块文件
scaffolds // 布局文件
source // 资源文件，文章都放在该文件下的_posts
themes // 主题文件
.gitignore // git上传忽略文件配置
_config.yml // 核心配置文件
package.json // 描述npm安装包的文件
新建文章：
hexo new [layout] title
layout 即scaffolds 中的文件
hexo new 'post' // 新建文章，如果没有指定布局，默认新建的是post布局， 新文章在source 下的_posts下
hexo new page 'node' // 在文件夹source下，的page下新建一个名为node的文章，如果没有page文件夹会自动新建一个。
当然也可以手动添加文件和文件夹。
github上传配置
当在本地写好文章后就要传到github上，下面做相关配置。
打开_config.yml文件，在最小面找到deploy字段，做如下配置：
deploy:
type: git
repo: git@github.com:youname/youname.github.io.git（将youname换成你的GitHub名字）
branch: master
然后执行npm install hexo-deployer-git --save， 安装相关模块，不然上传代码时会报错。
配置Github
创建一个与你用户名相同的仓库，如： youname.github.io，youname 换成你的github用户名
在本地git中生成钥密，ssh-keygen -t rsa -C"youremail@example.com" 邮箱换成自己邮箱，然后一路回车，使用默认值即可。如果一切顺利的话，可以在用户主目录里找到.ssh目录，里面有id_rsa和id_rsa.pub两个文件。打开id_rsa.pub，复制里面的所有内容，然后登陆GitHub，打开个人的settings，选中SSH and GPG keys 选项，然后，点NEW SSH Key，填上任意Title，在文本框里粘贴id_rsa.pub文件的内容。
关于git的用法以及github相关配置不懂得可以移步廖雪峰老师的站点学习<传送门>
生成文件上传github
hexo generate // 生成静态页面文件夹public
hexo server // 开启本地服务查看效果（默认端口4000）
hexo deploy // 将.deploy目录部署到GitHub
hexo clean // 删除public文件夹
每次上传文件前要先删除public文件夹，在生成静态页面，最后上传github，故执行如下命令：
hexo clean
hexo generate
hexo deploy
打开你的github，查看youname.github.io文件上传成功没，如果成功了在网址中打开youname.github.io，查看博客。
注：在window环境下，执行hexo deploy命令一定要在git bash里运行，不能在cmd中运行，不然报错，当时为了这个问题坑了一把。
遇到的坑：
刚开始win10上没有问题，重装系统后，在win10下安装hexo-cli后运行相关命令报了个错，hexo不是内部或外部命令。网上找了一通，发现hexo没有配置全局变量。将该路径加入到环境变量C:\Users\youname\AppData\Roaming\npm。其中youname换成你电脑的用户名。这是发现hexo命令正常了。执行hexo s时cmd中提示在4000端口查看效果，结果浏览器输入4000端口没有效果。网上又折腾了一番，结果发现4000端口被占用了。执行hexo s -p 1234之后再1234端口打开就正常了。我的电脑上4000端口被福析阅读器的一个安全程序占用了，叫做foxitprotect.exe的程序，把它杀死后就能在4000端口上正常显示了。
小技巧：
每次重新上传都要执行者三个命令会很麻烦，可以偷个懒，打开package.json文件，在里面加入scripts字段：
"scripts": {
"dev": "hexo clean && hexo g && hexo d"
}
然后在git bash 里执行npm run dev即可一步执行这些操作。
域名配置
到此博客基本搭建完成，如果你想要你的博客有个独特的域名，其实配置非常简单。
1、购买域名
2、配置解析
以万网申请的域名为例，如图：
3、在在public文件夹下新建名为CNAME的文件，
在里面填写你的域名，执行hexo d上传代码，输入域名查看效果。
tips：每次执行hexo clean 后public文件都被删除了，CNAME文件也被删除了，这样每次都要重新创建这个文件会很麻烦。其实解决办法很简单，把配置文件CNAME放在source文件下，重新生成后，你发现在public文件中就有CNAME这个文件了。
结语
到此博客就搭建完成了，但是对于hexo还有一块很重要的没有讲，那就是主题。hexo的强大体现在它丰富的主题。下期就讲一下我非常喜欢的一款简洁、漂亮的主题yilia。主题篇已完成[传送门]
网友评论