Hexo 搭建 GitHub 静态博客

Hexo 是一款静态博客框架,它允许你使用 Markdown 语法来写博客。静态博客对应的就是动态博客,或者说动态网站。动态网站,博主登录网站写博客,然后将博客内容保存到数据库中。读者通过 HTTP 请求博客地址,服务器从数据库中读取相关数据,动态渲染生成 HTML 页面,响应给读者。静态博客,博主在本地的编辑器里写博客文档,通过生成命令,会在本地生成博客的 HTML 页面,再通过部署命令,会将本地的 HTML 页面同步到远程服务器上。读者通过 HTTP 请求博客地址,服务器直接找到相关 HTML 页面,响应给读者。

准备

  1. 注册 Github 账号
  2. GitHub-服务器上配置-SSH-公钥
  3. 安装 Node.js
  4. 安装 Git

安装

执行以下命令,安装 Hexo。

$ npm install -g hexo-cli

建站

执行以下命令,创建项目目录。

$ hexo init blog # blog 是项目目录名

创建完毕,可以看到项目目录如下。

目录.png
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 访问博客。

默认主题.png

主题

在项目目录下输入以下命令来下载主题,我的项目目录为 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 访问博客。

next主题.png

写作

在写作之前,先修改一下网站配置文件 _config.yml,找到 post_asset_folder 字段,并将其值更改为 true,打开资源文件管理功能。

post_asset_folder: true

打开资源文件管理功能之后,每次新建文章,都会自动创建一个与文章的 Markdown 文件名相同的目录,用来存放该篇文章用到的资源:图片、CSS文件、JS文件等。

执行以下命令,生成一篇新的文章。

$ hexo new '文章标题'

新生成的文章保存在 source/posts 下,以 .md 结尾,表明这是一个 Markdown 文件,并且在 source/posts 下生成了一个与 Markdown 文件同名的资源目录。

文章目录结构.png

如果文章中需要引用图片,先将图片放到该篇文章的资源目录下,然后在文章中使用标签插件引用图片。

{% asset_img 图片名称 图片标题 %}

如果文章中需要引用其他文章,使用标签插件来引用其他文章。注意需要使用文章的文件名,而不是文章的标题,文件名不需要加后缀。

{% post_link 文章的文件名 %}

生成

如果只是在本地服务器访问博客,那么不需要执行生成命令,只需要通过 hexo server 启动本地服务器,然后通过浏览器访问 localhost:4000,就可以访问博客了。如果想要将博客部署到服务器上,则需要先在本地执行生成命令。所谓的生成,就是将本地的 Markdown 文件生成 HTML 文件,保存到本地项目目录下的 public 目录。如果没有 public 目录,执行生成命令的时候会自动创建 public 目录。

执行以下命令生成 HTML 文件。

$ hexo generate
生成目录结构.png

部署

所谓部署,就是将本地的 public 目录下的所有文件上传到服务器上,本文将会上传到 GitHub Pages 上。

首先需要在 GitHub 上新建一个仓库。

新建仓库.png

仓库名的格式必须为:GitHub账号.github.io。

新建仓库-2.png

复制仓库地址,注意我复制的是 SSH 协议的地址,而不是 HTTPS 协议的地址。因为我已经配置好了 SSH 公钥信息,所以以后本地和远程仓库进行同步的时候,不需要输入用户名和密码。如果使用 HTTPS 协议,每次进行 push fetch 操作的时候,还需要输入用户名和密码。

仓库地址.png

修改本地的博客配置文件 _config.yml,找到 deploy 选项,其中 type 选项的值设置为 gitrepo 选项的值为刚才复制的仓库地址。

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),在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容

  • 1 ​ 我们会误解痛苦的意义。 或许,我们都不喜欢现在的生活: 别人随便买个包,可能是我们挤公交辛辛苦苦上班一个月...
    息羽听阅读 864评论 0 2
  • 感觉一直睡不醒,大脑嗡嗡嗡 今天,主要写了一带一路的报告,与其说写不如说是拼凑拼凑。当然拼凑也是需要框架的,想这个...
    Jared_Wang阅读 199评论 0 2
  • 题目链接:Roman to Integer 题目 Given a roman numeral, convert i...
    MrFatt阅读 367评论 0 1
  • 小的时候姥姥家的旁边有一个军用机场,每次去姥姥家,都要去那里逮蚂蚱,每次都能看到好多的飞机起起落落,很是热闹,于是...
    萨叶色吉阅读 213评论 0 3