Hello, World!

从零开始的博客搭建之路

Posted by Mike Lyou on December 27, 2019

Life is short, write your blog.

本文详细介绍了本博客搭建的完整过程,并记录了本人在实际操作中遇到的问题。

本文并不是一篇完整的教程,而是以两篇优秀教程为基础、同时参考诸多资料,重新整理而成。本文尽可能涵盖了所有步骤,并补充了一些其他教程不涉及的基础知识,对新手具有很好参考价值。

目录

  1. 前言
  2. 概念与工具
  3. 搭建博客的完整过程
  4. 如何更新博客
  5. 后记
  6. 致谢

前言

刚刚开始研究生生活的我,学习知识的欲望又重新被点燃,很希望能通过写总结来促进和巩固对知识的学习。就在这个很好的时机,我发现了写博客这个方法。在看了 《为什么你要写博客?》 之后,我更加坚定了搭建博客的想法。

于是在期末结束后,我开始寻找教程,开始搭建自己的博客。博客的第一个版本,我使用的是 @cnfeat《简明 GitHub Pages 与 jekyll 教程》 及配套模板。个人认为教程写的很好,按照教程我一步步搭好了博客。然而这一版博客还没开始用,我就想换模板了,原因是觉得美观上少点东西。

于是我找到了另一个,也是博客使用的模板: @Hux的博客模板。谁知这一换模板,诸多问题接踵而至,导致原本三天可以搞定的事一星期才解决(当然中间弃疗去摸了好几天的鱼)。具体遇到的问题会在详细步骤中提到。

历经千辛万苦,在一个平静的下午,终于把 我的个人博客 —— mikelyou.com 搭建成功了。

这是博客里的第一篇文章,初次与这个世界见面,让我们大喊:Hello, world!

相关概念与工具

在讲搭建博客的具体步骤前,弄清楚一些概念会有所帮助。在搭建博客的过程中会用到多个工具,在这里简单列举一下。如果看不懂可以跳过这部分,直接前往 #搭建博客的完整过程 →,在实际搭建过程中出现疑惑再回来看。

什么是域名、DNS 和 IP
  • 域名 就是我们常见的www.baidu.com或其他后缀的一串网址,其类似于现实生活中一家店铺的名字,比如“张三烧烤”(我瞎编的)。

  • IP 是形如208.80.152.2(wiki的IP)的一串字符,是网站的真正地址。好比只知道“张三烧烤”这家店的名字并不能带你走到店里,你需要知道它的具体地址,比如“第五大道269号”(也是瞎编的)。

  • DNS 是将域名和IP连接起来的东西。好比地图册,可以告诉我们“张三烧烤”的具体地址是“第五大道269号”。

  • 想了解更详细的内容可以参考 《域名、DNS、IP地址的对应关系》

什么是ruby、gem 和 jekyll
  • ruby 是一种脚本语言。

  • ruby gem是用ruby语言写的一个“程序”,简称 gemruby 1.9.2及其以上是已经默认安装了ruby gem的)。

  • jekyll 是基于ruby的博客生成“软件”,需要在安装ruby后通过gem命令安装。

目前常见的博客搭建有两种:一种是 GitHub+jekyll,另一种是GitHub+Hexo。本博客使用前一种 GitHub+jekyll 方法,也只讨论这种方法。

重要 :在 GitHub 上fork喜欢的jekyll模板后,博客内容实际上还未生成,此时访问username.github.io只会看到 GitHub Pages 的 “Site Not Found” 。我们需要将repositoryclown到本地,并使用jekyll运行,产生“_site”文件夹,这个文件夹里的内容才是真正显示在博客上的。(我使用的前一个模板没有用到jekyll,这便是换模板后的问题来源。真让人头大。)

购买的域名和GitHub Pages的关系

我们的博客托管在GitHub Pages,也就是username.github.io这个仓库(repository)中,而我们购买的域名如whatever.com只是一个网址,当我们在浏览器中输入whatever.com时,由于 DNS 将二者关联起来,网页会直接跳转至我们的博客,也是我们的仓库username.github.io,只不过浏览器中显示的还是whatever.com

需要安装以下工具:
  • 我的系统 win10 x64
  • ruby 2.6.5
  • gem 3.0.3
  • jekyll 4.0.0
