Hexo 是一款静态博客框架,它允许你使用 Markdown 语法来写博客。静态博客对应的就是动态博客,或者说动态网站。动态网站,博主登录网站写博客,然后将博客内容保存到数据库中。读者通过 HTTP 请求博客地址,服务器从数据库中读取相关数据,动态渲染生成 HTML 页面,响应给读者。静态博客,博主在本地的编辑器里写博客文档,通过生成命令,会在本地生成博客的 HTML 页面,再通过部署命令,会将本地的 HTML 页面同步到远程服务器上。读者通过 HTTP 请求博客地址,服务器直接找到相关 HTML 页面,响应给读者。
准备
- 注册 Github 账号
- GitHub-服务器上配置-SSH-公钥
- 安装 Node.js
- 安装 Git
安装
执行以下命令,安装 Hexo。
$ npm install -g hexo-cli
建站
执行以下命令,创建项目目录。
$ hexo init blog # blog 是项目目录名
创建完毕,可以看到项目目录如下。
node_modules # npm 包目录
scaffolds # 模板目录,新建文章时,会根据 scaffolds 创建文章的初始内容
source # 资源目录,创建的文章会保存在该目录下,博主在该目录下编辑文章
theme # 主题目录,下载的主题会保存在该目录下
_config.yml # 网站配置文件
.gitignore # 配置 Git 忽略的文件类型
db.json # 网站数据缓存文件
package-lock.json # npm 包的依赖文件 (npm 5.0 以上的版本才有该文件)
package.json # npm 包依赖文件
执行以下命令,启动本地服务器。
$ hexo server
通过 localhost:4000 访问博客。
主题
在项目目录下输入以下命令来下载主题,我的项目目录为 blog 目录,我选择的主题为 NexT。
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
打开网站配置文件 _config.yml
,找到 theme
字段,并将其值更改为 next
。
theme: next
next 主题有几种布局方式,我选择了 Gemini,打开主题配置文件 themes/next/_config.yml
,找到 # Schemes
,想选择哪个选项,就将该选项前的注释符 #
去掉。
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
在终端输入以下命令清除缓存,并重新启动本地服务器。每次修改网站配置文件 _config.yml
的时候,都需要重新启动本地服务器才能使配置生效。
$ hexo clean
$ hexo server
通过 localhost:4000 访问博客。
写作
在写作之前,先修改一下网站配置文件 _config.yml
,找到 post_asset_folder
字段,并将其值更改为 true
,打开资源文件管理功能。
post_asset_folder: true
打开资源文件管理功能之后,每次新建文章,都会自动创建一个与文章的 Markdown 文件名相同的目录,用来存放该篇文章用到的资源:图片、CSS文件、JS文件等。
执行以下命令,生成一篇新的文章。
$ hexo new '文章标题'
新生成的文章保存在 source/posts
下,以 .md 结尾,表明这是一个 Markdown 文件,并且在 source/posts
下生成了一个与 Markdown 文件同名的资源目录。
如果文章中需要引用图片,先将图片放到该篇文章的资源目录下,然后在文章中使用标签插件引用图片。
{% asset_img 图片名称 图片标题 %}
如果文章中需要引用其他文章,使用标签插件来引用其他文章。注意需要使用文章的文件名,而不是文章的标题,文件名不需要加后缀。
{% post_link 文章的文件名 %}
生成
如果只是在本地服务器访问博客,那么不需要执行生成命令,只需要通过 hexo server
启动本地服务器,然后通过浏览器访问 localhost:4000,就可以访问博客了。如果想要将博客部署到服务器上,则需要先在本地执行生成命令。所谓的生成,就是将本地的 Markdown 文件生成 HTML 文件,保存到本地项目目录下的 public 目录。如果没有 public 目录,执行生成命令的时候会自动创建 public 目录。
执行以下命令生成 HTML 文件。
$ hexo generate
部署
所谓部署,就是将本地的 public 目录下的所有文件上传到服务器上,本文将会上传到 GitHub Pages 上。
首先需要在 GitHub 上新建一个仓库。
仓库名的格式必须为:GitHub账号.github.io。
复制仓库地址,注意我复制的是 SSH 协议的地址,而不是 HTTPS 协议的地址。因为我已经配置好了 SSH 公钥信息,所以以后本地和远程仓库进行同步的时候,不需要输入用户名和密码。如果使用 HTTPS 协议,每次进行 push fetch 操作的时候,还需要输入用户名和密码。
修改本地的博客配置文件 _config.yml
,找到 deploy
选项,其中 type
选项的值设置为 git
,repo
选项的值为刚才复制的仓库地址。
deploy:
type: git
repo: git@github.com:feixueliantian/feixueliantian.github.io.git
第一次部署之前,需要安装 hexo-deployer-git 插件。
$ npm install hexo-deployer-git --save
执行部署命令。
$ hexo deploy
请耐心等待一会,部署结束之后,会将本地的 public 目录的内容上传到 GitHub 上的仓库中,你通过 用户名.github.io
来访问 GitHub 上的博客页面。
以后每次你在本地新建、修改、删除一篇博客的时候,都可以通过执行 hexo g -d
命令,来将本地博客的变化同步到 GitHub 的仓库中。该命令是生成和部署两个命令的简写形式,先执行生成命令,然后再执行部署命令。
命令
总结一下使用到的 Hexo 的常用命令:
$ hexo i blog # 创建项目目录,i 是 init 的简写
$ hexo new 'article_title' # 新建文章
$ hexo s # 启动本地服务器,s 是 server 的简写
$ hexo g # 生成 HTML 文件,g 是 generate 的简写
$ hexo d # 部署到服务器,d 是 deploy 的简写
$ hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public),在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。