一份关于个人博客搭建的小白分享 || 环境搭建

个人Blog运行的原理

由于博主并非专业的CS专业大神,所以开始时也是摸着教程起手。但是博主发现目前大多数教程主要是针对实现一个结果的步骤教学,或者说“所见即所得”,在入手初期效率很高。一个门外汉(以博主为例)也能很快的搭建出一套可以用的环境。但是在后期,遇到问题或者想要客制化实现某些theme的特定功能时很可能不知如何下手。博主本人在初期就吃了这个亏导致一直浑浑噩噩不知道原理。所以本篇文章博主打算首先介绍一下整个Blog实现运行的原理。如果比较急着看到教程的读者也可以直接跳至第二节。 想要先看看效果的可以浏览博主的个人Blog

利用Hexo撰写博客,并从本地部署至Github

博主在大学苦受C艹折磨,之后对于编程打心眼儿里的怕。度娘一搜如何搭建网站的教程。看看Html这些玩意儿感觉基本上可以收拾收拾睡了。但是后来很走运看到了柏荧的博客搭建教程,虽然博主最终的Blog搭建和BY大神略有不同,但还是从这里获取了很多启发。再继续的收集信息之后发现有一些神奇的东西可以让你专注与文章的写作,而不用花费大量时间在html的构建上。这些东西就是博客框架,常用的博客框架有Jekyll,Hexo,Simple,Octopress,Pelican以及Lo·gecho等等。这些框架之间的优劣对比在网上有很多的文章,在此博主不去赘述(主要因为博主自己也不懂。。。。)。 至于博主最后的选择则是Hexo。如果硬要问原因是什么的话,博主只能说Hexo的theme普遍比较好看(毕竟好看是第一生产力),同时支持Markdown语法。最后还有很重要的一点就是Hexo的文档十分友好(是那种连博主都可以看的懂的文档,可以说是十分的良心了)。
拥有了Hexo之后,你会发现整个的写Blog的过程变得十分轻松友好且高效,个人只需要掌握很少量的命令就可以很轻松的实现html文件的实现。而这一切都只发生在你个人的电脑上,也就是本地。意味着你写的一切到目前为止都只有你自己一个人能看到(那还要个🧺 的html),所以下面就要介绍如何把我们的Blog推向星辰大海——部署至Github。

利用Github进行代码托管

为什么是Github

免费且高效

第一 免费
说到GitHub,连博主这样的菜鸡都听说过其作为一款免费开源的软件托管平台的大名。使用这样一个开源平台来托管个人博客这种非盈利性的网站的代码对于各个博主来说都是比较合算的。
第二 高效
Github在创立repo的时候就会自动的为你创建一个静态页面。而静态页面虽然可能有些交互的功能难以实现,但是对于一个个人博客来说,完全足够。并且静态网页的内容相对稳定,因此容易被搜索引擎检索,阅览速度也十分迅速。同时作为一个出名到爆的开源平台,GitHub上有各路大神大牛,你几乎可以找到所有你希望实现功能的库和代码,快速高效的达成优化网站的目标。

GitHub的作用

正如上文所说的,GitHub对于Blog来说,就相当于一个繁华商业街上的展柜,这个展柜负责帮你将你想要卖的东西从深山老林里面拉出来再放在店里。毕竟如果没有互联网的话说不清大清到底亡还是没亡。

至此就是整个Blog运行的原理,虽然其中还有很多细节值得进一步讨论(很多是博主自己瞎猜的,不过用来理解到目前为止没出过什么特别不能解释的地方),但整体的框架是搭出来了。如果还用不太明白的读者可以再看一下下面的流程图。看完我们就开始正儿八经的教程了。

Blog环境的初步配置

注册Github,创建Repo

正如之前所说的,我们需要一个GitHub的Repo来充当展柜的作用,第一步如果没有GitHub账号的朋友需要去注册一下,注册完之后就可以开始创建我们的Repo。


在Repository name中写yoursitename.github.io,例如博主的就是zhenyuwei99.github.io(有教学贴提过yoursitename需要喝用户名相同,博主没有尝试使用其它的sitename,有兴趣的话读者可以尝试一下)。这个地址最后就是你的Blog的展柜,但同样的你也可以选择自己购买自己的域名,比如博主的madwayne.com,至于如何配置个人域名超出了本篇文章的讨论范围,博主将会在后续的文章中进行讨论。
这个时候你可以打开Repo中的Setting,在这个位置

再找到GitHub Pages


你可以看到有这样一句 “Your site is published at yoursitename.github.io” 这里因为博主配置了自己的个人域名所以没有显示本身的网址。你可以点开链接,看一下自己未来几百篇文章将会放置的地方。当然现在这个时候用的是GitHub自带的theme,毫无美感可言,不过已经已经完成了这一阶段的任务,后面就要靠Hexo来进行网站美化以及文章撰写工作了。

优雅的敲Hexo

