美文网首页工具Hexo
Hexo+github 超详细blog自建指南

Hexo+github 超详细blog自建指南

作者: Konfido | 来源:发表于2017-02-08 15:30 被阅读420次

    更新后的指南

    不管是不是小白,也不管是因为心血来潮还是深思熟虑后想建个博客,既然看到了这篇文章,那就证明了你已经迈出了第一步,按着教程一步步来,不会的Baidu、Google下,相信你一定能成功的!

    此文适用条件:

    • Windows用户,Mac用户操作基本类似
    • 想拥有独立博客
    • 完全刚开始着手建Blog,或尝试了下结果遇见各种大坑
    • 爱折腾,不怕麻烦 (虽然此文会让你避开大坑,省去不少时间,但客观上说依然比较耗神)

    首先预览下完成后的博客主页:konfido.github.io

    初阶折腾

    安装必要软件

    • Notepad++
      Windows代码编辑器,各种好用!虽然用电脑自带的记事本也能编辑代码,但...相信我你会自己回来下载这个软件的。
    • Haroopad/Typora
      Mackdown文本编辑器,用于编写博客及修改部分hexo文档。这两款是目前看到windows环境下比较顺眼、顺手的;Mac下可以用Mou。

    [注意] 如果Harroopad在用的过程中出现打不出汉字的情况,参考下面的链接文章解决:Haroopad 中文不显示

    基本搭建

    按下面的链接文章进行基本的搭建:手把手教你用Hexo+Github 搭建属于自己的博客
    可以总结为以下步骤:

    1. 安装Node.js
    2. 配置Git环境
    3. github账户的注册和配置
    4. 安装hexo
    5. 配置hexo
    6. 将hexo部署到github page上
    7. 写文章,生成,部署

    此时,已经可以按hexo默认的的landscape主题使用自己的博客了,但是为了使博客更加美观、好用,需继续进行优化。

    1. 安装并启用NexT主题
    2. 设置主题
    3. 扩展插件

    此时,已经将主题换成了更简洁美观的NexT主题,并进行了初步的个性化设置。

    [注意] 如果对域名没有明确的需求,直接使用github二级域名即可,如果以后发现博客写的比较多或者有其他实际需求,再去购买域名。

    中阶完善

    1. 添加首页链接

    • 此时点击页面上的“首页”链接会出现404页面,解决办法:
      打开主题配置文件,找到menu字段,将home行改为
      home: /konfido.github.io(设置为自己的博客地址或其他主页)

    2. 文章增加tags(标签)和categories(分类)

    • 打开主题配置文件,将menu下tags和category前的#去掉,保存。
    • 如果想改变要显示的内容,可以进入hexo->themes->next->langueges,打开zh-Hans.yml,修改对应项要显示的内容,然后保存。
    • 使用hexo new XXX指令添加新文章的时候,可以使用以下方法默认在新建的md文件中添加categories 以及 tags 标签:进入hexo->scaffolds,打开post.md,在横线以上添加categories:tags:即可。

    [注意] 此时点击博客上的“分类”或“标签”连接会出现404页面,因为还未设置index文件,解决方法:

    • 在命令行中输入$ hexo new page tags,此命令会在sources/tags中新增index.md文件
    • 打开这个文件编辑为:
    title: tags
    date: 2017-02-08 14:10:27
    type: "tags"
    
    • 同理,在命令行中输入$ hexo new page categories,此命令会在sources/categories中新增index.md文件
    • 打开这个文件编辑为:
    title: categories
    date: 2017-02-08 14:12:18
    type: "categories"
    

    此后你发布的文章中所有的标签及分类就可点击标签页及分类页查看了。

    3. 增加“阅读全文“按钮

    • 在文章合适位置处添加:``即可。

    进阶配置扩展

    参考theme-next使用文档

    1. 增加评论系统

    • 进入theme->next->layout->_scripts->third-party,打开comments.swig,可以发现目前最新版的next主题已经集成了多说、Disqus,hypercomments,跟帖,友言等多种评论系统。
    • Disqus据其他文章说因为国内网络环境的因素不太稳定,hypercomments评论界面比较简洁,但是需要登录社交账号才能评论,而登录候选项基本都是国内不存在的社交APP。
    • 综合来看比较推荐多说。
      官方文档的说明注册多说账户并设置即可。

    [注意]站点配置文件中添加的duoshuo_shortname字段即多说域名注册时空白处所填内容。
    [注意]:修改了next主题的部分css或其他代码之后,通过hexo s -g 可以在本地查看效果,但是通过hexo d -g发布之后,然后打开博客却看不到修改后的样式,解决方法:

    • hexo clean
    • 清理浏览器缓存

    2. 增加分享按钮

    官方已集成JiaThis,百度分享,多说分享,AddThis等,如果已注册多说账户,可直接选择多说分享即可。开启方法:
    编辑主题配置文件(_config.yml),找到或添加duoshuo_share: true字段。

    3. 让文章显示阅读次数

    阅读次数统计(LeanCloud):按提示注册LeanCloud账户并进行相关配置即可。

    4. 显示评论者的设备型号等相关信息

    在主题配置文件中,找到duoshuo_info字段,去除其前#,enable后改为true,多说的user_idhttp://dev.duoshuo.com 去找,是一串十几位的数字。

    5. 搜索服务

    添加LocalSearch即可,其他按官方文档自行添加

    6. 增加文末打赏按钮

    最新版next已集成此功能,默认关闭,需自行开启,但是配置方式与其他不同(相关细节可进入hexo->themes->next->layout->_macro,打开reward.swig,查看相关语句),具体配置方法:在主题配置文件(_config.yml)中添加以下字段:

    # Donate 文章末尾显示打赏按钮
    reward_comment: XXXX(显示的字样)
    wechatpay: /images/wechatpay.jpg
    alipay: /images/alipay.jpg
    

    同时将处理后的支付二维码照片放在hexo->images文件夹中。

    [注意] 如果对图片加载速度有要求,或博客文章中需要插入图片,或有其他要求,则需要将图片放进图床并获取图片外链,具体方法如下:

    1. 可转成base64编码格式字符串(适用于小图,不推荐)

    2. 将github作为图床:在repository的根目录下建立image文件夹,然后将图片放在其中,在写链接的时候直接使用自己的GitHub Pages根路径加图片地址访问即可。例如:
      [图片上传失败...(image-324657-1528647552208)]

    3. 将微博作为免费图床,将图片以微博形式发出,获取外链。

    4. 使用专门的图床服务(推荐),具体查看下面的连接文章:

    结语

    到此,大功告成,恭喜你已经建立了一个相对完善好用的独立Blog了!如果还有其他需要,可搜索hexo进阶与优化相关博文或自行探索。

    相关文章

      网友评论

      本文标题:Hexo+github 超详细blog自建指南

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