我的个人博客搭建记录

最新推荐文章于 2022-11-08 16:50:49 发布

rebootcat

最新推荐文章于 2022-11-08 16:50:49 发布

阅读量3k

点赞数 4

分类专栏： blog 文章标签： blog hexo github next

本文链接：https://blog.csdn.net/u013051748/article/details/51636100

版权

blog 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

6/13更新绑定个人博客到域名 rebootcat.com

前言

本篇博客旨在备忘，并记录了自己折腾了3,4天后顺利搭建自己的个人博客过程中碰到的一部分问题。

搭建个人独立博客有很多种方法，我暂时采用的是基于github Pages的免费博客，博客框架采用hexo静态博客框架。采用此方案的原因，是因为基于github+hexo的博客很多，碰到了什么问题也有很多解决办法。当对一个事情或事物不太熟悉的时候，尽量采用受众比较多的，无关乎随大流，无关乎跟风。这让我想起了自己当时刚刚接触linux的时候，完全陌生的情况下真是无法选择到底以那个系统进行学习，所以当时采取的办法是使用社区活跃度较高，用户群比较多的系统，比如centos和ubuntu，最终我选择了ubuntu，毕竟刚从windows转过来，当然我现在使用的是centos，当然这是题外话了。

一点建议：
我不知道大家跟我是否一样，当我新接触一个事情或事物的时候，我不太习惯去看他的使用手册或者官方文档，而是去google,baidu别人的教程，我觉得这是一个很不好的习惯，以后尽量优先考虑官方手册。对于搭建这个博客来说，就让我深深的体会到了这样的好处。关于hexo的官方手册，关于next(下文会介绍)主题的官方手册，仔细阅读，如果不笨的话，是不需要再看别人的教程从而也能顺利搭建自己的博客。

搭建准备

我的环境：win10 x64

要使用hexo，需要node.js和git.

