美文网首页
使用 Hexo 在 Github 上搭建博客

使用 Hexo 在 Github 上搭建博客

作者: patiencing | 来源:发表于2017-04-05 03:49 被阅读0次

缘起

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


基本操作流程

  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 删除冗余描述

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

相关文章

网友评论

      本文标题:使用 Hexo 在 Github 上搭建博客

      本文链接:https://www.haomeiwen.com/subject/cnctattx.html