什么是Hexo?Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。堪称在座各位喜欢Markdown的优雅人士博客建站神器哟!
1. Quick Start
1.1 创建存放Github Pages的仓库
Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 提供的域名 github.io 或者自定义域名来发布站点。
需要Github账号,请登录https://github.com/ 注册。
登录了自己的github账号后,可以安装下图一样,创建自己的GitHub Pages仓库名[参考https://pages.github.com/ ],[PS] 仓库名repository name需要约定为: 你的账号名.github.io
创建好博客项目仓库后,可以通过git命名下载到本地,并编辑一下README.md从本地提交到GitHub,这样做主要是使本地文件与Github关联起来,方便后面hexo deploy,直接部署博客内容到GitHub进行更新。
$ git clone https://github.com/yourGithubName/yourGithubName.github.io
$ vim README.md
# REAMME.md上可以简单写一些博客介绍啥的
$ git config --global user.email "[email protected]"
$ git config --global user.name "Your Name"
$ git add ./
$ git commit -m 'test'
$ git push -u origin master
Username for 'https://github.com': Builder34
Password for 'https://[email protected]':
1.2 Hexo安装
安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
- Node.js (请看https://nodejs.org/zh-cn/)
- Git (请看https://git-scm.com/downloads)
安装好上面2个程序后,可以进行hexo的安装了:
$ npm install -g hexo-cli
1.3 Hexo初始化
安装 Hexo 完成后,我们可以在本地新建一个文件夹如:builder34.github.io(这个目录是我们Github Pages博客项目的目录),假如我的文件夹路径为/home/test/builder34.github.io,建站初始化命令可以如下:
$ cd /home/test/builder34.github.io
$ hexo init ./
$ npm install
$ hexo generate
下面介绍几个常用的hexo命令(括号里面的命令为缩写形式,效果一样):
1. hexo generate(hexo g) #生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
2. hexo new "postTitle" #新建博客文章
3. hexo new page "pageTitle" #新建1个页面
4. hexo server(hexo s) #启动本地web服务预览(加参数--debug,用于调试,如:hexo s --debug)
5. hexo deploy(hexo d) #部署播客到远端(比如Github,coding,heroku等平台)
在命令行中输入hexo s --debug
后,运行成功后,可以在浏览器中输入:http://localhost:4000看到自己新建的博客了。
1.4 更改主题
一般我们初始化博客的文件夹后,文件结构大概如下:
$ ll
total 1352
-rw-r--r-- 1 builder34 staff 32B 4 14 01:34 README.md
-rw-r--r-- 1 builder34 staff 2.3K 6 25 10:40 _config.yml
-rw-r--r-- 1 builder34 staff 32K 6 26 15:50 db.json
-rw-r--r-- 1 builder34 staff 458K 6 26 15:56 debug.log
drwxr-xr-x 293 builder34 staff 9.2K 6 25 10:42 node_modules
-rw-r--r-- 1 builder34 staff 110K 6 22 23:59 package-lock.json
-rw-r--r-- 1 builder34 staff 564B 6 22 23:59 package.json
drwxr-xr-x 14 builder34 staff 448B 6 25 10:40 public
drwxr-xr-x 5 builder34 staff 160B 4 17 23:12 scaffolds
drwxr-xr-x 3 builder34 staff 96B 6 25 10:57 source
drwxr-xr-x 6 builder34 staff 192B 6 25 11:33 themes
themes文件夹是我们博客主题的存放地方,下面我推荐一个主题:BlueLake
$ cd themes/
$ git clone https://github.com/chaooo/hexo-theme-BlueLake.git ./BlueLake
$ npm install [email protected] --save
$ npm install hexo-renderer-stylus --save
(该主题更细致的配置,请登录上面这个github网址,阅读README.md进行定制化配置)
在Hexo配置文件($your_blog_path/_config.yml)中把主题设置修改为BlueLake。
theme: BlueLake
完成配置后,执行下面语句,重新打开http://localhost:4000 可以看到博客以一个新的主题展现了
$ hexo g
$ hexo s --debug
1.5 hexo部署到Github
配置$your_blog_path/_config.yml文件的Deployment:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/your_githubName/your_githubName.github.io.git
通过下面的命名进行博客静态页面的生成,以及部署到远端Github Pages
#删除静态文件,即 public 文件
$ hexo clean
#生成静态文件,即 public 文件
$ hexo generate
#部署到远程站点
$ hexo deploy
#也可以使用组合命令(替代上面2条命令):生成静态命令并部署到远程站点
$ hexo deploy -g
使用 hexo deploy 命名部署到github失败,报上面的错误时,安装下面的插件即可解决:
$ npm install hexo-deployer-git --save
至此,Hexo+Github Pages构建个人博客网站已经基本完成了。可以通过网页访问自己的博客地址如:https://builder34.github.io
2.设置博客自定义域名
进入自己博客的repository仓库,通过类似如下的页面进行设置:
进入了settings页面后,往下拉直到看到Github Pages模块:
所填的自定义域名是需要自己已经在万网上注册的了,并且如果勾选了 Enforce HTTPS 的话,你的域名是需要ssl证书的哟。
3.注意事项
3.1 上传README.md并防止被渲染成文章
#在博客根目录下,新建或编辑你的README.md文件
$ vim README.md
$ mv README.md ./sources
#修改_config.yml文件,设置不渲染的文件
$ vim _config.yml
skip_render: README.md
3.2 每次hexo deploy
后Github Pages自定义域名会被重置的问题
需要在sources目录下新建CNAME文件(注意为全大写无后缀的文件哦),文件内容为你需要映射到的自定义域名:
$ vim CNAME
blog.monbuilder.top
$ mv CNAME ./sources