Node.js下载安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L36LgUzV-1601037766072)(http://o8fj2jbwb.bkt.clouddn.com/nodejs.png)]
这里推荐大家采用安装包.msi的方式，不要下载绿色版的.exe，不然后续设置的环境变量可能不对，还有提示npm找不到的问题。可以看到标题Current Version:v4.4…5(includes npm 2.15.5),故为了正确性起见，推荐大家采用.msi的方式，按照上面地址的安装配置教程就可以顺利安装。

如果后面安装hexo的时候出现npm找不到的话，也可以手动自己安装npm。

Git安装

注意：Git是一个版本控制系统，下载安装Git会顺带把Git需要用到的shell环境也安装了，当然你可以自己设置成windows Powershell，亦或是像我一样，设置成bash.不要与github的客户端搞混了，说来惭愧，我就搞混了。希望你不要搞混了

上面的地址可能需要翻墙，如果不能翻墙，自行解决。但我相信，你既然都能想到用独立博客，那必然翻个墙不是什么难事。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11GnuN1O-1601037766076)(http://o8fj2jbwb.bkt.clouddn.com/git.png)]

由于我工作中用的是svn，所以对git不太熟练，但是我觉得git是未来的趋势，有必要学习使用。

Git教程

安装hexo

hexo是什么？正如hexo.io上的标题所示：A fast, simple & powerful blog framework ，powered by node.js就足以介绍了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VjSGeSFH-1601037766084)(http://o8fj2jbwb.bkt.clouddn.com/hexoinstallll.png)]

安装hexo也很简单，打开git bash:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3XWFZdLD-1601037766087)(http://o8fj2jbwb.bkt.clouddn.com/gitbash.png)]
然后输入命令：

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install

输完收工！！

需要注意的是blog可以是你自己的自定义blog目录，比如我的是/g/blog
安装完成后大概会是下图的结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0pz6ABFO-1601037766091)(http://o8fj2jbwb.bkt.clouddn.com/hexosuc.png)]

好了，hexo安装好了，接下来就是使用了。这里强烈推荐大家看hexo的官方doc

后面将会用到的几个常用命令：

$ hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
$ hexo server (hexo s) 启动本地web服务，用于博客的预览
$ hexo deploy (hexo d) 部署博客到远端服务器
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面

部署到github:

$ hexo d -g

部署到本地http://localhost:4000/:

$ hexo s -g

Github Pages

作为一个使用github的人来说，应该不用多介绍githubpages。具体可以看上面的链接。

创建新的仓库

这里需要注意的一点是：在你的github里新建一个仓库，仓库名需是你的github用户名，不然是不行的，所以后续你就可以通过http://username.github.io来访问自己的博客。

配置SSH

查看原有的ssh key

$ cd ~/.ssh
$ ls -al ./*

如果出现" No such file" 则不用管，如果存在.ssh这个目录那么可以先备份（不是必须，我就没有），再删除。

 $ rm -rf ./*

生成新的ssh key

$ git config --global user.name "yourname"
$ git config --global user.email "youremail"

"yourname"可以随意输入，"youremail"一般就输成你的github上的邮箱。
然后接着输入：

$ ssh-keygen -t rsa -C "yourmail@gmail.com"

这个地方的邮箱必须是你github上的邮箱。一路回车，中间会出现一个设置密码的询问，可以忽略，如果设置，那么就记住。我选择的是不要密码，那么直接一路next. 之后会在~/.ssh/下生成两个文件id_rsa 和 id_rsa.pub
$ cat ~/.ssh/id_rsa.pub
然后copy到github上添加秘钥。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O1HZMkpe-1601037766096)(http://o8fj2jbwb.bkt.clouddn.com/githubssh.png)]
title可以随意。完成之后，在git bash里验证一下：
$ ssh -T git@github.com
验证成功大概是这么个结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fiUEdV6F-1601037766100)(http://o8fj2jbwb.bkt.clouddn.com/ssh.png)]

部署到github

到这里，即将开始真正配置hexo，包括主题设置，部署上线等等。

修改 $BLOG/_config.yml，$ BLOG是我自定义的一个shell环境变量,你也可以自定义你自己的$BLOG.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Urr8b1kO-1601037766102)(http://o8fj2jbwb.bkt.clouddn.com/_configyml.png)]
参照我的设置，修改成你自己的github仓库地址即可。这里就要注意到，这个仓库的名字跟我的github用户名是一样的

一些语法上的东西需要注意：type:,repo:,branch:后面是必须有一个空格，不然后面会报错

然后接着在git bash 里执行：

$ npm install hexo-deployer-git --save
$ hexo d

此时，便已经成功部署到github上了，hexo默认自带了一篇hello world的markdown 博文。可以通过http://linxi4linux.github.io访问刚刚部署上线的博客。（换成你自己的地址）

至此，一个基本的博客系统就已经搭建完成了

hexo 详细配置

接下来的时间，便是折腾开始。看你自己的喜好了。可以配置主题，第三方服务，搜索，代码高亮等等。
我推荐使用next主题，刚开始我会觉得挺简陋的，但是我越看越觉得大气，舒服，简洁。

参照next主题的官方文档，你完全不用google其他的教程，就可以很容易很顺利，而且很好的搭建起一个效果还不错的博客站点。可以看看参考我的博客.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GGMOWLP-1601037766107)(http://o8fj2jbwb.bkt.clouddn.com/next.png)]
上图是next的官方网站，我建议你把“开始使用”，“主题配置”，“第三方服务”，“内建标签”，“进阶设定”,"常见问题"都仔细的阅读一遍，照着操作，你就没问题的。

下面挑几个我觉得还挺好玩的配置记录记录：

多说评论系统

登陆多说,选择我要安装。
创建站点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AG9QPWP5-1601037766110)(http://o8fj2jbwb.bkt.clouddn.com/%E5%A4%9A%E8%AF%B4.png)]
记住你自己设置的多说域名，比如我的是 rebootcat
编辑主题配置文件_config.yml($BLOG/themes/next/_config.yml)
```
 duoshuo_shortname: rebootcat
```

上面这些next的官方doc里都有，需要注意的是**如果需要在某个文章或者页面禁用多说，需要配置

	comments: false

在博文的开头处。

提交google抓取

首先安装sitemap插件：

 $ npm install hexo-generator-sitemap

然后插件存放目录是$BLOG/node_modules/

然后配置站点配置文件_config.yml($BLOG/_config.yml):

# Extensions	
Plugins:
- hexo-generator-feed

#sitemap
sitemap:
path: sitemap.xml

执行：

$ hexo d -g

访问http://username.github.io/sitemap.xml会看到如下的结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSQOICcm-1601037766115)(http://o8fj2jbwb.bkt.clouddn.com/sitemap.png)]
sitemap.xml文件是用来干嘛的呢？我自己简单的理解是：这个文件实时记录了网站内容的变更，提交google抓取的时候，google便可以根据这个文件的内容来进行相应的更新或者索引。

接下来，到Google Search,添加自己的网站网址，之后在这个页面会收到一封邮件，大致是这样子：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-asLzPTkn-1601037766119)(http://o8fj2jbwb.bkt.clouddn.com/googleConsole.png)]
然后我们点击提交站点地图，接下来你就会操作了。之后完成之后便是等待google审核通过。比如我自己的，前天提交了，现在还没有通过（应该是碰到问题了）：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRHULY1n-1601037766125)(http://o8fj2jbwb.bkt.clouddn.com/sitemaperror.png)]

嵌入网易云音乐

在网页嵌入云播放器，是不是觉得很酷？是挺酷的，但是其实很简单。
首先找到一首歌，然后点击“生成外链播放器”：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wx7JiH82-1601037766131)(http://o8fj2jbwb.bkt.clouddn.com/untilyou.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LVLsUjjv-1601037766134)(http://o8fj2jbwb.bkt.clouddn.com/untilyou2.png)]
复制上面的html代码到博文的任意位置，即可。就这么简单。
如果碰到受版权保护的情况，解决办法 戳我。

纯粹是好玩

这个效果会使整个页面震颤随着音乐，甚至标签也会跟着跳跃。
在$BLOG\themes\next\layout_partials\header.swig 中的 ul 标签加入如下 li 代码：

<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
function c() {
    var e = document.createElement("link");
    e.setAttribute("type", "text/css");
    e.setAttribute("rel", "stylesheet");
    e.setAttribute("href", f);
    e.setAttribute("class", l);
    document.body.appendChild(e)
}

function h() {
    var e = document.getElementsByClassName(l);
    for (var t = 0; t < e.length; t++) {
        document.body.removeChild(e[t])
    }
}

function p() {
    var e = document.createElement("div");
    e.setAttribute("class", a);
    document.body.appendChild(e);
    setTimeout(function() {
        document.body.removeChild(e)
    }, 100)
}

function d(e) {
    return {
        height : e.offsetHeight,
        width : e.offsetWidth
    }
}

function v(i) {
    var s = d(i);
    return s.height > e && s.height < n && s.width > t && s.width < r
}

function m(e) {
    var t = e;
    var n = 0;
    while (!!t) {
        n += t.offsetTop;
        t = t.offsetParent
    }
    return n
}

function g() {
    var e = document.documentElement;
    if (!!window.innerWidth) {
        return window.innerHeight
    } else if (e && !isNaN(e.clientHeight)) {
        return e.clientHeight
    }
    return 0
}

function y() {
    if (window.pageYOffset) {
        return window.pageYOffset
    }
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}

function E(e) {
    var t = m(e);
    return t >= w && t <= b + w
}

function S() {
    var e = document.createElement("audio");
    e.setAttribute("class", l);
    e.src = i;
    e.loop = false;
    e.addEventListener("canplay", function() {
        setTimeout(function() {
            x(k)
        }, 500);
        setTimeout(function() {
            N();
            p();
            for (var e = 0; e < O.length; e++) {
                T(O[e])
            }
        }, 15500)
    }, true);
    e.addEventListener("ended", function() {
        N();
        h()
    }, true);
    e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
    document.body.appendChild(e);
    e.play()
}

function x(e) {
    e.className += " " + s + " " + o
}

function T(e) {
    e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}

function N() {
    var e = document.getElementsByClassName(s);
    var t = new RegExp("\\b" + s + "\\b");
    for (var n = 0; n < e.length; ) {
        e[n].className = e[n].className.replace(t, "")
    }
}

var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
    var A = C[L];
    if (v(A)) {
        if (E(A)) {
            k = A;
            break
        }
    }
}
if (A === null) {
    console.warn("Could not find a node of the right size. Please try a different page.");
    return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
    var A = C[L];
    if (v(A)) {
        O.push(A)
    }
}
})()    '>一起摇摆</a> </li>

效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pnXBxhTM-1601037766142)(http://o8fj2jbwb.bkt.clouddn.com/%E4%B8%80%E8%B5%B7%E6%91%87%E6%91%86.gif)]

感谢以下博主：

基于Hexo+GitHub Pages 免费搭建个人博客最强教程

如何搭建一个独立博客——简明Github Pages与Hexo教程

hexo next 主题添加打赏功能

玩转Hexo博客之Next

The End

记录到此为止，其中比较琐碎的部分建议大家直接查看next的官方doc。

email:linuxcode2niki@gmail.com

Blog:

rebootcat.com (默认)
http://linxi4linux.github.io/(原地址，备用)
http://reboot_cat.coding.me/ （原地址，备用）

2016-6-11 于杭州

rebootcat

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
我的个人博客搭建记录

前言本篇博客旨在备忘，并记录了自己折腾了3,4天后顺利搭建自己的个人博客过程中碰到的一部分问题。搭建个人独立博客有很多种方法，我暂时采用的是基于github Pages的免费博客，博客框架采用hexo静态博客框架。采用此方案的原因，是因为基于github+hexo的博客很多，碰到了什么问题也有很多解决办法。当对一个事情或事物不太熟悉的时候，尽量采用受众比较多的，无关乎随大流，无关乎跟风。这让我想起了
复制链接

扫一扫