最近适逢疫情严峻,笔者无法顺利开展实验,于是决定重拾计算机的“老本行”,钻研一下如何搭建自己的GitHub主页。经过这一两天的努力,笔者终于完成了GitHub个人主页的搭建,接下来只需要对博客进行小修小补,并搞清楚版本管理与部署即可。
也许有人会问,按你的说法,用Hexo搭建GitHub个人主页,只需要一天搭框架,一天修故障,不是易如反掌的事?但换个角度想,笔者毕竟没有按部就班照着一份系统的教程来建主页,而是把网上的资料东拼西凑,才勉强搭了一个能用的,其中踩过的坑和绕过的远路,只有自己知晓。为了避免今后再费周折,笔者决定写下这篇教程,既是给自己准备一份建站的参考资料,也可以用来帮助其他初涉Hexo,希望用它搭建博客的爱好者。
既然这样,那……就开始了?
Git是一款基于快照(snapshot-based)的分布式版本控制(distributedversioncontrol)工具。“基于快照”意味着,当一个用户用Git更新文件(如一段代码)时,Git不会为每个文件保存一个版本,而是先计算文件的哈希码,并与之前的版本比较,如果哈希码相同,Git便会记下一个链接,这个链接指向上一个版本储存的文件,如果哈希码不同,Git则会创建一个快照,并保存这个快照的索引,如图0.1所示。
而“分布式”意味着,任何一个开发者,都可以在自己的电脑上,存储自己编辑的当前版本的文件,以及这些文件从创建,到每一次修改,最后变成现在的本地存储版本的过程。这样,即使开发者与(存储主干版本的)公共服务器断开连接,开发者仍然能用自己的电脑,对文件进行增删与修改,并且在本地提交版本更新,等到与公共服务器重连后,再提交pullrequest,然后与主干版本合并,从而大大提高了开发效率(见图0.2)。
虽然Git是分布式版本控制工具,但正如前面提到的那样,为了保证有一个稳定的主干版本,供不同的开发者下载与修改,必须要设立一台公共服务器,用以存储主干版本的文件。这台公共服务器,既可以由开发者亲自组装搭建,也可以来自于具有代码托管能力的商业公司(即Gitserverasaservice),而GitHub便是其中历史悠久(2008年创立),规模最大(超过8千万的用户,超过2亿的代码仓库,其中开放仓库近3千万),也是最富盛名的Git服务平台,其简洁易用的界面、丰富的代码资源、友好的社区氛围,为搭建个人网站提供了极大的便利。
根据Part0的描述可知,仅仅在GitHub申请账号和建立代码仓库,而没有建立本地的Git环境,或是建立了Git环境,却没有将其与GitHub关联,仍然不能把博客页面上传到GitHub部署。因此,我们要做的下一步工作,就是在本地计算机上安装Git,然后在Gitbash中登陆自己的GitHub账号,最后配置SSH公钥,便于之后拉取或上传代码时,以SSH方式关联本地Git与GitHub。
考虑到我们是在Windows下更新GitHub个人主页,这里我们直接点“Windows”,下载适用于Windows系统的Git套件。
下载完毕后,双击安装包运行,勾选“同意使用协议”,之后选项全部默认,一路点击Next,等待安装程序执行完毕后,点击“Finish”完成安装。
通常情况下,Git套件安装后便能立即使用,如果不放心,可以在命令行中输入git--version并执行,若弹出gitversion×.×.×.windows.×,且与安装包对应版本一致,便说明Git组件安装成功。
1ssh-keygen-trsa-Cuser.email[your_email]此时会依次弹出如下提示,我们只需依次摁回车即可,不需要额外操作:
123Enterfileinwhichtosavethekey(/c/Users/tanglab_lzh/.ssh/id_rsa):Enterpassphrase(emptyfornopassphrase):Entersamepassphraseagain:整个密钥生成过程如下图所示:
ssh-keygen会将生成的私钥文件id_rsa与公钥文件id_rsa.pub放在以下目录(如果没有该文件夹,ssh-keygen会自行生成一个),故只要找到用户文件夹,将其下的.ssh文件夹打开,便能找到id_rsa.pub:
1C:\Users\(computer_username)\.ssh用记事本打开id_rsa.pub,按Ctrl+A全选,再按Ctrl+C复制,然后按图1.9所示步骤,找到“SSHandGPGkeys”选项卡,单击“NewSSHkey”,进入添加SSH密钥界面。
添加SSH密钥界面如图1.10所示,总计有三个框:“Title”代表密钥名称,一般用好记的名称表示;“Keytype”代表密钥类型,有“验证密钥(Authenticationkey)”与“签名密钥(Signingkey)”两种选项,此处保持“验证密钥”不动即可;“Key”为密钥内容,这是添加密钥的重点,我们把刚才从id_rsa.pub复制过来的内容粘贴到这个框,然后点选“AddSSHkey”,生成的公钥就会添加到GitHub中。
双击安装包运行,勾选“同意使用协议”,之后选项全部默认,一路点击Next,等待安装程序执行完毕后,点击“Finish”完成安装。
为确保Node.js的所有组件均已正常安装,我们要打开命令提示符(WindowsPowershell或WindowsTerminal亦可),分别输入如下命令并运行:
12node-vnpm-v如果分别跳出安装包对应的版本号(如图2.2所示),说明Node.js成功安装,否则应卸载Node.js,重新运行安装包进行安装。
1npmihexo-cli-g正常安装后,命令行通常会输出如下提示
hexo-cli@(version-number)added××packagesfrom××contributorsin××s
或是如下提示
如果没有看到类似于上述的提示,而是弹出红色或棕黄色的提示,并含有“error”、“unsuccessful”等字样,则表明hexo-cli没有安装成功(此时要么没有换成国内源,要么在安装过程中出现了强制中断、环境漏配等问题)。
确保hexo-cli安装成功后,依次输入以下命令并运行,让npm在新文件夹中初始化hexo环境,同时安装运行的必要组件:
12hexoinit.npminstall如果hexo的环境变量配置正确,运行上述命令后,新文件夹中会成功生成如下文件:
显然,建站者日益增长的审美与实用需求,与默认主题较为贫瘠的生产力之间,产生了巨大的矛盾,这促使广大的开发者对Hexo主题进行个性化修改,自定义主题因此诞生。
想要色彩鲜明的扁平化设计?Material主题就很适合你:
想要遵循KISS原则的教诲,在黑白二色间自由翱翔?那就尝试一下NexT主题:
甚至,看官想来点二次元?也有大手子做好了明日方舟主题:
可以说,除了极其个性化的设计外(这得自己动手丰衣足食),任何你想到的界面风格,都可以在GitHub上找到对应的主题源码,只要正确的下载与安装,再加上适当的调参,便能将单调的Hexo初始页面,打造为炫酷的个人主页!
好了,废话少说,让我们看看怎么在初始的Hexo框架上,添加Material主题吧。至于为什么要采用Material主题,笔者在这一节的结尾给出了充分的理由,请诸位务必往下阅读哦!
将下载的1.5.6版Material主题包解压缩,得到一个叫“hexo-theme-material-1.5.6”的文件夹,考虑到我们不需要标注版本号,故更名为“hexo-theme-material”。然后,打开本地个人主页的根目录,找到“themes”文件夹并进入,再将“hexo-theme-material”复制到“themes”文件夹下。
刚刚解压的Material主题包,还没有添加任何格式设置,因此我们要打开themes/hexo-theme-material,找到_config.template.yml,并在原地拷贝一份,旧有的_config.template.yml保持原样(或改名为_config.template_duplicated.yml,以防与根目录下的_config.template.yml冲突),新拷贝的改名为_config.yml,它代表针对Material主题的设置(而非Hexo框架的设置)。
最后,我们下拉到theme:选项,填入放在themes文件夹下的Material主题包的名字(此处为“hexo-theme-material”),如图3.7所示,便可以保存_config.yml并退出了。
回到个人主页的根目录,点下右键,选择菜单中的“Gitbashhere”,启动Gitbash,依次输入以下命令并运行。
注意:修改_config.yml时,一定要注意书写格式!首先,选项名称后的冒号一定得是英文的冒号:,而不是中文的冒号:。其次,选项名称与冒号之间没有空格,而冒号与后面的选项取值之间,则有一个半角空格。任何没有按照上述标准添加或修改的选项,其导致的无法生成网页的html代码等后果,均由修改者承担!