github Pages +hexo 搭建个人博客

sky-mxc总结 转载注明:https://sky-mxc.github.io/2016/09/29/buildBlogs

githubPages + hexo 搭建个人博客

hexo是基于git和Node.js的 必须先安装 git和Node.js;

node.js安装

Node.js 下载地址 http://nodejs.cn/download/ 选择好安装路径之后一路 next就可以了;
检测是否安装成功:

   node -v  

查看 npm是否安装 以前的版本没有集成npm,新版本已经集成了npn

npm -version

github Pages +hexo 搭建个人博客_第1张图片

hexo 安装

关于hexo 的安装 在官网有很详细的教程 :https://hexo.io/zh-cn/docs/

安装 hexo

npm install -g hexo-cli

github Pages +hexo 搭建个人博客_第2张图片

检测安装是否成功

hexo -v

github Pages +hexo 搭建个人博客_第3张图片

指定一个文件夹 必须是空目录 配置hexo

hexo init

github Pages +hexo 搭建个人博客_第4张图片
github Pages +hexo 搭建个人博客_第5张图片

安装完成后会生成一些文件 具体目录的用途 官网说的很清楚
- _config.yml 网站的配置信息。大部分的参数在这里配置
- package.json 应用程序的信息
- scaffolds 模板 文件夹
- source 资源文件夹 存放 资源 如图片之类的;除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
- themes 主题文件夹 Hexo很久主题生成静态页面

剩下的就是配置了 主要是在 _config.yml中配置 怎么配置 官网也解释的跟清楚了。这里说一下主要的,详情移步官网查看:https://hexo.io/zh-cn/docs/configuration.html

  • title 网站标题
  • subtitle 子标题
  • description 网站描述
  • language 使用语言
  • author 你的名字

github Pages +hexo 搭建个人博客_第6张图片

到这里基本上本地已经配置完了 现在可以 测试一下了

$ hexo g # 生成静态文件 生成文件在public 目录下
$ hexo s # 启动本地预览 hexo s --debug 命令可以用来调试

github Pages +hexo 搭建个人博客_第7张图片
github Pages +hexo 搭建个人博客_第8张图片

发布到github

首先在github上建一个repository 名字格式:[your_user_name.github.io]

例如我的 sky-mxc.github.io

要发布到 github 还得下载 一个组件( hexo-deployer-git) 执行命令

npm install hexo-deployer-git --save

还需要修改 _config.yml ;参考官网得说明
github Pages +hexo 搭建个人博客_第9张图片

我的配置如下:
github Pages +hexo 搭建个人博客_第10张图片

配置完之后 就可以发布到 github上了

hexo d  #发布

发布完成之后 就可输入网址查看了 这里贴一下我的吧:https://sky-mxc.github.io

github Pages +hexo 搭建个人博客_第11张图片

这里就基本搭建完成了

常用 命令

hexo clean # 清理之前的内容
hexo g # 生成静态文件
hexo d #部署
hexo s # 启动本地服务 ,可以通过 http://localhost:4000查看
hexo s --debug # 使用debug模式启动服务

更换主题

感觉默认主题有点low 关于主题的选择 这里贴个连接 https://hexo.io/themes/

我要更换的主题:http://theme-next.iissnan.com/getting-started.html

在要theme 目录下 clone

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

clone完成后 修改 _config.yml 将theme 的值修改为 next

github Pages +hexo 搭建个人博客_第12张图片

具体看官网配置:http://theme-next.iissnan.com/getting-started.html

这里就算搭建完成了 贴一下我的博客地址吧:https://sky-mxc.github.io

你可能感兴趣的:(hexo,hexo,pages+hexo,搭建个人博客)