最近想用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。主题篇已完成[传送门]