HEXO-01-本地服务
参考自HEXO官网:https://hexo.io/zh-cn/
什么是 Hexo?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
HEXO安装准备
安装 Hexo 只需几分钟时间,利用git bash键入命令行即可。
安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。
1 | $ npm install -g hexo-cli |
如果您的电脑中尚未安装所需要的程序,可以参考以下安装指示完成安装。
HEXO安装教程
1.下载安装旧版node.js,本次我用的是v6.9.0,下面这个网址那里有历史版本的node.js可以下载
记住下载.msi后缀名的安装包即可。
PS:之所以用历史版本,是因为最新版或较新的版本会出错。
2.下载安装git和Atom(文件编辑器),二者均可在360软件管家下载,也可以在相应官网下载。
3.在D盘新建HEXO文件夹用作本地仓库,里面的东西可以使用相关命令行上传到github和coding的仓库里。
4.在Blog文件夹里右键git bash here打开命令行窗口,依次敲下列命令,执行完一条再敲下一条命令。
PS:记住用git bash安装东西最好翻个墙,那样速度会快很多。
命令行 | 注释 |
---|---|
npm install hexo -g | 全局安装hexo |
npm install hexo-cli -g | 全局安装hexo-cli |
hexo init | 新建一个网站 |
npm install hexo-deployer-git –save | 安装hexo-deployer-git |
hexo generate | 生成静态文件 |
hexo serve | 启动本地服务器 |
5.可以在浏览器手动输入网址:http://localhost:4000/
至此,本地的HEXO安装成功!现在显示的是HEXO默认主题,接下来咱们可以先挑个好看的主题,主题官网:https://hexo.io/themes/,下面以NEXT主题为例。
NEXT主题安装
1.进入HEXO主题官网:https://hexo.io/themes/,搜索并点击NexT,进入其github源码页面
2.下载next主题压缩包
3.将下载好的压缩包解压到themes目录下,原来的压缩包就没用了,可以删除掉
4.将解压出来的文件夹重命名为next
5.接下来修改HEXO根目录下的配置文件,其名称是_config.yml
6.初始时HEXO用的是默认主题landscape,现在将它改成next,改好后记得按ctrl+s进行保存,否则改动不会生效!
7.接下来在Blog文件夹里右键git bash here打开命令行窗口,依次敲下列命令:
命令行 | 注释 |
---|---|
hexo g | hexo generate的简写,生成静态文件 |
hexo s | hexo server的简写,启动本地服务器 |
8.浏览器打开http://localhost:4000可以看到主题更换成功!
- 但是这个主题貌似不怎么漂亮,那是因为现在看到的只是next主题的三个样式里的其中一个默认样式,接下来到next目录下修改_config.yml配置文件,不要进错目录!
10.将默认样式注释掉,启用Pisces样式,别忘了按ctrl+s保存,否则改动不会生效!
11.浏览器打开http://localhost:4000可以看到主题样式更换成功!接下来可以参考网上教程美化主题,给自己加个头像等。