Phil Lee

Hexo是一款基于Node.js的静态博客框架

相对于我来说,vuepress有点麻烦而且坑极其多,坐了两天将近20小时,快把我折磨死了,每次以为好了,push的时候就各种error,网上都查不到,所以才换到hexo,可以方便的生成静态网页托管在GitHub上可以到其官网hexo了解更多的细节,由于是个人纪录而不是教程,所以不会很详细,其他东西就不再赘述,直接开始。


安装与配置

首先安装两种必要的工具GitNode.js,并检测是否成功,我都是按网上教程来的,没问题。

然后电脑里新建了一个Blog文件夹,进入文件夹右击空白处选择git bush here,接着使用npm安装hexo,输入:

1
$ npm install -g hexo-cli

等待安装完成,初始化一下博客,输入:

1
$ hexo init blog

会在Blog内生成一个blog文件夹,这个时候网站雏形就OK了,输入代码查看一下:

1
2
3
$ hexo new test_my_site
$ hexo g
$ hexo s

这时候在git bash中会有这个网址: http://localhost:4000,粘贴到浏览器地址栏就可以看到了。

推送到GitHub

这个时候我已经建好了一个名为philleecn.github.io的repo

尤其注意将repo作为自己博客的时候名字一定要一样,
比如我的GitHub用户名是philleecn,所以我的repo名也是。

将hexo与GitHub关联起来,打开blog目录的_config.yml文件,我是用VSCode打开的,在最后面修改为如下:

1
2
3
4
deploy: 
type: git
repo: https://github.com/philleecn/philleecn.github.io.git # 改为自己repo路径
branch: master

ctrl+s保存一下,开始安装git部署插件,依然是git bush输入:

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

完成后,输入:

1
2
3
$ hexo clean
$ hexo g
$ hexo d

然会回到浏览器打开repo路径看到已经上线

绑定自己的域名,

当然要绑定我的.com域名啊~~

进入购买域名的官网控制台进行解析,添加如下两条:IP是ping philleecn.github.io获得的

Type Host Value
A @ 192.~~.153
A www 192.~~.153
CNAME www philleecn.github.io

再进入github的repo设置界面设置我的域名,

然后进blog/source目录创建一个txt,写入leezycn.com,保存为叫CNAME的所有文件,此时进入blog目录git bush输入:

1
2
3
$ hexo clean
$ hexo g
$ hexo d

打开浏览访问leezycn.com看到已经好了。(实际上没有这么快,应该是地区的原因,我这里刷新的有点慢)

更换主题

在hexo的主题网站选择自己喜欢的主题,我选择material设计中的一款主题material-x

直接使用git命令clone到blog目录即可,输入:

1
git clone https://github.com/xaoxuu/hexo-theme-material-x

然后修改blog目录的_config.yml中的theme为material-x,

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: material-x

最后依然是那套命令

1
2
$ hexo g
$ hexo d

打开网站看下,完全ok!

接着就是自己修改,配置,填充(迁移)博客了。


几个常用的hexo命令:

1
2
3
4
5
6
7
8
9
10
11
12
$ npm install hexo -g # 安装Hexo
$ npm update hexo -g # 升级
$ hexo init # 初始化博客
$ hexo n "我的博客" # 新建文章
$ hexo g # 生成
$ hexo s # 启动服务预览
$ hexo d # 部署
$ hexo server # Hexo会监视文件变动并自动更新,无须重启服务器
$ hexo server -s # 静态模式
$ hexo server -p 5000 # 更改端口
$ hexo server -i 192.168.1.1 # 自定义 IP
$ hexo clean # 清除缓存,若是网页正常情况下可以忽略这条命令

到这里就完事了。。。


快去下方评论吧~~

 评论



博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本站使用 Material-x 作为主题 , 总访问量为 次 。
载入天数...载入时分秒...