是不是羡慕别人都有自己的博客啊,是啊我也特别羡慕 。。。可以有个属于自己的地址,在上面敲敲写写。
然后自己开始捣鼓 折腾 最后成功了还是很开心。。。
接下来的博客模式是用 HEXO+Github
下面介绍下什么是 Hexo :
它是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页
官方文档 : https://hexo.io/
目录结构:
![img_3c3f4075306a392a0fbbb8e3ebd5615a.png](https://i-blog.csdnimg.cn/blog_migrate/d2643a3393d4c429ccd8a431b0559a57.png)
想要了解Hexo 原理的可以看下这个
hexo原理浅析
下面我们开始搞事情:
1.搭建环境准备(包括node.js和git环境,gitHub账户的配置)
2.安装Hexo
3.配置Hexo
4.怎样将Hexo与github page 联系起来
5.怎样发布文章
6.主题 推荐
搭建环境准备
node 安装
下载地址:
[Windows Installer 64-bit](https://nodejs.org/dist/v4.2.3/node-v4.2.3-x64.msi)
[Windows Installer 32-bit](https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi)
git 安装
gitHub 账户配置
node 安装很简单 直接下载安装就行了,检验是否安装成功:打开cmd
![img_d6393085bfa14a20f819daf2235e2cc3.png](https://i-blog.csdnimg.cn/blog_migrate/012a30a3a4840930f86e4e20cb025ea9.png)
配置Git环境:
这个是我的百度云分享的链接GitHub
安装的时候可以选择Git Bash 或 CMD 操作 选择CMD的话 每次 调git的话 就不用 git bash here 了 也很方便。
查看git版本:git --version
![img_f03db13d7440ead801e7f22d55056ad9.png](https://i-blog.csdnimg.cn/blog_migrate/3372e340bf1e7d00475f481cd13aaadc.png)
能够查看到版本号 说明已经安装成功。
github账户的注册和配置:
没有的话就去注册一个: GitHub
不会玩的看下这个教程:廖雪峰Git教程
有账号的话 新建一个仓库
![img_eb0aa54e6f59c839763e7b2b260d23a1.png](https://i-blog.csdnimg.cn/blog_migrate/6e6bf79f52385d26e4e5a377636f7aff.png)
填写仓库名,勾选 Initialize this repository with a README
然后点击创建!
![img_4642215099fe193e8a618238a4b64930.png](https://i-blog.csdnimg.cn/blog_migrate/77f0d1688f2e85a2b01cccda0b4248b8.png)
创建完成后,然后开启gh-page功能。
![img_90a3e1f13525c4fb32ea5e5f3b2abf46.png](https://i-blog.csdnimg.cn/blog_migrate/79f63c03e389e05555527eb4220a638e.png)
下拉选择 分支 master branch
![img_7a60d227db68ee5e72cd00fcf932e8fd.png](https://i-blog.csdnimg.cn/blog_migrate/a2992949b6532a770a71ef386630804f.png)
点击保存的时候 会生成一个 GitHub pages 网址
![img_149bece3ed3318697a96033b7e154cb6.png](https://i-blog.csdnimg.cn/blog_migrate/182c72b7d1e802d0cc7a2fdbf347d293.png)
![img_146fca747ea23819fe707cc8158c67bd.png](https://i-blog.csdnimg.cn/blog_migrate/d154cdec6d65aee7cd5e73f43410c130.png)
这个就是属于我们自己的网站了 是不是很开心...
要让他好看点 有丰富的内容 下面就是Hexo出场...
![img_fc930e7bd056c9a51170ff7dbe97e356.gif](https://i-blog.csdnimg.cn/blog_migrate/c4667bbb5cb847f8589d64c9aa9ea295.gif)
安装Hexo
新建文件夹 然后进入这个文件夹 右键 git bash here 如果你装的是cmd 直接用系统的CMD 玩就行了。
![img_4174ed58a6ab859b5d516f5a462b016d.png](https://i-blog.csdnimg.cn/blog_migrate/bbee85d75ef4c5d018ad4dc1bf7e29ff.png)
安装Hexo依赖
npm install hexo-cli -g
然后install组件
npm install hexo --save
查看版本:
hexo -v
![img_ec9a097eaf0cd6dd572fdb0b6eb959ae.png](https://i-blog.csdnimg.cn/blog_migrate/cf016009d6f3db7453282a142101a637.png)
配置Hexo
用hexo 命令 新建文件夹
hexo init jslin
![img_61f9f7f6803017f87b5eb932e701bade.png](https://i-blog.csdnimg.cn/blog_migrate/e7a013c506926f03dca32ae04d76a921.png)
填坑: 当你在进行hexo 操作时 都是报不是 命令时,确认下是不是用hexo init 创建的文件 用这个命令 创建文件 可以配置 我们的 package.json 文件 当我们npm 时可以安装对应包文件。
![img_c2ee4ca9630ff2ed787dd87019511897.png](https://i-blog.csdnimg.cn/blog_migrate/d1b7465ec0608dbc6665d74f4c00a382.png)
进入你新建的文件夹
![img_b34fad3f4c381353588afd937d29a8ea.png](https://i-blog.csdnimg.cn/blog_migrate/73c4b22dfa6c50cc3234b5c13b48e45d.png)
然后 安装 npm包
npm install
生成
hexo g
启动服务预览
hexo s
也可以一步生成
hexo s -g
当完成上面操作时会提示:
![img_604e44732fa0da63fb88f3bd566f078f.png](https://i-blog.csdnimg.cn/blog_migrate/4ff9da685a67a3f037561bb36b5eb8b3.png)
到浏览器中打开这个链接: http://localhost:4000/
Amazing!!! 开心吧 我们的模板已经生成了。
![img_139b118541d319619b33eccb4167e0b3.gif](https://i-blog.csdnimg.cn/blog_migrate/9840c98286bff0259825c6197d6bc3e0.gif)
熟悉的Hello World !!!
![img_83261839da6bd30aa99444c9738b0095.png](https://i-blog.csdnimg.cn/blog_migrate/2025d5ab34af0be62bbc68e5f918267d.png)
让我们的Hexo 和 github page 关联起来
大概分为以下几步
- 配置git个人信息
- 配置Deployment
如果是第一次的话 :
git config --global user.name "XXX"
git config --global user.email "XXX@XXXcom"
检查是否有SSh ,如果没有的话 在gitHub上新建一个
cd ~/.ssh
然后输入ls 查看
ls
我这里设置了 会出现这两个文件
![img_d71dc179ec88708db62d7ad8bfc63f4c.png](https://i-blog.csdnimg.cn/blog_migrate/a0a2ffc6f19f0145a273ee9f9d5d84a4.png)
生成新的秘钥
ssh-keygen -t rsa -C "XXX@XXXcom"
一直按回车
将SSH Key添加到ssh-agent,执行命令
eval $(ssh-agent -s)
返回agent的Pid:
![img_cce036c7d62556f567a7a51681585e8c.png](https://i-blog.csdnimg.cn/blog_migrate/4349a5ccace41f1868578d16f1108031.png)
执行命令:
ssh-add ~/.ssh/id_rsa
添加成功 返回路径:
![img_841462b0b09d88936a0255b4c2db377c.png](https://i-blog.csdnimg.cn/blog_migrate/9080a9a8295b2f3193afa83270ae92ac.png)
然后在自己的git上 添加SSH 秘钥
![img_22fa84d505f9f6cafb1119f499c7f64e.png](https://i-blog.csdnimg.cn/blog_migrate/f5b56402e4785e3d71108aa3332ecd79.png)
把秘钥文件 id_rsa copy到这里
git上添加SSH Key
![img_468aa98b0e262f10cededd11bc1bf054.png](https://i-blog.csdnimg.cn/blog_migrate/66e0d45e3c0d94e41a9968c154d96b95.png)
验证ssh连接:
ssh -T git@github.com
![img_612c6b1bda04e245d966b9f3390868b4.png](https://i-blog.csdnimg.cn/blog_migrate/d56c463ca6d32940feefda2cce8259fe.png)
ok ssh 到这里我们配置成功了,然后配置下 config.yml文件的Deployment
![img_251396781507436a23d787f28df1757f.png](https://i-blog.csdnimg.cn/blog_migrate/9b92a9a5250aa57f2bde9529a9d73ad3.png)
![img_67e55ec20d68eeaa64f39e877cc6e1fc.png](https://i-blog.csdnimg.cn/blog_migrate/af4ae75907c464efea138db54c8576e6.png)
deploy:
type: git
repo: git@github.com:JslinSir/Jslin.git
branch: master
填坑:
这里设置好了Deployment 一定要
npm install hexo-deployer-git --save
不然的话在生成和部署的时候会报错 坑已经踩过了
![img_61abd3819285e74cc54d35505c1ca766.png](https://i-blog.csdnimg.cn/blog_migrate/6b05e71c740d3aa49729963faf0065b1.png)
![img_75814be91a94f12154bee981e6c9ccc2.gif](https://i-blog.csdnimg.cn/blog_migrate/5a167956b98784bc83d187db408fe778.gif)
接下来就是 配置我们的Hexo 主题
要不然这样也太丑了吧。。。
![img_79fcdd6b38019d94d888b8c7b7f1a889.png](https://i-blog.csdnimg.cn/blog_migrate/3199839fc1b5b936678d6492ca5863cf.png)
我用的是yilia主题 感觉这个简洁 挺好用的 看下效果
![img_d132d0cc6cf79a6cc72a109677db2c1b.png](https://i-blog.csdnimg.cn/blog_migrate/09e5d3bdc1c9beadae6d5ab8b5a66a03.png)
关于主题的设置
这里配置你要是使用的主题,如果你也想使用yilia主题的话 clone这个
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
![img_5613cc73b087de5cd5ec41ac36db3580.png](https://i-blog.csdnimg.cn/blog_migrate/2beec00ed2132a7926ef6ab1d19ba1e8.png)
设置完主题 部署到git上:
hexo d -g
开启服务
hexo s
断断续续折腾了两天,这个博客还存在着问题,点击详情头像不显示问题,菜单还没有布局,还有些404页面还未设置 走到这已经很开心了,加油继续完善!
![img_23ddbbd85a109b7c08a7bdb5dd6f4f0e.gif](https://i-blog.csdnimg.cn/blog_migrate/af78a5ecdb6eefbe511a7f3137666ba1.gif)
把生命浪费在折腾上,和美丽的代码上... 博客地址ClickMe