美文网首页
使用 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