用hexo+GitHub搭建个人博客指南

本文因篇幅的原因,部分细节已经省略。详细请参考以下文章:

手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置
hexo干货系列:(四)将hexo博客同时托管到github和(coding(后面的演示方式部署和自动部署可以不用看)
Hexo-修改Hexo主题

配置ssh

  1. 打开git bash(可以在桌面右键打开),设置username和email:

    1
    2
    git config --global user.name "Ivan-Fan" // 输入用户名
    git config --global user.email "ivanyangfan09@126.com" // 输入GitHub注册邮箱
  2. 生成ssh秘钥:

    1
    ssh-keygen -t rsa -C "ivanyangfan09@126.com" // 输入GitHub注册邮箱

    后面敲回车就行了,会在用户文件夹下(C:\Users\Ivan)生成.ssh文件夹。新文件 id_rsa(私钥)和id_rsa.pub(公 钥)

  3. 添加公钥到GitHub

    此处注意:当前文件路径下公钥可能打不开,可以复制到桌面,用记事本打开

  4. 测试SSH:

    1
    ssh -T git@github.com
    • 可能会出现下面的提示,输入yes后回车

    The authenticity of host 'github.com (13.229.188.59)' can't be established.RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.Are you sure you want to continue connecting (yes/no)?

    • 出现这样的warning不用管:

    Warning: Permanently added 'github.com,13.229.188.59' (RSA) to the list of known hosts.

    • 出现这样的语句说明已经配置完毕:

    Hi Ivan-Fan! You've successfully authenticated, but GitHub does not provide shell access.


下面是关于coding的操作

coding

  1. 直接用GitHub的秘钥添加至coding,然后在git中输入以下的代码(桌面运行):

    1
    ssh -T git@git.coding.net
    • 出现这样的不用管:

    The authenticity of host 'git.coding.net (123.59.85.188)' can't be established.RSA key fingerprint is SHA256:jok3FH7q5LJ6qvE7iPNehBgXRw51ErE77S0Dn+Vg/Ik.Are you sure you want to continue connecting (yes/no)?

    • 敲 yes
    • 出现这样的语句说明成功

    Coding 提示: Hello IvanYang, You've connected to Coding.net via SSH. This is a personal key.IvanYang,你好,你已经通过 SSH 协议认证 Coding.net 服务,这是一个个人公钥


常用操作:

一、部署文章

  1. 新建一篇文章:

    1
    hexo n "你想要的文章名字"

    文章写好之后,就可以依次执行下面的代码发布了(发布的时候一定要在网速比较好的时候。。。曾经走过的坑)

  2. 先在本地启动hexo看看效果

    1
    hexo s

    如果发现页面打不开的话:

    • 关闭科网
    • 如果还不行,换下面的代码
    1
    hexo server -p 5000  #之前出错的原因可能是4000的端口被占用了

    如果可以的话就可以执行下面的代码发布啦

  3. 清除生成内容

    1
    hexo clean
  4. 生成静态页面

    1
    hexo g
  5. 部署hexo

    1
    hexo d

二、hexo博客如何添加本地图片?

  1. 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true

  2. 在你的hexo目录下执行这样一句话npm install hexo-asset-image --save,这是下载安装一个可以上传本地图片的插件,来自dalao:dalao的git

  3. 等待一小段时间后,再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

  4. 最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:

    ![你想输入的替代文字](xxxx/图片名.jpg)

    注意: xxxx是这个md文件的名字,也是同名文件夹的名字。只需要有文件夹名字即可,不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了,很像引用相对路径。

  5. 最后检查一下,hexo g生成页面后,进入public\2017\02\26\index.html文件中查看相关字段,可以发现,html标签内的语句是<img src="2017/02/26/xxxx/图片名.jpg">,而不是<img src="xxxx/图片名.jpg>。这很重要,关乎你的网页是否可以真正加载你想插入的图片。

​ 图片示例:

转自:Hexo中添加本地图片

注:有时候该方法会失效

当文章名字中含有括号时,计算机可能会因为括号匹配问题无法准确识别路径。此时可以采用备用方案(图床)

e.g 在微博建立相册,然后上传。上传之后点开图片,右键复制图片地址。图片效果如下:

(可能会出现本地服务器打不开文章页面的情况,不用管,直接部署就好)

三、其他

自建博客系列(六)Hexo博客的常用配置修改

四、bug汇总

  1. 执行hexo server的时候出现

    ERROR Process failed: _posts/lalala.md YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 7, column 1:

    有可能是下面几种情况:

    1. 配置的_config.yml中出现错误

      解决办法:_config.yml中配置项的冒号后面要用空格隔开,再跟内容

    2. new page出了问题

      解决方法:检查是不是文章的抬头出现标点符号错误,比如categories后面的冒号是不是英文格式(之前踩过一个坑,当时冒号打成中文了,运行hexo server就一直报错,查了好久才查出来)

Author: Ivan Yang
Link: https://blog.ivan-yang.com/2018/07/25/用hexo-GitHub搭建个人博客指南/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.