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 keyGitHub
登录到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左右,

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