需要注册以下账户:
  • GitHub账户
  • 在域名商的账户(如 GoDaddy),用于购买域名
  • DNS 服务商账户(如 HE),用于使用 DNS 服务
  • Steam 账户,用于搞不定时放松心情

注意: 记得妥善保存账号和密码。

准备开始

搭建博客会需要一点耐心和一点钻研精神。在这个过程中如果卡住了,百度一下别人有没有出现过类似的问题,检查一下自己有没有操作错误,善用 “重头再来法” 和 “摸鱼放松法” 。

另外,建议在你平时学习的地方进行这个过程,坐在图书馆会比坐在沙发上效率百倍。

如果你已经做好了时间和心理的准备,就开始搭建你自己的第一个博客吧。冲鸭~

搭建博客的完整过程

我建议在开始所有操作之前,打开一个记事本或笔记软件,把所有用到的网址、内容、参考文章统统记下来,害怕泄露隐私就写在纸上,以防忘记。无论是什么东西,忘记了都很麻烦。

博客的搭建主要参考了 @陈素封cnfeat《简明 GitHub Pages与 jekyll 教程》 以及 @无心CasualMing《jekyll安装》 两篇教程, 使用了 @黄玄Hux博客模板

接下来是搭建博客的详细步骤:

1. 购买域名:

去域名商购买域名。我是在域名商 去他爹 GoDaddy 购买的。购买过程很简单,关键在于想好你的域名叫什么;隐私保护通常不需要购买。参考 cnfeat的教程。

2. 注册DNS服务:

去 DNS 服务商注册 DNS 服务。广受好评的有国内服务商 DNSpod 和国外服务商 HE。DNSpod 的使用参考 cnfeat的教程,HE 的使用参考这篇教程:《HE的使用教程》。这一步先注册,具体设置看后面。

3. 安装Node.jsGit

请直接参考 cnfeat的教程。

4. 注册GitHub账户:

前往 GitHub官网。取个好名字,不要中二,将来仓库的名字必须是你的用户名.github.io

5. 配置SSH Keys

参考 cnfeat的教程。其教程中的代码都是在cmd中输入的,前面的$ 不是我们需要输入的内容。不懂如何使用 cmd 的可以先看看 《cmd应用基础扫盲教程》

6. 将独立域名与 GitHub Pages 的空间绑定
  • DNS 设置:前往DNS服务商填写配置,配置方法分别参考 cnfeat的教程 和 HE的使用教程。(HE似乎不能添加·记录,就改填@记录吧。A记录是GitHub Pages的IP, NS记录是DNS服务商自己提供的网址,CHNAME记录是形如username.github.io的你的博客仓库, TTL都设置成86400就没问题。没反应就清理一下缓存。)

  • Nameservers(NS) 的设置:去域名商的网站,找到名为 Nameservers(NS) 的设置,将其原有内容删除,修改为 DNS 服务商提供的地址。设置方法分别参考 cnfeat的教程 和 HE的使用教程。

  • GitHub仓库设置:在GitHub仓库填写CHANME.md文件,或在设置中填写个性化域名,即你购买的形如whatever.com的域名。

似乎必须上面三项都需要设置正确,才可以访问博客。从设置到生效可能 会有延迟,不要着急。清理浏览器缓存 有时会有奇效(我就在这卡了很久,清理缓存瞬间解决)。

7. 使用 GitHub Pages 建立博客:

大佬可以自己写,不佬就直接 fork 别人的模板啦,方法参考 cnfeat的教程(这里网址写的很容易看错,多看几遍)。

就在这时我突然决定换模板,随后遇到诸多问题,怀疑人生好几天,然后发现还少了后面两步。)

8. 安装ruby(包括rubygem):

这里主要参考 @CasualMing 的 《jekyll搭建》 以及 jekyll官方主页

这一部分可能会有点乱,因为每个工具都有不同的版本,彼此之间还有支持的需求。我的建议是:参考上面这篇教程的方法,去官网 下载安装最新的Ruby+Devkit;然后直接尝试安装jekyll,如果哪个工具版本不支持会有提示,然后就相应的更新。善用 “反复重装法” 。

