是不是羡慕别人都有自己的博客啊,是啊我也特别羡慕 。。。可以有个属于自己的地址,在上面敲敲写写。
然后自己开始捣鼓 折腾 最后成功了还是很开心。。。
接下来的博客模式是用 HEXO+Github
下面介绍下什么是 Hexo :
它是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页
官方文档 : https://hexo.io/
目录结构:
目录结构介绍
想要了解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
查看node版本
配置Git环境:
这个是我的百度云分享的链接GitHub
安装的时候可以选择Git Bash 或 CMD 操作 选择CMD的话 每次 调git的话 就不用 git bash here 了 也很方便。
查看git版本:git –version
git
能够查看到版本号 说明已经安装成功。
github账户的注册和配置:
没有的话就去注册一个: GitHub
不会玩的看下这个教程:廖雪峰Git教程
有账号的话 新建一个仓库
新建仓库.png
填写仓库名,勾选 Initialize this repository with a README
然后点击创建!
仓库的创建
创建完成后,然后开启gh-page功能。
点击仓库中的setting
下拉选择 分支 master branch
下拉选择
点击保存的时候 会生成一个 GitHub pages 网址
GitHub pages
网站内容
这个就是属于我们自己的网站了 是不是很开心…
要让他好看点 有丰富的内容 下面就是Hexo出场…
开心
安装Hexo
新建文件夹 然后进入这个文件夹 右键 git bash here 如果你装的是cmd 直接用系统的CMD 玩就行了。
image.png
安装Hexo依赖
npm install hexo-cli -g
然后install组件
npm install hexo --save
查看版本:
hexo -v
安装成功
配置Hexo
用hexo 命令 新建文件夹
hexo init jslin
init
填坑: 当你在进行hexo 操作时 都是报不是 命令时,确认下是不是用hexo init 创建的文件 用这个命令 创建文件 可以配置 我们的 package.json 文件 当我们npm 时可以安装对应包文件。
error
进入你新建的文件夹
新建的文件
然后 安装 npm包
npm install
生成
hexo g
启动服务预览
hexo s
也可以一步生成
hexo s -g
当完成上面操作时会提示:
success
到浏览器中打开这个链接:
http://localhost:4000/
Amazing!!! 开心吧 我们的模板已经生成了。
美美的紫霞仙子献上
熟悉的Hello World !!!
Hello World
让我们的Hexo 和 github page 关联起来
大概分为以下几步
- 配置git个人信息
- 配置Deployment
如果是第一次的话 :
git config --global user.name "XXX"
git config --global user.email "XXX@XXXcom"
检查是否有SSh ,如果没有的话 在gitHub上新建一个
cd ~/.ssh
然后输入ls 查看
ls
我这里设置了 会出现这两个文件
SSH
生成新的秘钥
ssh-keygen -t rsa -C "XXX@XXXcom"
一直按回车
将SSH Key添加到ssh-agent,执行命令
eval $(ssh-agent -s)
返回agent的Pid:
pid
执行命令:
ssh-add ~/.ssh/id_rsa
添加成功 返回路径:
id_rsa
然后在自己的git上 添加SSH 秘钥
git
把秘钥文件 id_rsa copy到这里
git上添加SSH Key
add_sshKey
验证ssh连接:
ssh -T git@github.com
hello
ok ssh 到这里我们配置成功了,然后配置下 config.yml文件的Deployment
config.yml
Deployment
deploy:
type: git
repo: git@github.com:JslinSir/Jslin.git
branch: master
填坑:
这里设置好了Deployment 一定要
npm install hexo-deployer-git --save
不然的话在生成和部署的时候会报错 坑已经踩过了
error
别再踩喽
接下来就是 配置我们的Hexo 主题
要不然这样也太丑了吧。。。
Hexo
我用的是yilia主题 感觉这个简洁 挺好用的 看下效果
美美的紫霞
关于主题的设置
这里配置你要是使用的主题,如果你也想使用yilia主题的话 clone这个
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
image.png
设置完主题 部署到git上:
hexo d -g
开启服务
hexo s
断断续续折腾了两天,这个博客还存在着问题,点击详情头像不显示问题,菜单还没有布局,还有些404页面还未设置 走到这已经很开心了,加油继续完善!
把生命浪费在折腾上,和美丽的代码上… 博客地址ClickMe