如上文所说的,Hexo的文档十分友好,而且是有中文版本的(由于博主电脑自设的是English导致一直搜到的网页都是英文版,弄完了才发现有中文版。。。。),读者可以自行阅读文档进行环境的配置,博主在此不再赘述。下面主要说明如何优雅的在本地进行文章的写作。

编译器的选择

博主本人之前一直习惯于Latex写作,所以一直用的是Submile text 3进行编译(主要是没有遇到现在用的,Atom也可以编译Latex)。看过Hexo文档的读者会发现Hexo需要常常用到terminal敲命令,而进行窗口的不断切换实在不是一件令人舒适的事情,而在看Hexo文档中自带的视频的时候,我发现作者所用的一个编译器可以自带terminal,翻边了YouTube评论才知道编译器的名字叫Atom,官网在此,发现也是GitHub的产业(嗯,GitHub大法好)。

下载安装就完事儿了。Atom相较于其他编辑器在于其丰富的可扩展性,你可以在上面获得各种各样你想要的package来实现特定的功能,正如在首页所说的:“A hackable text editor for the 21st Century”。当然还用最重要的一点就是颜值很高,theme也有很多选择,下面仅介绍一下我的选择以及package的配置。

Theme的选择

Atom自带四种Theme,同时也有很多别的大神设计的theme可以使用,博主在这里使用的是比较有名的 Atom Material Ui,博主写文章时候的工作效果如下。

Theme的初始状态并不是现在这个样子,需要在Theme的Setting里面将 Tinted Tab Bar 选项打开

Package的配置

这篇文章博主只想谈一下用来使用Hexo所需要的Package,其他的功能(例如博主也会用Atom来写Latex和C艹将来会在别的文章中详细说明)
1 PlatformIO IDE Terminal
这个Package是博主本人转向Atom的主要原因,如上文所说的,Hexo使用过程中经常需要使用Terminal来敲命令,切换实在麻烦,这个Package的作用就是在Atom里添加一个Terminal的窗口,十分的好用。效果如下。

2 atom-beautify
这个Package的作用时对代码进行自动的高亮以及排列,对于强迫症患者来说可以说是很好用了,同时他也支持很多不同的语言,根据作者的介绍包括HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL等等。

Hexo使用的一些问题

1 Hexo更换Theme
在Hexo的官网中可以找到很多颜值很高的Theme,博主所选择的是比较成熟的Next。原因在于其比较成熟,同时用于用户量很可观,寻找解决问题的方案也很方便。本文以此为例展示如何为自己的网站改变主题。
首先找到Next的文件库,在Hexo中点击文字(点击图片的话是预览效果)找到Theme的Repo,复制链接

这个时候在用Atom打开你自己存储Blog文件的文件夹,打开terminal,输入以下命令:

$ cd themes
$ git clone "siteoftheme"

clone theme的Repo。
下面开始配置_config.yml文件,注意这里要区别站点配置文件以及主题配置文件。这里首先是在Blog文件里的站点配置文件,用于调用网站配置所需要的文件。

在文件中找到theme这个选项,将其改为themes文件夹中clone获得的文件夹名,注意.yml文件 :后需要一个空格,否则不识别。

2 Theme的客制化
首先找到theme的配置文件,具体路径应该是 \"blogfolder"\themes\"themename",通过更改其中的内容可以获得相应的效果,Next比较成熟可以很方便的添加插件实现很多功能,其中的注释也很详细。虽然是英文只要读者耐下心读基本可以理解使用方法,同时推荐Hexo的Next主题详细配置这篇文章,或者也可以看Next使用文档,基本上可以解决所用问题。如果读者还遇到了无法解决的问题,欢迎email博主一起讨论。

部署本地代码

这个时候,我们已经完成了进入展示柜前的所用工作,我们已经很优雅的完成了文章的写作同时也生成了产生网页所需要的html文件,下一步我们只需要将这些本地文件部署至GitHub就大功告成了。

直接网站上传

打开GitHub中的Repo,直接点击Upload files上传文件。


这种方法比较简单,但是没有利用好Hexo。

利用Hexo上传文件

Hexo提供了十分便捷的一件部署方案,$ hexo deploy或者$ hexo d。为了使用这个功能首先需要安装hexo-deployer-git。
在 terminal中输入:$ npm install hexo-deployer-git --save
安装完成后修改站点配置文件:

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published
  message: [message]

需要注意缩进的问题,deploy后的每一行需要缩进相同。
上述所需要更改的主要是repo和branch选项,repo即为放置Blog文件的库的地址,branch一般直接master即可。至于message选项博主也没弄懂有什么用,缺省影响不大。更详细的信息读者可以参看Hexo文档中部署一节。

结语

至此我们就已经完成了Blog的初步搭建,同时为大家大致梳理了一下个人Blog的运行原理,希望对大家有所帮助,后面博主也会更新一些我自己摸索的更加有意思的东西。至于各位将一部分的人生花在观看一个无聊的SB写的十分啰嗦的文章上,博主在这谢谢了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350