Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架。

環境配置

  1. linux下安裝nvm&Node.js
    github官網 https://github.com/creationix/nvm
1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
1
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

next:

1
vim ~/.bashrc

寫入下面代碼

1
2
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

安裝各種版本node

1
nvm i 6.11.0

nvm常用指令:

1
2
3
4
5
nvm uninstall 6.11.0     // 移除 node 6.11.0
nvm use 6.11.0 // 使用 node 6.11.0
nvm ls // 查看目前已安装的 node 及当前所使用的 node
nvm ls-remote // 查看目前线上所能安装的所有 node 版本
nvm alias default 6.11.0 // 使用 6.11.0 作为预设使用的 node 版本
  1. 安裝git

安装Hexo

新建文件夾blog,進入
使用npm命令安装Hexo,输入:

1
npm install -g hexo-cli

安装完成后,初始化博客,输入:

1
hexo init blog

查看網站

1
2
3
hexo new test_my_site
hexo g
hexo s

完成后,打开浏览器输入地址:
localhost:4000

常用Hexo命令
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n “我的博客” == hexo new “我的博客” #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令


發布到GitHub

  1. 創建倉庫
  2. 新建repo:XXXX.github.io
  3. 創建本地文件夾

    1
    2
    hexo init
    npm install
  4. 修改配置文件:_config.yml

    1
    2
    3
    4
    deploy:
    type:git
    repo:XXXXXXXXX(倉庫地址)
    branch:master

保存 回到终端执行

1
npm install hexo-deployer-git --save

安装一个插件,将写好的文章部署到github服务器上。
安装完成后在终端中依次执行如下代码:

1
2
3
hexo clean  清理缓存
hexo generate 进行渲染 简写 hexo g
hexo server 部署到本地(调试使用) 简写 hexo s。

然后浏览器输入 http://localhost:4000 就可以看到博客的效果。
(调试完毕后记得 control + C 关闭本地端口,不然下次就进不去啦)

调试完毕后

1
hexo deploy 简写为 hexo d

来部署到git服务器。

执行完以上操作后打开浏览器地址了输入http://你github名字.github.io就可以看看到效果啦。


更換主題

可以在此處寻找自己喜欢的主题 下载所有的主题文件,保存到Hexo目录下的themes文件夹下。

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

在_config.yml文件中修改:

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape //themes文件夹中对应文件夹的名称

然后先执行hexo clean,然后重新hexo g,并且hexo d,很快就能看到新主题的效果了~


其他設置

圖牀:https://www.flickr.com/
h5播放器:https://aplayer.js.org/#/
音樂外鏈:http://music.liuzhijin.cn/
數據分析:https://leancloud.cn/

reference

https://xuanwo.org/2015/03/26/hexo-intor/
https://zhuanlan.zhihu.com/p/26625249
https://juejin.im/post/5a6ee00ef265da3e4b770ac1