使用Hexo+github快速搭建博客
1. 准备工作
新建一个名为你的用户名.github.io
的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io
了,是不是很方便?
由此可见,每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。
几个注意的地方:
- 注册的邮箱一定要验证,否则不会成功;
- 仓库名字必须是:
username.github.io
,其中username
是你的用户名; - 仓库创建成功不会立即生效,需要过一段时间,大概10-30分钟;
创建成功后,默认会在你这个仓库里生成一些示例页面,以后你的网站所有代码都是放在这个仓库里啦。
2. 配置SSH Key
为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。
拿到本机ssh key之后,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key,将刚复制的内容粘贴到key那里,title随便填,保存。
测试是否成功
ssh -T git@github.com
# 注意邮箱地址不用改
如果提示Are you sure you want to continue connecting (yes/no)?
,输入yes,然后会看到:
Hi XXX! You've successfully authenticated, but GitHub does not provide shell access.
此时你还需要配置:
$ git config --global user.name "xxx"// 你的github用户名,非昵称
$ git config --global user.email "xxx"// 填写你的github注册邮箱
3. 安装Hexo
接下来就是我们的重点,安装hexo啦,安装过程也是十分的简单
先创建一个文件夹(用来存放所有blog的东西),然后cd到该文件夹下。
安装hexo命令:
npm i -g hexo
初始化命令:
hexo init
,初始化完成之后打开所在的文件夹可以看到以下文件:node_modules:是依赖包 public:存放的是生成的页面 scaffolds:命令生成文章等的模板 source:用命令创建的各种文章 themes:主题 _config.yml:整个博客的配置 db.json:source解析所得到的 package.json:项目所需模块项目的配置信息
启动
$ hexo g # 生成 $ hexo s # 启动服务
执行以上命令之后,hexo就会在public文件夹生成相关html文件,这些文件将来都是要提交到github去的:
hexo s
是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容,很多人会碰到浏览器一直在转圈但是就是加载不出来的问题,一般情况下是因为端口占用的缘故,因为4000这个端口太常见了,解决端口冲突问题请参考这篇文章:
http://blog.liuxianan.com/windows-port-bind.html
4. 修改主题
既然默认主题很丑,那我们别的不做,首先来替换一个好看点的主题
该博客用的是 hexo-theme-matery 有兴趣的小伙伴可以去该主题下面看对应的配置
$ cd D:\hexoProject\themes
$ git clone https://github.com/blinkfox/hexo-theme-matery.git
修改_config.yml
中的theme: landscape
改为theme: hexo-theme-matery
,然后重新执行hexo g
来重新生成。
如果出现一些莫名其妙的问题,可以先执行hexo clean
来清理一下public的内容,然后再来重新生成和发布。
5.上传到github
如果你一切都配置好了,发布上传很容易,一句hexo d
就搞定,当然关键还是你要把所有东西配置好。
首先,ssh key
肯定要配置好。
其次,配置_config.yml
中有关deploy
的部分:
正确写法:
deploy:
type: git
repository: git@github.com:xxx/xxx.github.io.git
branch: master
此时直接执行hexo d的话一般会报如下错误:
Deployer not found: github 或者 Deployer not found: git
原因是还需要安装一个插件:
npm install hexo-deployer-git --save
安装之后输入hexo d
就会将本次有改动的代码全部提交,没有改动的不会
6. 常用hexo命令
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
缩写:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
组合命令:
hexo s -g #生成并本地预览
hexo d -g #生成并上传
_config.yml
这里面都是一些全局配置,每个参数的意思都比较简单明了,所以就不作详细介绍了。
需要特别注意的地方是,冒号后面必须有一个空格,否则可能会出问题。
7. 参考
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html