1000字范文 > hexo+github pages+个人域名搭建个人博客（踩坑合集）

hexo+github pages+个人域名搭建个人博客（踩坑合集）

时间：2019-06-08 13:16:22

注：此博客不再更新，所有最新文章将发表在个人独立博客limengting.site。分享技术，记录生活，欢迎大家关注

先上成品网址看效果 limengting.site

#0.安装hexo

hexo的安装参见官方文档：

hexo安装

node.js/git自行百度/Google

node -vnpm -vgit --version

安装hexo

npm install hexo-cli -g

检验

hexo -v

#1.创建远程仓库

在github上创建远程仓库，我的名为sunnie.github.io

注意：repository名称必须为用户名.github.io，且用户名要全为小写，我就是大小写混在一起一直报404，各种怀疑人生找bug，瞎忙活了一晚上，最后把用户名全改成小写了才行的，感谢知乎用户

在Repository name下面填写你要创建的地址，这个地址是就是你的域名，以.github.io结尾。例如填写lmtsunnie.github.io以后就在地址栏直接输入lmtsunnie.github.io就可以访问网站

#2.创建本地仓库

在本地新建文件夹并切换

mkdir lmtsunniecd lmtsunnie

初始化博客

hexo init

以上两步可以简写为

hexo init lmtsunnie

检测

hexo n test // 新建一篇博客文章名为testhexo g // 生成网页hexo s // 在本地预览

完成后，打开浏览器输入地址：localhost:4000

显示：

hexo命令介绍：

npm install hexo -g #安装Hexonpm update hexo -g #升级 hexo init #初始化博客命令简写hexo n "我的博客" == hexo new "我的博客" #新建文章hexo g == hexo generate #生成hexo s == hexo server #启动服务预览hexo d == hexo deploy #部署hexo server #Hexo会监视文件变动并自动更新，无须重启服务器hexo server -s #静态模式hexo server -p 5000 #更改端口hexo server -i 192.168.1.1 #自定义 IPhexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

#3.换主题

回到主目录lmtsunnie

$ git clone /litten/hexo-theme-yilia.git themes/yilia

修改lmtsunnie根目录下的 _config.yml

theme: yilia

重新执行hexo s可以看到主题换了

#4.交由github托管

将我们的Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为：

deploy: type: gitrepo: /lmtsunnie/lmtsunnie.github.io.gitbranch: master

其实就是给hexo d 这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置，很显然，我们部署在我们GitHub的仓库里。最后安装Git部署插件，输入命令：

npm install hexo-deployer-git --save

这时，我们分别输入三条命令：

hexo clean hexo g hexo d

其实第三条的 hexo d 就是部署网站命令，d是deploy的缩写。完成后，打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即 lmtsunnie.github.io

你就会发现你的博客已经上线了，可以在网络上被访问了。

#5. 绑定自己的域名

（1）在阿里云或者腾讯云上买一个自己的域名，设置解析，实名验证通过确定能ping通自己的域名后设置

注意：阿里云的实名认证比较慢，要实名认证过后解析才会生效才能ping通，腾讯云的实名认证很快，一上传资料认证就能通过，域名能马上使用，但是阿里云的域名更多。

（2）本地仓库的lmtsunnie/resource下创建CNAME文件（无后缀名，CNAME大写），CNAME下写入自己的域名，我的是limengting.site。

（3）在github的lmtsunnie.github.io的settings下github pages栏目设置域名为limengting.site

（4）在终端上hexo clean && hexo g && hexo d

（5）登录limengting.site可以访问到自己的博客

#6. 修改yilia主题中的配置

参见yilia主页

修改themes/yilia/_config.yml主题配置文件

将博客变成自己的

#7. 解决访问速度过慢的问题

hexo博客优化加载速度

1、修改themes/yilia/layout/_partial/after-footer.ejs文件，将原来的

<% if (theme.mathjax){ %><%- partial('mathjax') %><% } %>

替换为

<% if (page.mathjax){ %><%- partial('mathjax') %><% } %>

在需要使用公式的文章开头加上mathjax: true即可，比如：

---title: Markdown常用格式date: -10-30 14:34:23tags: Webmathjax: true---

如果用Github pages托管，由于Github的服务器在国外，访问速度肯定不如国内的快。解决访问速度的问题最根本的还是把博客托管到国内的服务器上，比如托管到coding.me或者自己国内的vps上。