在国内gem的源似乎被墙,可参考这篇文章:《jekyll博客搭建之艰辛之路》

注意: 安装的软件和博客仓库最好放在 不含空格的英文路径。如果路径中有Program Files这样含空格的文件夹,在使用cmd命令时需要加括号"Program Files",参考 《CMD命令进入某个目录》

至此,博客的基础搭建工作完成。 不过现在博客还无法访问,因为其内容还未生成,我们需要进行一次 #更新博客操作 生成内容。已经进行到这里的你只差最后一步了,加油鸭 ~

如何更新博客

现在博客已经搭建成功,那么如何把自己想要呈现的内容发布到博客上呢?我们需要使用jekyll生成网站。采用下面的方法:通过搭建本地服务器,在修改的同时随时预览网页,确认无误后一次性提交更新。 这样的好处在于,可以及时预览编辑产生的效果,且不会产生大量修改记录。第一次可能会觉得很复杂,但熟悉操作后就会比在网页操作方便很多。

具体步骤如下:

1. 将仓库clown至本地

使用 GitHub Desktop 将仓库(也就是博客模板)clown至本地。参考 cnfeat的教程。

2. 使用jekyll搭建本地服务器

这一步可参考 《jekyll搭建》 #安装jekyll

我的仓库位置在E:\GitHub\mikelyou.github.io,打开cmd并输入以下几行命令:

1
2
3
4
5
E:					#进入E盘
cd E:\GitHub\mikelyou.github.io		#进入仓库所在目录
jekyll serve				#开服,网址会写在下面,我的是`http://127.0.0.1:4000`

Ctrl+C					#关服
3. 修改或添加内容

修改本地文件,然后在本地服务器生产的网页就可以看到改动。我们可以反复修改直至满意。

修改和添加内容个人觉得很简单,就是在文件之间抄一抄改一改。好的模板都会有详细的说明文件README.md,并会在相关代码出加有注释,不(ai)予(mo)赘(neng)述(zhu)。

这里有 GitHub Markdown 语法 的官方帮助页面。

关于仓库中各个文件夹是干什么用的, jekyll官方文档 有详细说明。

4. 上传更新

保存本地文件的修改,关闭服务器,在 GitHub Desktop 一次性上传所有更新,可以记录一下改了哪里。然后我们的博客本体就更新啦。

后记

本人是学材料专业的,这些玩意儿真的完全不懂,好在以前学过基础的编程,能看得懂简单的配置文件。

虽然思想上有所准备,但搭建博客的过程还是比我想象的更曲折一点。有句话说,“专业的事,留给专业的人做”,而能够利用别人专业的成果,做自己要做的事,则是我等需要具备的能力。搭建博客的过程着实让我学到了很多,希望在今后更新博客的过程中,依然可以持续不断的学习。

本文不是一篇完整的教程,其初衷仅仅是作为供自己查看的记录。如果这篇文章对你有帮助,请告诉我,我会考虑将其补充为完整教程。

如果你对本博客的其他细节感兴趣,可以看看这篇文章,里面杂乱得记录了诸如 如何添加评论模块 等方法。

欢迎交流和指点。谢谢。

2019年12月27日 于Science图书馆

致谢

特别感谢 @黄玄Hux 精致详细的博客模板,以及 @陈素封cnfeat@无心CasualMing 的教程。

这个博客的成功搭建,离不开各位陌生大佬们的帮助,在这里向大佬们表示感谢。建立此博客以及撰写此文所用到的参考资料都在下面列出。本人学识和精力有限,如有错误,欢迎斧正。

参考模板和教程:

本文为 Mike Lyou 本人原创,但文中内容多有借鉴上述参考模板和教程。本文谢绝转载。本文亦在简书知乎专栏发表。


Author: Mike Lyou
Link: https://blog.mikelyou.com/2019/12/27/hello-world/
Liscense: All work at this site, unless otherwise noted, are not allowed to be reproduced, all rights reserved. If any post accidentally infringes your copyright, it will be removed shortly after being informed.

本站所有文章,除非另有声明,均不允许以任何形式转载,本站保留所有权利。如果本站内容不小心侵犯了您的著作权,侵权内容会在收到通知后立即删除。