HOME/Articles/

Hello, World!

Article Outline

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并输入以下几行命令:

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 一次性上传所有更新,可以记录一下改了哪里。然后我们的博客本体就更新啦。

附录

如何使用Win的终端预览打开conda环境

安装conda之后,只能通过conda启动的终端才能使用conda环境;Windows的“终端预览”工具又好用又好看,却不能使用conda环境。怎么样才能在终端预览中之间进入conda环境呢?

  1. 以管理员身份启动 PowerShell,并执行 Set-ExecutionPolicy -Scope Currentuser -ExecutionPolicy Unrestricted,如果又询问则回答 Y
  2. 启动 Anaconda Prompt 或者 Miniconda Prompt,然后执行 conda init --all
  3. 在终端预览中打开新的 PowerShell 页签,就会显示已经启动conda环境

后记

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

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

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

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

欢迎交流和指点。谢谢。

2019年12月27日 于Science图书馆

致谢

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

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

参考模板和教程:

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