github+hexo搭建本身的博客网站（一）基础入门

 github提供的page，hexo提供的静态博客文档，这样能够搭建一个本身的一个博客网站。

使用github pages服务搭建博客的好处有：

1. 全是静态文件，访问速度快；
2. 免费方便，不用花一分钱就能够搭建一个自由的我的博客，不须要服务器不须要后台；
3. 能够随意绑定本身的域名，不仔细看的话根本看不出来你的网站是基于github的；
4. 数据绝对安全，基于github的版本管理，想恢复到哪一个历史版本都行；
5. 博客内容能够轻松打包、转移、发布到其它平台；

 

1、github相关设置

一、在github上建立一个项目

注意：项目名称必须为本身   github的用户名.github.io

 二、代码库的设置

开启gh-pages功能，点击界面右侧的Settings，你将会打开这个库的setting页面，向下拖动，直到看见GitHub Pages。

以前是须要：点击Automatic page generator，Github将会自动替你建立出一个gh-pages的页面。 若是你的配置没有问题，那么大约15分钟以后，yourname.github.io这个网址就能够正常访问了~ 若是yourname.github.io已经能够正常访问了，那么Github一侧的配置已经所有结束了。

如今不须要设置page generator。就能够访问https://saucxs.github.io/

 

2、安装hexo

一、全局安装hexo-cli指令

npm install hexo-cli -g

查看hexo版本

hexo -v

 

二、初始化hexo

hexo init

hexo会自动下载一些文件到这个目录，包括node_modules，目录结构以下图：

 

三、开始体验hexo

hexo g

生成静态文件到public文件夹，没有public文件夹就会自动建立，若是有了就会覆盖public内容。

public文件夹的内容是要提交到github上的。

四、开启本地服务

hexo s

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 便可看到内容，不少人会碰到浏览器一直在转圈可是就是加载不出来的问题，通常状况下是由于端口占用的缘故，由于4000这个端口太常见了，解决端口冲突问题。

 

 3、如何将hexo与github page联系起来

 分为3步：

一、配置SSH key

二、设置Git的user name和email

三、配置deployment

 

一、配置SSH key

若是你以前已经配置好git我的信息，请跳过这一个 步骤，直接来到

为何要配置这个呢？由于你提交代码确定要拥有你的github权限才能够，可是直接使用用户名和密码太不安全了，因此咱们使用ssh key来解决本地和服务器的链接问题。

$ cd ~/. ssh #检查本机已存在的ssh密钥

若是提示：No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "邮箱"

而后连续3次回车，最终会生成一个文件在用户目录下，

 打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入我的设置 -> SSH and GPG keys -> New SSH key：

刚复制的内容粘贴到key那里，title随便填，保存。 

 

测试一下是否成功

$ ssh -T git@github.com # 注意邮箱地址不用改

看到这个信息说明SSH已配置成功！

 

二、设置Git的user name和email

$ git config --global user.name "liuxianan"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@163.com"// 填写你的github注册邮箱

设置这个是为了便与以后上传到github的page上。

 

三、设置deployment

配置_config.yml中有关deploy的部分：

正确写法：

deploy:
  type: git
  repository: git@github.com:saucxs/saucxs.github.io.git
  branch: master

错误写法：

deploy:
  type: github
  repository: https://github.com/saucxs/saucxs.github.io.git
  branch: master

后面一种写法是hexo2.x的写法，如今已经不行了，不管是哪一种写法，此时直接执行hexo d的话通常会报以下错误：

Deployer not found: github 或者 Deployer not found: git

须要安装一个插件

npm install hexo-deployer-git --save

再次输入hexo d，就ok了。

 

 

本身的github的page，显示以下

 

同时，你的github上的项目，代码已经更新。

 

4、保留CNAME、README.md等文件

提交以后网页上一看，发现之前其它代码都没了，此时不要慌，一些非md文件能够把他们放到source文件夹下，这里的全部文件都会原样复制（除了md文件）到public目录。

因为hexo默认会把全部md文件都转换成html，包括README.md，全部须要每次生成以后、上传以前，手动将README.md复制到public目录，并删除README.html。

 

5、修改hexo的主题

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 自己的配置；另外一份位于主题目录下，这份配置由主题做者提供，主要用于配置主题相关的选项。

为了描述方便，在如下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

PS：须要特别注意的地方是，冒号后面必须有一个空格，不然可能会出问题。

举个栗子：

1. 安装 NexT

载主题

若是你熟悉 Git， 建议你使用 克隆最新版本 的方式，以后的更新能够经过 git pull 来快速更新， 而不用再次下载压缩包替换。

在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题

与全部 Hexo 主题启用的模式同样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改成 next。

启用 NexT 主题

theme: next

到此，NexT 主题安装完成。下一步咱们将验证主题是否正确启用。在切换主题以后、验证以前， 咱们最好使用 hexo clean 来清除 Hexo 的缓存。

hexo clean

hexo s -g      //生成静态文件，启动本地服务

 

6、 写博客

定位到咱们的hexo根目录，执行命令：

hexo new ‘HelloEveryone’

咱们只须要打开这个文件就能够开始写博客了，默认生成以下内容

 

 固然你也能够直接本身新建md文件，用这个命令的好处是帮咱们自动生成了时间。

 

默认状况下，生成的博文目录会显示所有的文章内容，如何设置文章摘要的长度呢？

答案是在合适的位置加上<!--more-->便可，例如：

 

7、访问个人hexo+github博客

能够访问个人git博客来查看效果： https://saucxs.github.io/