#8. 细节优化

1-3参见这篇文章

##1. 制作ico

使用制作ico的工具（百度搜一个），制作一个16X16的figure.ico。放置到hexo/themes/yilia/source/img/中，然后编辑hexo/themes/yilia/_config.yml：

favicon: /img/figure.ico

##2. 点击有小红心效果

在 hexo/themes/yilia/source 文件目录下新建love.js写入以下内容：

找到 hexo/themes/yilia/layout/_partial/footer.ejs 文件，在文件的最后，添加以下代码：

<script type="text/javascript" src="/love.js"></script>

##3. 给博客增加流量

###（1）添加sitemap和rss订阅

添加rss订阅

关于SEO与RSS，需要在博客根目录（注意不是yilia根目录）安装这三个node_modules:

hexo-generator-feedhexo-generator-baidu-sitemaphexo-generator-sitemap

分别对应：rss、百度爬虫sitemap、通用搜索引擎sitemap

安装后hexo g即可生成对应的xml文件

npm install hexo-generator-sitemap --savenpm install hexo-generator-baidu-sitemap --savenpm install hexo-generator-feed --savehexo g

查看public文件夹，可以看到sitemap.xml文件。

sitemap的初衷是给搜索引擎看的，为了提高搜索引擎对自己站点的收录效果，我们最好手动到google和百度等搜索引擎提交sitemap.xml。

###（2）提交博客sitemap到各站点

参见这篇文章

谷歌站点提交入口必应站点提交入口百度站点提交入口

以后每发表一篇文章都把文章的链接提交到搜索引擎或者更新sitemap.xml到搜索引擎即可。

4. 添加访问量统计

我这里一开始用的不蒜子，用了发现不蒜子的统计很粗略，只能在页面显示也没有后台分析，就又用了友盟。

（1）为站点添加访客量和访客人数

themes/yilia/layout/_partial/footer.ejs添加：

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_site_pv">--- 本站总访问量 <span id="busuanzi_value_site_pv"></span> 次 ❤</span><span id="busuanzi_container_site_uv"> 本站总访客 <span id="busuanzi_value_site_uv"></span> 人 ---</span>

我的完整的fooer.ejs配置：

<footer id="footer"><div class="outer"><div id="footer-info"><div class="footer-left">© <%= date(new Date(), 'YYYY') %> ❤ <%= config.author || config.title %> </div><div class="footer-right"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1273929761'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "/z_stat.php%3Fid%3D1273929761%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script></div> </div><div class="count-span"><span id="busuanzi_container_site_pv">--- 本站总访问量 <span id="busuanzi_value_site_pv"></span> 次 ❤</span><span id="busuanzi_container_site_uv"> 本站总访客 <span id="busuanzi_value_site_uv"></span> 人 ---</span></div> </div></footer><script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script><script type="text/javascript" src="/love.js"></script>

（2）为文章添加阅读量

themes/yilia/layout/_partial/article.ejs的首部：

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> <%if(index){%> article-index<%}%>" itemscope itemprop="blogPost"><div class="article-inner"><% if (post.link || post.title){ %><header class="article-header"><%- partial('post/title', {class_name: 'article-title'}) %><% if (!post.noDate){ %><%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %><% if ( !index ){ %><span class="archive-article-date">阅读量 <span id="busuanzi_value_page_pv"></span></span> <% } %><% } %></header><% } %>

友盟统计访问量

站点访问量：不蒜子

文章阅读量：不蒜子

##5. 添加gitment评论功能

p.s 不选择畅言/友言/disqus

（1）畅言需要备案服务器

（2）友言连官网都打不开，看网上说很久都没维护了吧

（3）disqus服务器在国外，我倒是没问题可以翻墙，但是毕竟要为不能科学上网的小伙伴们考虑

（4）gitment评论虽然也受限于github使用者，但是考虑到后期博客主要也是写技术博客，也就凑合着用吧

yilia主题的作者已经集成了gitment服务，我们只要手动把配置配好就可以了

callback url一定要填对，其他的随意

具体步骤参见这里

基本配置配好了之后再说一说我在这里遇到的几个坑：

（1）无法login，点击login后url显示Redirect URI mismatch

