我的建的个人博客：长颈鹿编码

gitpage是什么？

上次看到有个演示的xxx.github.io，从而得知了gitpage这个东西，介绍托管在 GitHub 的项目一般是有个文件是readme，但是像大型的项目需要复杂的、唯美的说明文档，所以github提供了github page，针对说明文档发布静态的web页面（地址）。
因为博客基本都是一些文本，可以不用过多的数据，所以有很多的人使用github pages做博客。使用github pages的优点：
1、github pages有300M免费空间，资料自己管理，保存可靠；
2、可以自己制作博客的样式，也有很多的酷炫的博客效果可以借来使用。
3、类似自己的网站，B格满满
4、操作方便，可以不需要服务器，跳过繁琐的服务器操作
5、体验网站交互的感觉

gitpage的种类

搭建github pages方式

• 创建username.github.io项目，github将自动建立gitpage
• 依附项目的pages

gitpages其它资源

除了github外，国内有码云，提供了gitee pages，同样的功能

gitpage+hexo建立博客

hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，使用 Node.js 渲染页面，通常在很短的时间内即可利用靓丽的主题生成静态网页。同时 Hexo 也拥有强大的插件系统，支持 Jade, CoffeeScript 等诸多强大插件。

Jekyll

Jekyll 是一个简单、可扩展的静态站点生成器。用你喜欢的 标记语言书写内容并交给 Jekyll，它利用模板创建一个 静态网站。在整个处理过程中，你可以调整你想要的网址样式、 在模板中显示哪些数据等等。

使用hexo

一开始看好多博客，都是一来就是使用Jekyll，先fork其它项目博客，让后再咋咋的，好像很难，晕了
偶然找到了hexo，看的这篇博客 使用 Hexo & GitPage 搭建博客介绍hexo很好用，简直就是神器，教程也很好。所以最后用了hexo。

gitpage+hexo步骤

参考这篇博客： 使用 Hexo & GitPage 搭建博客，以下我只列一下基本的几个点

• 安装Node.js（带有了npm）
• 安装git
• 安装hexo

---

• hexo建立文件夹：

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹 <folder> 中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

测试

$ hexo g //更新文件
$ hexo s //部署到本地服务器
//在浏览器中访问http://localhost:4000/即可预览网站全貌，在命令行 Ctrl+C 即可停止预览

---

• hexo部署到github pages：

如果样式符合预期的话即可部署到 GitHub 或者其它提供 Page 托管的服务站点了，下面将以部署到 GitHub 为例进行操作：

1、安装 deploy git 插件实现一键自动部署。

npm install hexo-deployer-git --save

2、在 GitHub 创建一个名为<username>.github.io.git的仓库。
3、在主题配置文件_config.yml中修改仓库地址。

deploy:
  type: git
  repo: 
    github: git@github.com:<username>/<username>.github.io.git

4、执行hexo d即可部署到 GitHub 仓库。

5、新增或修改主题配置后部署时请执行 hexo clean && hexo d

注：这里使用 ssh 协议而非 http，所以请先确保您已经在 GitHub 添加了公钥。

---

hexo的其他使用

主题

它的theme文件中默认创建有landscape主题，比较一般，好像常用流行的是Next，所以我用的是Next，建议用新的Next，旧的Next已经停止版本维护，新的github：hexo-theme-next，参考步骤那篇博客clone主题到博客文件夹中，并按照切换_config.yml文件中的theme为：hexo-theme-next。

---

简单的来个动态背景：
打开hexo-theme-next/_config.yml，搜索canvas_nest，有以下：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: false
  onmobile: true # display on mobile or not
  color: "0,0,255" # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

将 enable: false改为 enable: true

并且再搜索canvas_nest：

 # Internal version: 1.0.0
  # See: https://github.com/theme-next/theme-next-canvas-nest
  # Example:
  # canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
  # canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
  canvas_nest: 
  canvas_nest_nomobile:

将example中的# canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js替换到下面，即：

 # Internal version: 1.0.0
  # See: https://github.com/theme-next/theme-next-canvas-nest
  # Example:
  # canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
  # canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
  canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
  canvas_nest_nomobile:

保存，命令hexo clean；命令hexo g；命令hexo s；测试。可以看到有以下效果： image.png

鼠标在页面上会画出几何图形，整体呈灰白色色调。

---

毕竟觉得太..就是不喜欢，所以网上搜索一些炫酷的js页面
星空1
星空2

炫酷星空动态脚本，这个很酷吧，怎么用呢，我一开始也很懵，但是作为程序员，不能怂，当然不能去网站登录下载啦，我想的是可以打开控制台，快捷键Fn12，就能将该脚本复制下来。
那怎么用到我们的博客呢，继续摸索！

终于找到了这篇博客~
Hexo NexT主题内加入动态背景
安装它的操作，我在</body>尾加上

  <div class="bg_content">
  <canvas id="canvas"></canvas>
  </div>

同时添加脚本：
<script type="text/javascript" src="/js/src/black_star.js"></script>
在themes\next\source\js\src中新建文件black_star.js，代码将上边好看的星空脚本考进去。链接代码
。
同样在themes\next\source\css_custom\custom.styl文件末尾添加内容：

.bg_content {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

然后就能显示动态背景图了！

效果图
我还想怎么使得内容透明，找到这个博客的解决方法 Hexo解决页面过小问题与设置透明背景，具体想实现的可以看看。当然，我的背景图还是白的，我觉得还不错，并且使用chrome浏览器的插件dark后的效果不错，但是有个小bug，就是星星出不来，整片黑了，我通过测试控制台，最后将hexo-theme-next\source\css_common\scaffolding\base.styl文件中的background: 设置为全透明的一个颜色，所以在黑夜模式同样能看到星星~

body {
 position: relative; // Required by scrollspy
 font-family: $font-family-base;
 font-size: $font-size-base;
 line-height: $line-height-base;
 color: $text-color;
 background:  rgba(255,255,255, 0);

 +tablet-mobile() { padding-right: 0 !important; }
 +desktop-large() { font-size: $font-size-large; }
}

dark图

当然还遇到其他好多bug的，大概方法博客已经罗列在上边~

提示：不需要将canvas设置为true的

hexo admin 插件来管理发布博客

hexo 简单的发布文章可以借鉴Hexo搭建 --- 3、Hexo发布文章详解~~

分类标签的用法看这个hexo 添加分类以及标签，真的好评~~

hexo admin安装看这个~~

hexo admin deploy发布用这篇博客Hexo Admin Deploy扩展教程正解，其他都是弟弟，会出bug的~~

---

收藏一篇可能有用的博客：https://www.jianshu.com/p/1ff2fcbdd155