使用 Hexo 在 Github 上搭建博客

缘起

今天博客出现致命问题, 重新配置的过程中翻阅之前的笔记, 顺带整理了一下, 分享在这里.


基本操作流程

  1. 前提:
  2. 安装 hexo: npm install hexo -gnpm install hexo-cli -g
  3. 上 Github 创建 repository: 名称设置为 yourname.github.io. 比如, 我的 Github 账户用户名是 Patiencing, 那么名称就是 Patiencing.github.io;
  4. 克隆github远程仓库: 进入你要放置博客数据的文件夹, git clone https://github.com/yourname/yourname.github.io.git(注意, 这里的 yourname 要换成你的github名称);
  5. 初始化: hexo init your_folder(your_folder是你要放置博客数据的文件夹名称), cd your_folder, npm install hexo-deployer-git --save, hexo generate
  6. 基本配置: 找到博客文件夹根目录中的 _config.yml, 找到文件中 deploy: 这一行, 改成:
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master
  1. 博客部署: hexo deploy, 之后就可以在浏览器地址栏输入 yourname.github.io (这里的
    yourname 要换成你的 github 名称), 就可以看到你的博客了
  2. 发布文章: hexo new page "your_post_title" 是创建文章, 写完博客, 再 hexo generatehexo deploy 就可以在你的博客中看到更新了

常用命令

hexo new page <filename>    //创建草稿
hexo new draft <filename>    //创建草稿
hexo publish <filename> //发表草稿
hexo generate //hexo对文章进行处理, 生成静态文件
hexo server //启动本地服务器,可以在本地查看博客
hexo server --debug //生成本地服务器, 检查错误并记录到 debug.log,可以用来在正式发布前进行调试
hexo deploy //部署博客, 本质就是使用git推送到github

写作约定

写作语法

Hexo 的写作语法基于 Markdown.

使用 hexo new page "your_post_title" 命令会在 /source/_posts 下创建 your_post_title.md 文件.


基本信息

在文章最开始写下基本信息:

--- 
title: my_title     //博客标题
categories: my_cat  //博客所属的类别
tags: [tag01, tag02] //博客的标签, 多标签用中括号包含, 用逗号分隔
permalink: my_url   //自定义url地址, 主要是为了解决中文标题在url中被转码, 所以使用permalink设置英文url地址
comments: false //普通文章不需要这个设置, 对于一些不需要评论的可以设置`comments`为`false`
--- 

摘要效果

想要下面这种"摘要"效果, 只需要在文章中插入 `` 即可.



博客的配置

博客文件夹根目录中的 _config.yml 就是博客的配置文件


站点基本信息

title:  //博客标题
subtitle:   //博客副标题
description:    //博客描述
author: //作者
language:   //博客语言, 中文使用zh-Hans
timezone:   //时区, 中国是Asia/Shanghai
avatar: //设置头像,后面跟着头像图片的url (默认没有这个选项, 自己手动加上)

文章归档

default_category: others    //文章默认归档
category_map:   //文章栏目,下面是示例
  职人: crafts
  生活: life
  其它: others

url 地址重写

url: https://yourname.github.io/    //这是博客的主域名
root: / //首页的位置, 默认就是根目录
permalink: :year/:month/:title.html //这是博客文章的url地址的前缀, 注意后面可以加上".html"

整个url地址由3部分组成:

  1. 这里的 url: https://yourname.github.io/
  2. 这里的 permalink: :year/:month/:title.html
  3. 这里的 :title 默认对应的就是前面"写作约定 -> 基本信息"中的 title: my_title, 因为我们一般用中文标题, 而中文标题在 URL 中会被转码, 所以更推荐使用英文, 写在"写作约定 -> 基本信息"中的 permalink: my_url

比如, 这篇文章的在我的 Hexo博客上的 URL 地址是
https://patiencing.github.io/2016/11/build_a_blog_with_hexo.html.


百度站点认证和站点地图

听说 GitHub 阻拦了百度搜索引擎的爬虫, 如果确实如此, 那么设置"百度站点认证"和"站点地图", 对于在 GitHub上搭建的 Hexo博客的意义就不大了, 不过对于有自己域名空间的人来说还是很有意义的, 而且这个方案是自己花时间摸索出来的, 所以记录下来供大家参考.

百度站点认证

  1. 进入百度站长平台;
  2. 注册自己的博客站点(https://yourname.github.io/)
  3. 验证时选择" HTML 验证", 将百度提供的验证代码( <meta name="baidu-site-verification" content="xxxxxx" /> )插入首页的 <head></head> 中; 我使用的是 Next 主题, 它的首页在/themes/next/layout/_layout.swig. 插入后的代码:
<html class="{{ html_class | lower }}">
<head>
  {% include '_partials/head.swig' %}
  <meta name="baidu-site-verification" content="xxxxxx" />
  <title>{% block title %}{% endblock %}</title>
</head>

Bingo! 通过百度站点验证:


如果使用的是 Hexo 默认的 landscape 主题, 那么首页文件在 /themes/landscape/layout/_partial/head.ejs

生成站点地图

  1. 安装插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
  1. 在博客文件夹根目录的 _config.yml 中添加如下代码,自动生成 sitemap 文件
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

之后在 /public 文件夹会发现多出了 baidusitemap.xmlsitemap.xml, 前一个文件适合提交给"百度", 后一个可以提交给 "Google"


本地写作工具

Mac 上推荐 Mweb, 一款国人出品的 Markdown 编辑器. 对 Hexo 做了优化, 能够很方便得插入图片, 可以实时预览 Markdown, 而且能够很方便得上传图片到"七牛".


参考资料

Hexo官网
Hexo官方文档


文章历史

  • 2016/11/10 (第一次发布)
  • 2017/06/19 删除冗余描述

如果你觉得我的文章对你有用, 请打个"喜欢", 或者给些改进的建议 _

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

推荐阅读更多精彩内容