Hexo简介
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown(或其他渲染引擎)解析文章,在极短的几秒钟内,就可利用靓丽的主题生成静态网页,特别适合搭建个人博客。Hexo以其简单、高效而且主题丰富多彩而著名,迅速地占据了一部分市场,值得尝试。
本博客就是采用Hexo v3.9.0 + GitHubPages + NexT v7.3.0 主题进行搭建的!
安装环境
Hexo在搭建时需要Node.js的环境支持,同时需要命令终端的支持。针对不同的操作系统Windows、Linux或者Mac,在配置搭建环境时要下载安装对应的版本,在Windows系统下,建议使用GitBash。Mac和linux都是自带的有BashShell终端。
由于Node.js是国外的网站,有时候由于网络的一些因素,容易影响我们采用npm对资源的访问速度,故此可以采用国内的阿里巴巴的镜像,可以加快访问的速度以及效率。首先在终端采用npm命令安装镜像,成功后就可以采用cnpm命令代替npm命令了。
- npm install -g cnpm --registry=https://registry.npm.taobao.org
安装Hexo
在下载、安装并配置好环境后,就可以进行安装Hexo。首先打开BashShell终端,创建一个空的目录来作为整个博客项目的工作空间,然后再使用命令进行安装hexo,安装成功后就对Hexo进行初始化,初始化成功后可以查看整个工作空间的目录结构和文件树。
- 创建一个空文件夹blog:
$ mkdir blog - 在终端使用命令安装Hexo:
$ npm install -g hexo-cli - 初始化Hexo:
$ hexo init - 查看hexo生成的目录:
$ cd blog
$ ls
了解Hexo的文件目录架构以及文件目录的作用,这是很有必要的,特别对于配置Hexo的一些信息,然后在结合Hexo的官网的配置说明,就可以配置成自己想要的。
.
├── .deploy #部署文件夹
├── public #html源码,hexo g生成
├── scaffolds #模板
├── scripts #扩展脚本
├── source #文章源码
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
| ├── next #NexT主题
├── _config.yml #博客配置
└── package.json #应用程序数据
配置NexT主题
在Hexo的官网可以找到许许多多的主题,寻找适合自己喜欢的主题,可以通过BashShell终端进行下载,也可以下载后解压到站点的主题文件夹下即可,然后打开站点的配置文件,搜索到theme将其值修改为自己下载的主题名即可。
- 在终端使用命令下载主题:
$ git clone https://github.com/theme-next/hexo-theme-next themes/next ./blog/themes/
- 修改配置文件_config.yml:
$ vim _config.yml
将theme的值由landscape修改为hexo-theme-next即可
了解NexT主题的文件目录架构以及文件目录的作用,这也是很有必要的,特别对于配置NexT主题的一些信息,然后在结合NexT主题的官网配置说明,就可以配置成自己想要的主题了。
说明提示一点,NexT主题V7.3.0版本后,将以前版本的用户自定义配置custom的功能的路径修改了,在主题配置文件中的custom_file_path:这一段有说明。Define custom file paths. Create your custom files in site directory source/_data
and uncomment needed files below.
├── .github #github信息
├── languages #多语言
| ├── _en.yml #默认语言
| └── zh-CN.yml #简体中文
| └── zh-TW.yml #繁体中文
├── layout #布局,根目录下的*.swig文件是对主页,分页,存档等的控制
| ├── _custom #可以自定义的模板,覆盖原有模板
| | ├── head.swig #文首样式
| | ├── header.swig #头部样式
| | ├── sidebar.swig #侧边栏样式
| ├── _macro #可以自定义的模板,覆盖原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打赏模板
| | ├── sidebar.swig #侧边栏模板
| ├── _partial #局部的布局
| | ├── head #头部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主页面模板
| ├── index.swig #主页面模板
| ├── page #页面模板
| └── tag.swig #tag模板
├── scripts #script源码
| ├── tags #tags的script源码
| ├── marge.js #页面模板
├── source #源码
| ├── css #css源码
| | ├── _common #*.styl基础css
| | ├── _custom #*.styl自定义局部css
| | └── _mixins #mixins的css
| ├── fonts #字体
| ├── images #图片
| ├── js #javascript源代码
| └── lib #引用库
├── _config.yml #主题配置文件
└── README.md #说明文件
配置GitHub的Page:
首先要有一个GitHub账号,其次创建一个规定的GitHubPages主页仓库。然后就可以对站点的配置文件进行修改了,添加如下内容即可。而且不仅可以使用GitHub的Pages进行托管,也可以使用国内的Coding的Pages进行托管,同时也可以使用两者进行负载均衡,进行国内外的分流托管。
- 修改配置文件_config:
在文件末尾的deploy添加内容:
deploy:
type: git
repo:
git@github.com:github_user/github_user.github.io.git
git@git.coding.net:coding_user/coding_user.git
branch: master
写博客文章
编写自己的博客文章(采用markdown格式),可以在终端采用Vim进行编写,也可以用Notepad++类似的编辑器编写,只要博客文章所在的路径是正确的,就可以被Hexo识别并读取到即可。
- 在终端命令创建文章:
$ hexo new file_name - 使用Vim等编辑器编辑文章
更新Hexo并上传
在更新上传之前可以在本地进行预览一下,即就是先清除clean、生成generate、然后start启动本地,在本地的4000端口查看即可。没有问题后,在进行上传deploy。当然这些常用的命令都是可以编写一个shell脚本进行的,因为每次都需要的,强烈建议写成一个shell脚本。
- 在终端依次使用命令:
$ hexo clean # 清理hexo的缓存静态文件资源
$ hexo g # hexo生成静态资源
$ hexo s # hexo启动本地访问
$ hexo d # hexo上传指定的网站
终端访问
通过PC端浏览器或者智能终端浏览器访问即可。
- 本地访问:
http://localhost:4000 - 访问地址:
https://2694048168.github.io
注意说明
- 在Windows系统下,终端采用GitBash即可
- 在Linux系统下,终端采用自带的Bash即可
- Linux系统用户需要注意命令的权限问题
- 在Mac系统下,终端采用自带的Bash即可
- 整个操作过程全部都在blog目录下,注意操作命令的路径问题
- 博客文章格式采用Markdown
- hexo s 命令是启动本地hexo,访问通过http://localhost:4000
- 关于github的page详情查看:github.pages