看了官方说明，之后发现可能自己的callback url填错了，因为我填的是https://lmtsunnie.github.io但是申请自己的域名后把github pages重定向到了limengting.site，于是把callback url改成了自己的域名才成功的

（2）能login之后又无法initialize，显示Error: Comments Not Initialized

这个解决地比较快，网上很多人都遇到过这个问题，因为yilia里面作者写的id是url，但是url会超过github规定的官方限长，将id改成时间就解决了

详细方案看这里

注意id: '<%=page.date%>',page.date前后不要有空格。

我的gitment.ejs配置：

<div id="gitment-ctn"></div> <link rel="stylesheet" href="//imsun.github.io/gitment/style/default.css"><script src="//imsun.github.io/gitment/dist/gitment.browser.js"></script><script>var gitment = new Gitment({id: '<%=page.date%>',owner: '<%=theme.gitment_owner%>',repo: '<%=theme.gitment_repo%>',oauth: {client_id: '<%=theme.gitment_oauth.client_id%>',client_secret: '<%=theme.gitment_oauth.client_secret%>',},})gitment.render('gitment-ctn')</script>

重新部署就可以初始化每个文章下面的评论区了~~~

全部设置完之后的评论区就是下面这个样子啦：

6-7参考文章

6. 增加fork me on github标签

打开GitHub Corners或GitHub Ribbons网站，从里面选择一个你喜欢的样式，并复制其代码

打开themes\yilia\layout文件夹，并编辑layout.ejs文件。

并在这段代码：

<%- partial('_partial/head') %><body><div id="container" q-class="show:isCtnShow"><canvas id="anm-canvas" class="anm-canvas"></canvas><div class="left-col" q-class="show:isShow"><%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>

下面添加：

<a href="/lmtsunnie"><img style="position: absolute; top: 0; left: 0; border: 0;" src="/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="/github/ribbons/forkme_left_gray_6d6d6d.png"></a>

其中href=后面的链接是你Github主页对应的链接，style是风格，也就是位置和颜色这些款式，alt是显示的文字.最后执行hexo clean hexo g hexo d三条命令即可。

效果：

7.添加网站顶部加载条

在themes\yilia\layout_partial文件夹中编辑head.ejs文件。并在这段代码：

<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge" ><link rel="dns-prefetch" href="<%= config.url %>"><title><% if (title){ %><%= title %> | <% } %><%= config.title %></title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

下面添加：

<script src="///pace/1.0.2/pace.min.js"></script><link href="///pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet"><style>.pace .pace-progress {background: #6d6d6d; /*进度条颜色*/height: 2px;}.pace .pace-progress-inner {box-shadow: 0 0 10px #1E92FB, 0 0 5px#6d6d6d; /*阴影颜色*/}.pace .pace-activity {border-top-color: #6d6d6d; /*上边框颜色*/border-left-color: #6d6d6d; /*左边框颜色*/}</style>

最后执行hexo clean hexo g hexo d三条命令即可。

8. 嵌入个人简介

###（1）自己想的办法：跳过remain文件夹不渲染

我一开始是发表了一篇文章，把这个文章的链接关联到左侧的ME按钮。但是后来觉得这样太蠢了，访客还能看到我这篇文章，就没有点击ME按钮意外的惊喜了。于是就想把这个aboutme.md生成的aboutme.index保存下来放在public的某个子文件夹中，再把地址指向这个ME按钮就可以了。但是为了保证hexo clean的时候不把这个子文件删除掉，又需要设置skip_render参数。

详见这里

skip_render参数的使用需要注意两点：

1 此处的位置是相对于你的source_dir的位置，一般来说，就是以source为根的位置

2 这里的文件匹配是基于正则的，大致上可以参考这个，也就是说*.html可以忽略所有html文档，hello-wordl.md的话，就能忽略掉名字为hello-wordl.md的文件。

updated1:

skip_render使用了minimatch，开始匹配的位置是基于你的source_dir的，一般来说，是你的source文件夹下。下面我分别列举几种常见的情况进行说明：

请注意yml中的文件格式，输入单个数据请注意空格，输入数组请进行缩进

单个文件夹下全部文件：skip_render: test/*单个文件夹下指定类型文件：skip_render: test/*.html单个文件夹下全部文件以及子目录:skip_render: test/**多个文件夹以及各种复杂情况：

skip_render:

-test1/*.html

-test2/**