Shaun 的系统环境:Win10_x64。
前言 本来是想在国内某网站上继续写的,毕竟完全不需要自己管理,只需要负责写好文档就可以了,但某一天,该网站由于响应国家的号召,要实名验证,本来实名验证也没什么,就输入手机号,并填写验证码即可,但该网站实名验证的方式给人的感觉特别不爽,于是就决定自己搭建博客,这样虽然有点麻烦,但由于完全是自己管理,自己完全拥有该文档的所有权,也不用担心哪天别的网站突然出现的各种破问题,相比这种完全自由支配、无比爽快的感觉,管理这种麻烦就是小事了。
Shaun 的系统环境:Win10_x64。
前言 本来是想在国内某网站上继续写的,毕竟完全不需要自己管理,只需要负责写好文档就可以了,但某一天,该网站由于响应国家的号召,要实名验证,本来实名验证也没什么,就输入手机号,并填写验证码即可,但该网站实名验证的方式给人的感觉特别不爽,于是就决定自己搭建博客,这样虽然有点麻烦,但由于完全是自己管理,自己完全拥有该文档的所有权,也不用担心哪天别的网站突然出现的各种破问题,相比这种完全自由支配、无比爽快的感觉,管理这种麻烦就是小事了。
GitHub + Hexo 个人博客搭建 准备篇 在 GitHub 上搭建博客的要求:
1、要有 GitHub 账号。(没有怎么办,没有就去注册 啊)
使用 Hexo 框架的要求:
1、需要安装 node.js。(电脑上没有安装怎么办,没有安装就去下载 (https://nodejs.org/en/download/ )安装啊)
2、需要安装 git。(没有安装就去下载 安装,附 git学习教程 )
GitHub 篇 满足上文的要求之后,就可以开始搭建了,首先在 GitHub 中新建一个仓库( New repository ),在 Repository name 下填写 <yourname>.github.io ,其它可默认,点击 Create repository。
新建仓库完成后,点击 Create new file 新建一个 README.md 文件,随便写点什么,比如 “It's my blog website”。
点击上方横条选项中的 Settings ,查看 GitHub Pages 里的设置,上方应该有绿色框,框中“Your site is published at https://<yourname>.github.io ”,该网址即为博客主页,Source 应该是 master branch ,自此 GitHub 上的设置可以算是完成了,但为了方便和防止误删,一般把 Hexo 文件也放入 GitHub 中,为方便管理,可以新建另一分支专门放 Hexo 文件。
在仓库 code 界面中点击 Branch:master ,在出现的框中输入 hexo 新建 hexo 分支,在 branches 中 Change default branch 设置 hexo 为默认分支。
Hexo 篇 将刚才新建的仓库克隆到本地:git clone https://github.com/<yourname>/<yourname>.github.io.git当前在 hexo 分支。
在 <yourname>.github.io 文件夹下执行
1 2 3 4 5 npm install hexo-cli -g hexo init blog cd blognpm install npm install hexo-deployer-git --save
按这样一连串执行,如果没出问题的话就会在 <yourname>.github.io 文件夹里生成一个 blog 文件夹,该文件夹有一大堆 Hexo 有关的文件。
配置 Hexo Hexo 的配置文件为 blog 文件夹中的 _config.yml 文件。
修改配置文件不要使用 windows 自带的记事本,Shaun 使用的 VS Code,或者 Notepad++ 和 Sublime Text 2 等编辑器都可以,以防文件编码改变,具体修改如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 title: <你的blog名> author: <作者名称> language: zh-CN<网站所用语言,中国大陆选择zh-CN即可> url: http://<yourname>.github.io deploy: type: git repo: https://github.com/<yourname>/<yourname>.github.io.git branch: master
其它的默认即可,具体参数信息详见 Hexo官方文档 。
配置 git 用户信息
1 2 git config --global user.name "<yourname>" git config --global user.email "<yourname>@xxxxxx.com"
如果是个人电脑的话推荐加上 --global 全局参数,因为这样更加方便,如果不加的话,还要在 \<yourname>.github.io\.deploy_git\.git 中 config 里加入 git 用户信息,不然可能提交会出问题,稍显麻烦。
部署 Hexo 在 blog 文件夹下执行:
或者执行:
快速部署个人 blog。
在浏览器中输入http://localhost:4000/,将会出现 Hexo 的 Hello World 界面,更多 Hexo 命令详见 Hexo官方文档 。
最后将 Hexo 文件提交到 GitHub 远程仓库,具体提交命令为:
1 2 3 git add . git commit git push origin hexo
在浏览器中输入https://<yourname>.github.io同样会出现 Hexo 的 Hello World 界面,自此整个个人 blog 的框架已经完全搭好了。
其它篇 主题选择 主题可以去官网上的主题界面去找,目前比较受欢迎主题有 next 和 yilia ,去别人 GitHub 上的主题仓库上去下载或 clone 均可,Shaun 目前用的主题为black-blue ,这个主题 Shaun 在用的时候还有些问题,或许会换,或许会自己魔改。最后由于术业有专攻,实在不知道该改哪里,所以决定换 black-blue 的原版主题 SPFK ,对照着 black-blue 对 spfk 进行修改。具体换主题的方法为:
先将下载好的主题整个放在 \blog\themes 文件夹中,再修改 blog 文件夹中的配置文件 _config.yml :
black-blue 为打包主题文件并放入 \blog\themes 文件夹中的文件夹名,并不是原主题名,只是 Shaun 恰好将其重命名为主题名。
文章发布 发布文章需要在 blog 文件夹中执行:
将会在 _posts 文件夹中生成 test.md 文件,随后编辑 test.md 文件即可,Shaun 使用的 Markdown 编辑器为 Typora 。
至于给文章打标签和分类什么的,请参考 Hexo官方文档 。
写完文章之后推送到 GitHub 中,需要执行:
1 2 3 git add . git commit -m "add test.md" git push origin hexo
Hexo 文件配置同样需要同步一下:
1 2 3 hexo g hexo clean hexo d
插件添加 以 RSS 订阅插件为例。首先安装 hexo-generator-feed ,在 blog 文件夹下执行:
1 2 npm install hexo-generator-feed --save
安装成功后,修改 blog 文件夹中的配置文件 _config.yml :
1 2 3 4 plugin: - hexo-generator-feed
最后,修改当前主题文件夹 中的配置文件 _config.yml,添加 RSS 订阅链接即可:
1 2 subnav: rss: "/atom.xml"
修改完成后,执行
1 2 3 hexo clean hexo g hexo d
将会在页面中看到 RSS 图标。
注意事项 1、提交至远程仓库时可能会出现错误 。
原因可能是因为没有将 SSH Key 添加到 GitHub 中。
查看当前用户主目录下的 .ssh 文件夹中( windows 是 C:\Users\<username>\.ssh)是否有id_rsa(私钥)和id_rsa.pub(公钥)这两个文件,若没有,则执行
1 ssh-keygen -t rsa -C "youremail@example.com"
在 GitHub 中添加 SSH Key 的具体方法为:点击 GitHub 用户头像下的 Settings ,选中 SSH and GPG keys ,点击 New SSH key ,将id_rsa.pub中的内容复制粘贴到 Key文本框 中。
2、Hexo 生成和部署命令都执行失败 。
原因可能是修改配置文件 _config.yml 出错。
将修改的配置文件 _config.yml 复原试试。
3、Hexo 部署之后网页没变化 。
可能需要执行
清除缓存文件 ( db.json ) 和已生成的静态文件 ( public )。在某些情况(尤其是更换主题后),如果发现对站点的更改无论如何也不生效,可能需要运行该命令。
后记 以后就在这上面写 blog 了,顺便把以前写的一些文档也放上来。
参考资料 [1] 利用github+hexo搭建自己的博客 (http://blog.csdn.net/u012150360/article/category/6765461 )
[2] Hexo官方文档 (https://hexo.io/zh-cn/ )
[3] GITHUB+HEXO博客轻松更换主题外观 (http://www.jianshu.com/nb/10649566 )
[4] Hexo—正确添加RSS订阅 (http://hanhailong.com/tags/Hexo%E4%B8%BB%E9%A2%98/ )