Hexo 独立博客环境配置以及搭建

文章目录
  1. Build Prepare
    1. GitHub Pages
      1. 注册GitHub账号
      2. New repository
    2. Git
    3. 域名/解析
    4. Node.js
    5. Hexo
      1. Choose Hexo
      2. Install Hexo
  2. 高度定制化
    1. 插入图片
    2. 增加侧边栏

　　一直有搭一个完全属于自己的blog的想法，从摄影旅行呀，技术blog啊，手工作品呀，编曲乐队呀~记录一些人，记录一些事，青春里的点点滴滴，然后各种比赛拖延症一直到现在才有时间，也算是把这次的搭建整个过程给记录下来了，如果有需要的各位就可以直接享用啦！有不对的地方敬请指正！十分感谢！

Build Prepare

　服务器: GitHub Pages
　域名: 阿里云
　框架: Node.js
　选择: hexo
　其他工具: Git

GitHub Pages

官网的介绍语是Websites for you and your projects，是给个人和个人的项目提供的网站服务。即我们可以把自己在GitHub上的项目寄存到GitHub Pages上。Pages有300M免费空间，偶尔不稳定，且GitHub是一个很有用的工具，借此熟悉GitHub流程

注册GitHub账号

　　GitHub可以理解为一个注重分享的开源代码社区，每个人看到有趣的Repository都可以Fork到本地来玩，当然在这里不扯这么多，进入网站之后按照提示一步步来即可完成注册，但一定要记得邮箱，因为几乎所有的GitHub通知都会通过邮箱来发送给你。大概会有一个这样的界面，可以按着Guide来走一遍

New repository

　　登录 GitHub 之后，在页面右上角点击 + 加号按钮，点击 New repository。由于我们是新建一个个人网站项目，所有仓库的名称需要安装 GitHub 个人网站项目的规定来写。 规则就是：http://YOUR-GITHUB-USERNAME.github.io。比如我的 GitHub 用户名是 luoda888，那我就要填写 http://luoda888.github.io。选择Public模式，接着点进仓库即可看到仓库界面（我的是已经有内容了，刚注册时空仓库）。

Git

Git是GitHub的一项非常好用的神器，以后遇见喜欢的项目都可以git clone下来在Mac,Windows上进入网站直接下载安装就好，安装之后打开终端，输入

1
$ Git --version

在安装完Git之后需要配置SSH，好处是让你每次Git的时候不需要输入账号密码，接下来检测是否有任意一个SSH秘钥

1
$ Cd ~/.ssh

如果有的话，备份这个SSH Key

1
2
$ mkdir key_backup
$ mv id_rsa* key_backu

生成你自己的GitHub SSH Key

1
$ ssh-keygen -t rsa -C "xxx@xxx.com”

添加SSh key到GitHub
登录到GitHub页面，Account Settings->SSH Public Keys->Add another key将生成的key（id_rsa.pub文件）内容复制到输入框中存档。

测试连接及设置个人信息

1
2
3
$ ssh git@github.com
$ git config --global user.name "xxx”
$ git config --global user.email xxx@xxx.com

域名/解析

　　选择一个自己想要的域名，最近.我爱你这种域名也有了…挺适合表白的
　　前往万网根据你自己的想法买买买

　　之后就是解析域名，把自己的域名和IP地址绑定起来

　　IP地址则是你的GitHub Pages对应的地址

1
$ Ping yourusername.github.io

Node.js

　　在Node.js官网选择合适的版本进行下载好后，如mac上，输入以检测版本

1
2
$ npm -v
$ node -v

Hexo

Choose Hexo
  • 同比性能下颜值最高
  • 相当多的高颜值主题可供选择
  • 静态网站相比于多插件的WordPress可以不依托于价格高昂的服务器
  • 对于一个学生狗来说，虽然不是啥大花费，但能省则省总没错
  • 维护较为简单,加载网站速度超级快
  • 支持归档、分类、标签、Links、关于、目录
  • 高度自由的自定义主题
  • 支持markdown语法
Install Hexo

找到自己想放置的目录

1
$ cd ~/

利用之前配置好的npm进行安装并检验是否成功

1
2
$ npm install -g hexo-cli
$ hexo

因为有一些东西被Ban掉了，如果安装不了的话

1
2
$ npm install -g hexo-cli --no-optional
$ hexo

hexo安装成功

初始化博客/部署Hexo

1
2
3
$ hexo init <folder>  {<folder>为你想命名的文件夹名称}
$ cd <folder>
$ npm install

部署完成

接下来应该可以看到_config.yml文件，打开至文件末端并进行如下设置

1
2
3
4
deploy: 
  type: git
  repo: http://github.com/yourname/yourname.github.io.git
  branch: master

这样你之后在进行Hexo deploy操作时即可直接上传到你的GitHub仓库，接着就是在本地生成静态网页了

1
2
3
$ hexo generate 可简写为g
$ hexo server   可简写为s
$ hexo deploy   可简写为d

如果报错则输入以下命令

1
2
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save

接下来写一篇Hello World玩一玩

1
2
$ hexo new Hello World
$ hexo s

没错，新建一篇文章就是这么简单Hexo new [article]，并且已经可以在http://localhost:4000/预览了，比如我写了该文章

在执行完Hexo deploy操作后，在浏览器中输入https://yourname.github.io或者你自己的域名，即可看到你自己的初始网站啦，在这之后每次部署只需要四部曲

1
2
3
4
$ hexo clean 清除本地缓存
$ hexo g 编译生成静态页面
$ hexo s 在本地端口预览
$ hexo d 上传到GitHub

高度定制化

插入图片

Hexo-asset-image为我们提供了无需利用七牛云等图床，在本地即可完成图片的引用的功能

1
$ npm install https://github.com/CodeFalling/hexo-asset-image --save

接下来在markdown的语法中即可设置图片的插入

1
2
![](github-hexo-blog/yourpic.png)  （首页不可见）
{% asset_img yourpic.jpg 描述%}   （首页可以看到）

增加侧边栏

1
2
I love you
I really love you
1
$ GitHub Pages "YourUser.io"   Node.js "Hexo"  Git

　　利用Github Pages + Hexo 框架来搭建自己的blog，整体耗时大概在1h左右，

在月色与雪色之间，你是第三种绝色。