博客搭建折腾记

发表于 更新于 分类于
本文字数： 4.6k 阅读时长 ≈ 15 分钟

搭建博客的正确姿势。

博客初识

开始写博客只是用CSDN发布，本来开开心心。

然而有一天，我的一篇博客被系统直接删掉了，原因是含有敏感词汇。联系了管理员之后才恢复😐。

又想起之前一天发了好几篇，被系统禁发了。 有点小生气，发个博客也这么麻烦。索性就自己搭一个好了，然后就开始了折腾之旅。

或许你不相信，但我确实见过有许多非互联网行业的人也搭建了自己的博客。所以在搭建博客这件事上，确实没有专业之分。

说白了，搭建博客就是用一堆别人的东西，来做一个我们自己的东西。Hexo、主题、GithubPages、CodingPages，这些没一样是你的。而且这些都是免费的，除了买域名要花一只棒棒糖的钱（我搭建博客一共就花了3块钱😂）

所以，人家设计的东西，只要拿来用就可以了。

背景知识

  • Github：建立一个github.io的库，没有账号的话可以注册一个。
  • Hexo：需要下载它的安装包和主题，你只需要知道一些部署博客的命令（不超过5条）。这些命令也可以不会，因为文档里都有。
  • GithubPages：是Github推出的功能，只要建立了github.io库，就默认在使用。它相当于一个服务器，可以保存所有博客文件，是电脑上博客站点的一份备份/
  • CodingPages：跟GithubPages作用相同，但这个是国内的。为了双重保障和你的博客运行速度。建立还是设置下它。

所以，搭建博客时可以什么都不懂。但为了以后能更好的操作博客，建议在搭建成功之后，好好学习一下Github的使用。网上的教程也有很多，这里就不再赘述。

虽然我们可以什么都不懂，但以下3样东西必须要有：

  • 耐心：搭建博客是一件非常折腾的事情，所以耐心很重要
  • 细心：一定要细心，确保每一步都是正确的。
  • 一定的学习能力和钻研精神，遇到困难一定要面对它，主动解决。

为什么搭建博客？

这个问题相信你已经有了自己的答案，但我还是建议你看看这2篇文章：

搭建博客需要多长时间？

这个因人而异，在我看来，有这么几种：

  • 半天：只是搭建，不涉及到换域名和个性化，并且了解背景知识。那么只要半天便可以搭建完成
  • 一天：需要了解背景知识，并且换了域名和主题，但没有太多的个性化
  • 两天：设置了评论，字数统计等各种个性化设置（比如我）
  • 三天甚至更多：各种找个性化插件和设置，一直在折腾的人

当然，前两种都是你没有遇到太大的坑或者困难所给出的估计时间。如果你在搭建的时候碰到了很多的问题，那么这个时间就得延长了。因为这种问题一般不好查。

搭建博客之前，你应该知道自己在做的是什么。先把事情做对，再把事情做好。所以你需要了解一些背景知识。

建立博客的渠道

通常来说，建立博客的通常渠道包括以下3种：

  • 在博客平台上注册，比如 博客园、CSDN、新浪博客 等。
  • 利用博客框架搭建，如 WordPress、Jekyll、hexo 等。
  • 自己用代码写一个。

其中，第一种最简单，也最受限，说不定还会被删帖删号（我就遇到过这种情况）。第二种稍复杂，另外需要自己找部署的服务器，但可定制化较高，是很多人的选择。最后一种，是在重复造轮子，不过从另一个方面来看，倒是锻炼编程能力的好方式。

而我们要做的，就是第二种：既不受限，难度也不大。

为什么选择GithubPages和Hexo

用第二种方式搭建博客也有很多方法，但主流的有两种：

  • Wordpress
  • GitHub Pages+Hexo

很多人用 Wordpress，为什么我要用 GitHub Pages 来搭建？

  • 开始我也不知道用哪个，但在网上搜了教程后，发现wordpress比Hexo要麻烦很多。
  • Hexo是开源在Github上的，而且轻快便捷
  • GitHub Pages 有 300M 免费空间，资料自己管理，保存可靠。
  • 学着用 GitHub，享受 GitHub 的便利，上面有很多大牛，眼界会开阔很多
  • 顺便看看 GitHub 工作原理，最好的团队协作流程
  • GitHub 是趋势

概念介绍

HEXO

Hexo 是一个简单、快速、强大的静态博客框架，基于Node.js。由台湾大学生tommy351创建。并把它开源到了Github上，这里是它在Github上的地址：HexoGithub，它主要有以下优点：

  • 极速生成静态页面
  • 一键部署博客
  • 丰富的插件支持
  • 支持 Markdown

更多内容可以查看Hexo的官方文档，建议你只看看介绍部分，其它的你现在也看不太懂。等你搭建好了博客再去详细了解其他的内容就会轻松很多：Hexdocs

GitHub

GitHub是一个代码托管网站和社交编程网站。这里聚集了世界上各路技术牛叉的大牛，和最优秀的代码库。是全球程序员的天堂。因为是国外的，所以界面全是英文。博主英语过了六级刚开始接触的时候心都突突，不过不要怕，不是还有翻译么，

也有好多人调侃它是全球同性交友平台，其实我不太懂这个梗（女程序员也是很多的好么）

GitHub Pages

GitHub Pages是用来托管 GitHub 上静态网页的免费站点，其他的不多说。

CodingPages

