少撸两局教你搭个博客玩

是不是羡慕别人都有自己的博客啊，是啊我也特别羡慕。。。可以有个属于自己的地址，在上面敲敲写写。
然后自己开始捣鼓折腾最后成功了还是很开心。。。
接下来的博客模式是用 HEXO+Github
下面介绍下什么是 Hexo :
它是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页

官方文档： https://hexo.io/
目录结构：

目录结构介绍

想要了解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

查看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

hexo常用命令

当完成上面操作时会提示：

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: gitrepo: git@github.com:JslinSir/Jslin.gitbranch: 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