即将成为史上最具用户体验的Hexo+GitHub Pages搭建博客的教程(持续更新中)
前言
网上关于Hexo+Github Pages搭建博客的教程很多,但是参阅很多博文,都是表达不够清晰,绕来绕去。基于此,我想以一个初来者的角度写一篇尽可能靠谱的教程,方便大家快速搭建好。
大致流程
搭建Node.js环境
搭建Git环境
搭建本地Hexo
将本地Hexo与远程GitHub Pages关联
Hexo的常用操作(持续更新中)
1.搭建Node.js环境
为什么要按照Node.js环境,因为Hexo是基于Node.js编写的。
去Node.js官网:https://nodejs.org/download/r... 下载安装包 v6.11.3
保持默认设置,一路next
点击即可安装完成。
然后win+R
、 CMD
,输入node -v
、npm -v
,出现对应的node的版本号和npm版本号,表明Node.js安装成功!
2.搭建Git环境
使用Git将本地的Hexo生成的网页代码push到GitHub上。
2.1安装Git bash
Git是一款免费、开源的分布式版本控制系统,用于开发过程中代码版本控制和协作。
在Git官网https://git-for-windows.githu... 下载安装即可。
安装好后,右击菜单中会有下作图所示的快捷菜单,在命令窗口输入git --version
,显示出对应版本,表面安装成功!
2.2 GitHub Pages配置
如果没有Git账户,先注册,网址 https://github.com/
注册好后,新建一个repository(仓库)为Github Pages的仓库
Github Pages仓库命名规范是: yourname.github.io
2.3用SSH keys关联Hexo与Github Pages
ssh-keygen -t rsa -C "注册Git的邮箱地址"
在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入,我们按回车不设置密码。
打开 C:\Users\bxm09\.ssh\id_rsa.pub
,此文件里面内容为刚才生成的密钥,准确的复制这个文件的内容,粘贴到 https://github.com/settings/ssh 的 new SSH key
中
可以输入下面的命令,看看设置是否成功,[email protected]的部分不要修改:
ssh -T [email protected]
3.搭建本地Hexo
3.1安装Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
更多关于Hexo,请点击https://hexo.io/zh-cn/docs/
新建一个文件夹,譬如命名为blog,右击选择Git Bash Here
,使用npm安装Hexo,步骤如下:
1 npm install hexo-cli -g 2 hexo init blog 3 cd blog 4 npm install 5 hexo server
此时在浏览器中打开[http://localhost:4000/ 浏览博客了
执行
hexo server
提示FATAL Port 4000 has been used. Try other port instead.
,一般是默认的4000端口被占用,那么把hexo server
改成任意指定的其他端口即可,如改成4322端口,即hexo server -p 4322
执行
hexo server
提示找不到该指令,那是因为在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:npm install hexo -server --save
3.2配置Deployment
在_config.yml
文件中,找到Deployment
,然后按照如下修改,用户名改成你的:
注意冒号:
后面要空一格
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: [email protected]:yourname/yourname.github.io.git branch: master
3.3本地文件提交到Git Pages
// 删除旧的 public 文件 hexo clean // 生成新的 public 文件 hexo generate 或者 hexo g // 开始部署 hexo deploye 或者 hexo d
在浏览器中输入 https:/yourname.github.io (用户名改成你的)看到了 Hexo 与 GitHub Pages 已经成功关联了。
若上述操作失败,则需要安装一个扩展:
npm install hexo-deployer-git --save
至此,基本博客已经搭建和关联完成。Cheer!!!