Fork Me

Hexo+Coding搭建个人Blog


前言

让我们一起来使用Hexo,在Coding搭建属于自己的博客吧!

如果你还不知道什么是Hexo,Jeklly?
附上:Hexo Jeklly

问:为什么不使用GitHub搭建?
答:Coding是国内的GitHub,访问快很多,中文友好咯,如果你会了Coding搭建,GitHub也没什么问题啦,还可以同时部署呢。

问:为什么使用Hexo,而不用Jeklly?
答:Hexo简单,依赖少,只需要安装node.js,生成静态页面速度快,主题多,用的人也多。Jeklly?没用过。。。听说很折腾直接pass了,如果你有兴趣可以试试。

搭建的前提条件

  1. git:免费、开源的分布式版本控制软件。
  2. node.js:基于 Chrome V8 引擎的 JavaScript 运行环境。
  3. Coding:一个面向开发者的云端开发平台,提供 git/svn 代码托管,代码质量分析等等。

git传送门: (@_@)
node传送门: ┏ (゜ω゜)
Coding传送门: (๑╹◡╹)ノ

git和node.js的安装都是很简单的,没有什么特殊的要求,直接默认Next。

配置Coding

首先,当然是注册一个Coding账号,然后完成验证邮箱,跳转到我的首页,创建新项目,如下:

温馨提示1:
「Coding Pages」 分为「用户 Pages」与「项目 Pages」两种类型。
「用户 Pages」可以通过 {user_name}.coding.me 形式的 URL 直接访问,适合用作个人或组织的演示网站:
「项目 Pages」需通过 {user_name}.coding.me/{project_name} 形式的 URL 访问,适合用作项目的演示网站。

既然是用来做Blog,当然是直接XXX.coding.me,就能访问好啦。SO项目名称这里我填:Ghouxk.coding.me。

温馨提示2:
普通会员,2个私有项目,128M Git仓库容量。
完善个人信息,免费升级银牌会员。
银牌会员,5个私有项目,256M Git仓库容量,受限的 Pages 自定义域名
经验总结告诉我,如果你的想自定义域名,必须至少是银牌会员。
什么不够用?充值你可以变的更强、
这里我使用公共,来做演示。

文本框里,为项目描述
启用README.md,为创建项目说明md文件
创建项目,跳转后点击「Pages 服务」,就能看到blog地址啦。

配置SSH

SSH:Secure Shell(缩写为SSH),由IETF的网络工作小组(Network Working Group)所制定;SSH为一项创建在应用层和传输层基础上的安全协议,为计算机上的Shell(壳层)提供安全的传输和使用环境。
如果你没有配置SSH,直接上传你会看到:remote: Coding.net Tips : [Permission denied!] 报错。

1
2
3
4
5
6
#检测SSH Key
ls -al ~/.ssh
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
Your identification has been saved in /Users/you/.ssh/id_rsa.
# Your public key has been saved in /Users/you/.ssh/id_rsa.pub.

找到你.ssh隐藏文件,如我的:C:\Users\M.ssh
id_rsa是私钥,id_rsa.pub是公钥。
可以这样:

1
2
3
#复制ssh公钥
clip < ~/.ssh/id_rsa.pub
#将这条命令粘贴到Git Bash的快捷键是Shift+Ins。

也可以直接打开id_rsa.pub,复制里面的全部内容,粘贴到:

参考:coding帮助文档

SSH这个里有个坑:多个ssh key,如果你有github,coding,oschina,的ssh key且使用的邮箱也不同怎么办呢?
答:且听下回分解…

安装Hexo

前提:安装好了git和node.js

选择一个位置安装Hexo,如我的:D:\program files\MyBlog\Hexo-Blog
在Hexo-Blog目录里,鼠标右击–>Git Bash Here,输入如下:

1
2
3
#查看node、git是否安装成功
npm -v
git version

由于很多境外网站被墙,无法访问, 这里,我们使用 淘宝nmp镜像

1
2
3
4
5
6
7
8
#使用淘宝npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
#安装Hexo脚架
cnpm install -g hexo-cli
#当前文件下初始化hexo
hexo init

如果安装成功你会看到,最后一句:INFO Start blogging with Hexo!

Hexo 3.0 把服务器独立成了个别模块,您必须先安装 hexo-server 才能使用。

1
2
3
4
5
6
7
8
#安装服务器
npm install hexo-server --save
#启动服务器 缩写 hexo s
hexo server
#如果遇到端口错误,可以 - p 修改端口
hexo s -p 5050

PS:默认地址http://localhost:4000 ,在服务器启动期间,Hexo会监视文件变动并自动更新。比如:修改css或html后,刷新页面可以看到修改后页面。

如果一切顺利,你就会看到:

更换主题并部署

初次部署

必须安装,这个部署插件。

1
2
#在Hexo-blog的目录下安装
npm install hexo-deployer-git

然后找到_config.yml配置文件,下拉最末尾,找到并修改deploy如下:

1
2
3
4
5
6
deploy:
type: git
#更新说明
message: "更新啦"
repo:
coding: https://git.coding.net/chouxk/chouxk.coding.me.git,master

注意:<空格>url
hexo的配置,都要在前面加个空格!否则会报错!
配置完成后打开coding项目,就能看到生成后的html文件,浏览器输入 http://Ghouxk.coding.me 你的博客出现了!

关于_config.yml文件参数,可参考:Hexo配置

更换主题

之前说过Hexo的优点之一,主题多且美,总有一款合适你,不满意的话自己修改哦或者你做一个主题吧!
让我来看看github上的hexo主题star情况,供大家参考:
贴图时间:2017/07/21 11:45:01

我的博客用就是————Next!
所以这里换一个试试~~
打开Hexo-blog\themes,可见landscape是默认的主题
右击–>Git Bash Here:

1
2
#克隆
git clone https://github.com/litten/hexo-theme-yilia yilia

打开_config.yml,搜索theme,找到并修改为,theme: yilia
强调x2:theme:<空格>yilia!

1
2
3
4
#清除
hexo clean
#更新上传
hexo g -d

请看~ http://Ghouxk.coding.me

Hexo常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#新建一个网站。
hexo init [folder]
#新建一篇文章。
hexo new [layout] <title>
#清除静态文件
hexo clean
#生成静态文件 缩写 hexo g
hexo generate
#部署网站 缩写 hexo d
hexo deploy
#启动服务器 缩写 hexo s
hexo server
#组合命令,生成并部署
hexo g -d

PS:每次生成文件前,最好先hexo clean,避免蜜汁错误。

总结

  • 一直以来都想着,拥有一个自己的博客,曾经想过各种方式,但是困难重重,直到偶然遇到Hexo变的义无反顾。
  • 因为很适合我这种,一穷二白三折腾的人啊。
  • 本着记录折腾,如果能帮到你,非常荣幸。
  • 我的心愿是:世界和平。


时间:2017/07/21 15:30:28