和GithubPages功能相同，其对应的Coding平台也可以实现和Github相似的功能。但没有后者那么出名。是香港的公司，也算是国内的。

看了这些，我相信你一定还是一脸懵逼的。但你可以简单理解成下边的的一段话：

利用Hexo和GithubPages/CodingPages搭建博客，实际上就是利用Hexo在本地（你的电脑上）生成一个博客站点，然后利用网络将它传输到Github/Coding上进行拷贝和备份。再由Github和Coding提供的GithubPages/CodingPages服务将博客部署到网上，这样你的博客就可以作为一个独立的站点被别人浏览（正式上线）。同时你也可以在Github和Coding上管理你的博客。

如果你还想了解更多背景知识，可以看看这篇文章：搭建个人博客，你需要知道这些

搭建过程

搭建步骤

一般来说，搭建博客有以下几个步骤：

  1. 获得个人网站域名
  2. GitHub创建个人仓库
  3. 安装Git
  4. 安装Node.js
  5. 安装Hexo
  6. 推送网站
  7. 绑定域名
  8. 在Coding上部署你的网站

其中，1.7.8你可以不做。但剩下的必须要做，一步都不能少，也不能错。在你看下边推荐的博客的时候，不要忘记看看我下边的建议。

1-7步请看：这篇博客不只前7步，如果你做完了就可以往下做，因为后边的都是属于个性化部分，所以博主在这里没有显示。GitHub+Hexo 搭建个人网站详细教程

第8步请看：这篇博客是在你做完了前7步的基础上做的。hexo干货系列：（四）将hexo博客同时托管到github和coding，这篇博客也讲了怎么在CodingPages部署，可以和上一篇对照着看：我的Hexo博客站的创建历程(一)【Github&Coding双管齐下部署Hexo】

我的建议和踩过的坑

第一篇：

  • 域名建议买.top，比较便宜。当然，土豪随意。
  • 下载Node.js或Git时，由于众所周知的原因，下载速度会很慢。这时你需要看Hexo的官方文档，上边给出了离线下载的地址：Hexdocs
  • 在安装Hexo这一步，hexo init blog及其之后的命令都是在Blog/blog这个目录下进行的，一定要注意，不能弄错了。博主刚开始就是搞错了路径，结果一直报错。。。
  • 如果你在安装Hexo或者之前的步骤中有报错，建议你重新下载安装。因为这之前的过程全是安装的部分，一旦出错，没有别的原因，一定是你的操作有问题。而且你解决错误的时间一定要比重新安装耗费的时间长。
  • 关于Markdown，sublime是个好东西。

第二篇：

1.关于域名绑定，再次说明。血的教训告诉我们，Only需要添加两个解析。没有A记录，like this：

解析

之后可以在此网站对你的博客进行测试，看看你的博客是否可以在国内解析到Coding，国外解析到Github。访问速度是否得到提升。

2.coding配置完成后，加载博客时会出现其广告界面，如果你想去掉呢，coding给出的解决办法是在网站底部加上codingpages官网链接或者加logo

个性化

终于到了万众瞩目的个性化步骤了，到这里，想必你已经根据博主推荐的链接成功搭建好了博客。

下面来具体说说个性化。

主题选择

如果你按照上边搭建博客时推荐的文章那样，选择了next主题。那就不用多说。如果你觉得next主题不符合你的Style，可以参考这篇文章选择你喜欢的主题：Hexo博客主题推荐

但我还是推荐你用next主题，原因：

  • next主题是github上最流行的主题，star和fork的数量远远超过了别的主题。所以相信群众的选择。
  • next主题的主题配置文件本就内置了许多插件，在个性化的过程中你只需要把flase改成true或者加上对应服务的id就可以直接使用。极为方便。这是其他很多主题没有做到的一点
  • next主题内部还分为4个主题方案：Muse、Mist、Pisces、Gemini，可以自由选择，更加多元化。
  • 界面高端大气，配色低调奢华。

ps：如果你没有用next主题，那么以下个性化设置就不用看了。因为它们都是next的配置。

按照主题文档设置

选定了主题后，建议先看看主题的文档进行个性化设置。里面是最基本的标签、分类设置，还有第三方服务设置：next主题配置

其他的个性化设置

因为用的是next主题，所以这里也是针对于next主题的个性化配置。我博客的所有个性化都是来自这些链接：

上边这些链接里的设置，均为博主亲测有效。从这些链接可以看出，博主也是折腾了很久的。。。

在Github上看issue或者提issue

如果你还想折腾，还有两种途径：

  • 可以看看next在Github上的issue：这些都是别人提的，可能会有你想要的设置。如果你遇到了问题，也可以自己提issue。这是网址：next/issues
  • 去Hexo的官方插件页面找，这里的插件很多。只有你想不到，没有你找不到：Hexo插件

我的建议

  • 个性化固然好，但是在设置的时候一定要细心，这些都是要打开代码文件去修改的，Sublime你值得拥有
  • 关于图床，博主之前用的七牛云，但后来通知那些免费外链有效期过了，所以所有图片都没了。。。这里推荐SM.MS和PicGo
  • 虽然个性化是可以让你的博客看起来高大上许多，但是不要太过了。忘了自己搭建博客的初心，只有文章才是最重要的。
  • 强烈建议： 将博客源文件用github托管，可参考这篇回答

网站链接

下面是博客搭建过程中用到的一些平台和网站的链接，比如Livere提供的评论功能，七牛图床等：