搭建Hexo博客中碰到的坑

作者: 卡咔喀 | 来源:发表于2016-04-18 11:58 被阅读22162次

    前段时间上网查资料时看到了好几个很不错的个人博客,感觉很棒,自己也想搭建一个玩一下,刚好在万网查到自己的域名niujiajun.com没被注册,就搜集资料准备开干了。虽然现在早就不再是博客的时代了,但本来也没想着靠这个干什么,只是说能有个专属自己地方能分享记录自己的思考,资源和学习成果,可以把琐碎的东西总结归纳然后写出来,毕竟写出来>说出来>想出来。

    不简单的介绍

    好了费话不多说了,开始复盘博客搭建的整个过程。首先简单介绍一下,我的博客由Hexo作为博客框架,Github提供的300M免费空间作为服务器,Next作为博客的主题。Next主题中又集成了多说的评论、分享系统和热评文章功能,百度统计服务和Swiftype站内搜索服务。
    反正就是一锅乱炖吧,其实我也不太了解这些功能和服务,就一步步按教程走就好了。整个搭建耗时4天,其实1天就能把基本的东西搭建好,剩下的三天都在处理问题和完善细节。如题,这篇文章的目的并不是讲解如何搭建一个Hexo博客,而是记录我在搭建博客过程中遇到的问题,并给出我的解决方法。

    搭建博客的准备

    先放几个Windows环境下搭建Hexo博客的教程:

    这类教程网上一搜一大把,这里给的是我觉得写得可以的。还有一个比较作弊一些的自动化搭建工具:

    这个是我快搭好的时候发现的,不喜欢太傻瓜式的,且不想前功尽弃,所以我是没用过的,疗效如何我也不知道。
    然后如果每个教程都大概看一下的话,可以发现每个教程的步骤不太一样,这就很讨厌了。其实上上周我就尝试过搭建,就是因为看的教程不对,所以刚开始就碰到了问题,于是放弃,拖了两周又重头再来。可见一个好的教程是成功他妈,下面是我看了几篇教程后自己的步骤:

    • 注册github账号,创建一个yourname.github.io的仓库
    • 买个喜欢的域名
    • 下载Node.jsGit
    • 利用Git安装Hexo,并进行本地测试
    • 部署本地文件到Github进行查看
    • Github Pages绑定域名
    • 安装Next主题,并进行优化
    • 博客搜索引擎推广

    这里要进行注解的是,有的教程会让配置SSH密钥,SSH密钥可以为了防止其他人恶意部署文件到你的仓库,使用以后每次部署文件都需要登录Github账号,可以不配置。
    有的教程中还会要求下载Github客户端,但我觉得没什么卵用。


    曲折的路和路上的坑

    路很长,慢慢来。

    仓库的名字

    仓库的名字的正确格式是github用户名.github.io,之前没仔细看,随便起了个,果断报错。

    关于Git

    Git是Git Bash不是Github更不是Github Shell,是一个命令行工具,长这个样子。 git-bash-image

    我刚开始就搞错了,然后Hexo的安装就失败了。

    Hexo本地测试的时候要注意:

    1.Git要运行在本地Hexo的根目录下。
    2.Git中Ctrl + C是stop的快捷键,不要使用Ctrl + CCtrl + V的快捷键,用右键。
    3.优化主题时,修改Hexo根目录下的_config.yml站点配置目录后,要重新启动Hexo再刷新,修改next主题目录下的_config.yml主题配置目录则只需刷新即可.
    4.本地测试是Hexo is running,Git显示如下,其他状态便无法连接

    $ hexo s
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
    
    

    如何绑定域名

    绑定域名是个大坑,我有两天的时间卡在了这上面,所以这里要详细讲一下绑定的过程

    ping出Github Pages的IP

    具体方法是打开win的命令行工具CMD,输入

    ping yourname.github.io

    如图

    ping

    返回的23.235.47.133就是Github Pages的IP,我拿到这个IP后直接在浏览器输入,结果就是404

    ip-404
    我就很费解,为什么返回的ip找不到对象,然后我再次ping了一下
    ping-error
    WHAT THE FUCK?IP变成了185.31.18.133,是不是在玩我
    biaoqing1
    然后上网查教程,没错啊,就是这样啊,可为什么会出问题呢?然后就一直卡着,最后加了个Hexo群问了下,也没有人说出原因,根据后面的尝试觉得可能每个结果都是对的,也就是说填哪个都行

    把获取的IP绑定到域名上

    上一步有点混乱,我也不知道该绑定哪个IP,只好先试一下。看了网上的教程,很多人在DNSpod去绑定,如继利用github创建自己的博客(二)---绑定域名,我觉得在哪设置都行,就直接在阿里云的控制台设置了。
    首先找到控制台-->产品与服务-->域名-->域名列表

    aliyun
    在你要设置的域名中点击解析
    jiexi
    如果首次修改可以选择新手引导设置,不是首次就只能选择修改了,修改的时候只要修改两个记录类型为A,主机记录分别为@www的行就可以了。
    dns-set
    新手引导设置只需修改网址解析
    new
    PS:有的教程中说要新建CNAME,然后指向yourname.github.io,我试了,并不行,和已建的有冲突
    好了,域名设置好了,在浏览器输入

    niujiajun.com

    好了,接下来就是见证奇迹的时刻了


    404

    excuse me?怎么还是404,到底是哪出了问题,然后我又ping了一次拿新的ip绑定还是404,重新部署了文件直接无法显示网页了,重新申请个Github账号,然后重新绑定,还是404。


    biaoqing2
    搞了很久还是不行,后面在网上和群里问出,到这里域名绑定并没有结束,还差关键一步。

    在yourname.github.io的根目录下添加CNAME

    具体就是在Hexo目录里的source文件下添加一个名为CNAME的文件,注意这个文件是没有后缀的,千万不要设置成.txt文本文件,文件的内容就是域名,格式如:

    niujiajun.com

    添加后部署文件,这个时候再试,应该就成功了。


    biaoqing3

    其他步骤就按教程就行了。

    搜索引擎推广时的注意

    HTML验证文件

    下载了验证文件后,部署到根目录下,点击完成验证,却发现


    baidu
    google

    这是因为hexo编译文件时,会给下载的HTML文件中添加其他的内容,导致验证失败。
    比如本机内google文件的原内容是

    google-site-verification: google28a167413f7cb18a.html
    

    Github里google文件的内容却是

    <!doctype html>
    
    
    <html class="theme-next mist use-motion">
    <head>
      <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    
    ......
    

    等等一大堆,所以需要在Github里手动修改验证HTML文件,或者不编译,只需执行

    hexo c
    hexo d
    

    打开HTML文件只有一串字符


    yanzheng

    提交sitemap站点地图

    教程中说需要在在博客目录的_config.yml中添加如下代码

    #自动生成sitemap
    sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml
    

    然后编译,就会在博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml。但我的情况是,不添加可以生成,添加后反而不能生成。
    然后,我生成的文件如下

    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    
      <url>
        <loc>http://yoursite.com/2016/04/13/hello-world/</loc>
        <lastmod>2016-04-16T07:39:13.917Z</lastmod>
        <data>
            <display>
            <title>Hello World</title>
            <pubTime>2016-04-13T07:00:20.947Z</pubTime>
    
            </display>
        </data>
        </url>
    </urlset>
    

    可以看到,编译器并没有把yoursite.com改为niujiajun.com,这里需要手动修改,但有一点要注意的是修改后部署文件不能再编译(hexo g)了,因为编译了以后又会变回yoursite.com,所以写了新的文章后记得修改sitemap.xml。
    然后把sitemap文件提交给搜索引擎就行了。

    一些补充

    hexo 命令

    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面
    hexo generate #生成静态页面至public目录
    hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    hexo deploy #将.deploy目录部署到GitHub
    hexo help  # 查看帮助
    hexo version  #查看Hexo的版本
    hexo deploy -g  #生成加部署
    hexo server -g  #生成加预览
    命令的简写
    hexo n == hexo new
    hexo g == hexo generate
    hexo s == hexo server
    hexo d == hexo deploy
    

    部署文件需要三步

    hexo c
    hexo g
    hexo d
    

    有时不需要hexo g

    设置题目、分类、标签

    在Markdown文件的开头添加

    ---
    title: 你的题目
    tags: 你的标签
    category: 你的分类
    ---
    

    如果使用hexo new命令新建文章则会自动生成

    多个标签的设置

    方式一:仿照Hexo配置文件中的写法

    tags:
      - 前端
      - Hexo
      - HTML
      - JavaScript
    
    

    方式二:伪JavaScript数组写法

    tags: [前端,Hexo,HTML,JavaScript]
    

    多个分类也是如此

    设置索引目录里的图片

    因为索引设置为提取文档前150个字符,所以想在索引目录中插入图片,就在文章开头插入图片即可。

    首页只显示一篇文章

    这好像是Next主题的一个bug,出现这种状况可以两次编译试一下

    hexo c
    hexo g
    hexo g
    hexo s
    

    我也有过这种错误,但后面发现是自己md文件有错误,tags:后没加空格。注意命令行里错误信息

    gitbash-error

    这个错误就是在提示我md文件的tags标签处出现了错误。


    回看一下好像也没什么难的,一步步按着教程来就可以了,有什么不懂的网上查一下就OK了。

    end

    相关文章

      网友评论

      • TseFeng:我配置好了域名, 能上主页, 但是点 其他目录之后就404了, 要自己在域名前面加https://才行, 怎么不是自动加上去么
      • edb516012a78:我在source文件夹下创建了CNAME文件(无后缀,内容也是mysite.cn),可上传到github后,在仓库里打开CNMAE文件内容就不是mysite.cn了,自己的博客也不能访问,在github里把CNAME文件修改后,能正常访问,但每次上传代码之后都要修改。。
      • aef579b68295:域名绑定那块 真是误人子弟,不懂不知道看github的官方文档吗?ip 说白了不保险,如果哪天IP变了,就没法访问你的网站了,github 文档里面有写 使用cname解析域名的那一部分。
      • 40a27f48bc84:超级感谢楼主的!!!就是域名解析里面的那个CNAME改成ip地址就可以了!!!!万分感谢!
      • 前端小白菜鸟:报错求解决
        FATAL incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line at line 32, column 16:
        new_post_name: : title.md # File name of new posts
        ^
        YAMLException: incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line at line 32, column 16:
        new_post_name: : title.md # File name of new posts
      • 翎野君:很喜欢你表述问题的方式:+1:
      • z1挂东南:问一下,修改配置后要用Git Bash 的什么命令来同步,我修改后使用$hexo clean,$hexo g,$hexo d .又没变成没修改之前的样子了。
      • d2502d1b4a0c:为什么我启动了,可是CSS,JS一直加载失败呀
      • 芒果浩明:感谢,虽然没你踩的坑多
      • 50628aae52a9:请问 为什么我上 解析后 登陆 xxxx.github.io 找不到网页 然后自动跳到我自己的域名,但也是找不到网页 。 是解析不成功吗?
      • zyczzh:楼主在更改了域名后有没有访问快些?我用github的域名访问超慢。。。。
        zyczzh:@牛牛佳俊 好吧,那我试试上传到coding试试
        卡咔喀:不会,域名只是供你访问的入口,内容还是在github的服务器上
      • jesson2274:博主的404问题的解决方案大赞,我也是这里遇到了问题,太谢谢了!
      • a6b9d9afd611:写的很好,遇到的挺多问题都有说到。不过再提醒一点,以管理员身份运行cmd,WIN+X或右键开始按钮,选择命令提示符(管理员)。有些错误是因为权限不够造成。
      • 卡咔喀:抱歉啊各位,我很久没登简书了(可见我的博客也没怎么搞):relieved: ,这个是一年前搞得了,很多事情都忘记了,所以很多问题恕我不能帮助大家。
        PS:现在我的博客已经关了,毕竟简书或者其他博客平台还有流量,自己的博客流量少得可怜。
      • abd42bce169a:(node:16184) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
        INFO Start processing
        ERROR Theme config load failed.
        ERROR Process failed: _config.yml

        是主题的 _config.yml错了么
      • Gourds:就在刚刚遇到了sitemap的问题,应该是你主配置文件的问题,修改了就好了,
        # URL
        ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
        url: http://yoursite.com #修改这个哦
        我的博客:arvon.top
      • ad583606e5c5:楼主我想问你一个问题,就是我将我的域名和我的github.io绑定后,可以通过域名来访问我的主页,但是通过myname.github.io就会出现404,There isn't a GIthub Page Site here,弄了好久就是不能解决,希望楼主能点播一下,谢谢
        南峰QAQ:myname.github.io仓库下,没有CNAME文件,CNAME文件的内容是你申请的域名
        05f3eb6c2a79:我和你一样,请问解决了吗?
      • 71712c5954f8:(=・ω・=)楼主你好,最近我也在倒腾hexo~在安装搜索插件的时候跟你在用sitemap时遇到了类似的问题~插件自己编写的ejs并没有把搜索链接转成自己设定的域名下的链接,而是用yoursite进行了替换_(:з」∠)_,一开始我也像你一样去手动改xml。但是无奈搜索功能的链接生成太多orz,每次都去替换着实不现实,然后就突然想到是不是全局没布置好,结果去_config.xml下面一看,果然orz需要把"url: http:yoursite.com"修改为你自己的域名根目录_(:з」∠)_,然后就解决了_(:з」∠)_
      • 爪爪熊:感谢楼主,感谢!!!
      • Aiden_Xi:不到一分钟前sheriff-niu.cn使用文件验证验证失败,原因:验证的文件内容错误。
        问题分析&解决办法: 验证文件的内容与我们提供的不符,请确定是原样上传站长平台的问题,检查方式:访问验证文件——查看源代码检查,部分服务器会自动加上一些内容导致校验失败。

        错误信息。 QQ 380491563 有时间是否可以私聊下。 万分感谢啊。
        老人羽海:同问,这个问题后来解决了吗?
      • Aiden_Xi:在吗? 我按着你的方式 添加站内搜索 还是报错。
        谁把月亮涂黑啦:需要下载 hexo一个插件,去官网看清楚文档 再去求救!
      • 小白之白小明:香菇 我就是因为CNAME文件弄成.txt了 看了你的文章终于找到了问题!!十分感谢!
        a6b9d9afd611:@人半童 显示文件后缀名,删去“.txt”即可。
        人半童:请问,如何创建一个无格式文本CNAME,我用记事本,格式改为所有文件,最后输出还是文本文件。。。
        卡咔喀:@萌long 互相交流,嘿嘿
      • 小白之白小明:你好,首先很感谢你的教程
        $ hexo server
        INFO Start processing
        INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

        我已经显示这个了,为什么本地查看还是显示
        无法访问此网站

        localhost 拒绝了我们的连接请求。
        Aprilx:@偝後 厉害了我的哥!!!很有经验的一条建议!!!谢谢!!!
        792b881bdc73:@萌lng 应该是4000端口被占用了,我今天也遇到这个问题,你试试hexo server -p 5000试试
      • 9fb09a931d1c:我问题出在最后一步了!
        在yourname.github.io的根目录下添加CNAME

        具体就是在Hexo目录里的source文件下添加一个名为CNAME的文件,注意这个文件是没有后缀的,千万不要设置成.txt文本文件,文件的内容就是域名,格式如:

        我是先部署之后,才添加这个文件的。现在怎么重新部署呢!
        谁把月亮涂黑啦:@牛牛佳俊 在配置文件 skip_render 下添加 一个参数CNAME不就好了,搞这么复杂干嘛。
        卡咔喀:@jay2uu 不太了解你所说的情况,是不是说你直接在git里添加了CNAME,如果再部署CNAME文件就没了?如果是这样的话就在Hexo目录下找到public文件夹,在此目录添加CNAME文件后再部署
      • MeloDev:有时候修改了主题的一些属性
        然后部署之后 hexo s 在本地预览成功了
        但是线上一直迟迟没有更新,或者无法正常显示头像和链接,这个怎么回事?
        纪念时光的我们:我的是本地预览成功,但网页上什么都没有,有一个页头和页尾,所有的文字都不显示 :sob:
        之前一次还好好的。你是怎么解决的呢,说不定这两个问题差不多呢
        MeloDev:@堕小快乐 一般线上有延时,等一会就好了,或者clean一下缓存
        b862caf73bf1:@MeloDev 我现在也遇到了这个问题,问一下你是怎么解决的呢?
      • 5f72faa89af5:那个头疼的问题可能是,在修改_config.yml 文件中“冒号后面要加上一个空格,否则会报错” 帮我解决了一个问题,应该有人也会碰到吧~

      本文标题:搭建Hexo博客中碰到的坑

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