0%

最近在考虑找个地儿给文存档,于是研究了下怎么搭博客。过程中找了不少资料也踩了不少坑,决定写下这篇简易教程,一方面给有需要的人做参考,另一方面也趁记忆尚热理顺留档自己备用。

1 前言

1.1 本文适用性

在搭博客之前,需要先想好自己的需求是什么,这会影响你选择搭建哪一类博客。因为不同类别的博客需要的东西是大不相同的。总体而言,网页分为两种,静态的和动态的。静态的网页并不是说页面上没有动态特效,而是说每一个页面都是事先写好的,访问者看到的是固定的页面,不同访客看到的页面是完全一样的;而动态的网页则不是事先写好的固定的页面,而是由访问者发起需求以后,从数据库中调取相应的信息自动生成的,不同访客看到的页面往往是不同的。

所以,如果你有几千张图,需要根据访客的兴趣自动生成他们的首页,或者希望把它做成一个类似论坛或是电商那样有着极强互动性的平台,那么你需要做动态网页需要数据库,而这篇教程对这些都不会涉及。

如果你和我一样,只需要给自己的博文存档,让访客可以通过分类目录通过时间线通过tag通过站内搜索方便地查找和阅读你的博文,在互动上仅需最基本的评论留言功能,那么这篇教程或许能给你提供一些参考。

1.2 平台的选择

我选择的平台是github,使用的博客框架为hexo。选择github是因为它家提供免费的域名和没有空间限制的云服务器,只需要邮箱注册就可以了,不需要科学上网,作为世界上最大的码农同性交友平台应该能too big to fail实现我不需要频繁搬家的存档需求。而如果自行购买域名和云服务器搭建,除了费用以外还需走备案流程,所需耗费的时间精力要高出不少。

而选择hexo则是在选择github后的一个水到渠成的选择,因为hexo原本便是github上的一个开源项目,与github pages的适配性非常强。hexo很好上手,有非常详尽的说明文档,也有不少完成度高的开放的UI模板可以选择,不需要太多的代码和美术工作。对于只需极简页面无需太多设计感的人来说够用了。

2 搭建一个硬盘博客

搭建博客的工作大致来说可以分为两大类,一是做博客本身,二是把它放到网上让他人可以访问。我们这里先做第一类工作,也就是搭一个本地的博客,就像硬盘文一样,这一步完成后,它只能在自己的电脑上看到。下一步我们再把它放到网上。

一个本地的博客需要什么呢?我们想象一下,我们需要浏览器页面上能按照我们需要的排版显示我们的博文,还需要一些分类归档的功能来方便我们把系列的文章放在一起,最好还有个目录有个时间线有个tag云有个本地搜索什么的。由于我们做的是静态网页,因此我们需要把每一页写出来。现在可以右键点开查看网页源代码,看看我们当前这个页面写出来是什么样的,我们会发现这是一个非常浩大的工作,而且有一些目录时间线tag云啥的功能我们完全不知道应该肿么写。那么,有没有什么东西,能帮助我们批量生成大量这样的代码(毕竟有很多格式排版是重复的),实现那些功能,我们只需要根据自己的需求调整一些设置,把工作量降低到只写非写不可的呢?

答案是有的,这便是前面我们提到过很多次的博客框架。博客框架的存在意义在于我们可以用它来省掉敲绝大多数的代码,只需要我们用它能理解的语言(在本文里是markdown)来写我们的博文,然后它会帮我们转化生成网页所需的前端语言,使得我们的博文显示在我们本地的浏览器,以及在之后部署到网络上后显示在访客的浏览器上。

2.1 安装博客框架hexo

2.1.1 安装git和node.js

如同过去我们要玩一款单机游戏,需要先在电脑中安装好它运行所依赖的java或是c或是flash或是DirectX这些平台才能愉快的玩耍一样;博客框架hexo基于git和node.js。因此,在安装使用hexo之前需要首先安装这两个软件,前往git(https://git-scm.com/downloads) 和node.js(https://nodejs.org/en/download/) 的官网去分别下载它们的适用于自己电脑的版本,安装时的选项均选择默认安装即可。

需要说明的是,本文的运行环境是windows,如果你是mac,安装方式会有所不同,前往hexo官网,在docs中会有对mac的安装指引。

2.1.2 安装hexo

安装好这两个软件后,我们接下来就可以安装hexo了。在电脑中选择一个位置新建一个文件夹用来做博客所有文件的存放处。我给文件夹的命名是blog,在后面需要举到这个文件夹名称时我会用blog文件夹这个名字,但你可以给它取任何名字,最好是字母构成的避免在命令中出bug。

或许你会觉得很奇怪,一般软件在安装过程中只要选择了安装路径不是会自动创建文件夹的么,为什么我们要先自己创建一个文件夹?这是因为,hexo的安装和我们过去常用的软件安装方法不大一样,我们并不是下载一个安装包然后点开它根据对话框里的提示完成安装,而是使用命令语句来完成。你可能过去曾经用过windows的运行cmd里的命令(我在U盘时代会进这里来查看在打印店插过的U盘里有没有多出什么奇奇怪怪的隐藏文件删掉),而对hexo的从安装到使用的操作也是用类似的方式进行的。只是由于运行cmd对部分hexo的语句不支持,因此我们这里不是从运行cmd里而是用之前我们安装的git软件来写命令。

在blog文件夹里右键打开git bash,然后输入hexo的安装命令语句。这个语句改了很多次,它们过往的残骸被分布在各种hexo教程里。在你安装使用hexo的时候,最好去它的官网说明文档里确认一下最新的语句是什么。路径是Hexo-Docs-Overview,如果hexo没有对它家网页做大的变动的话会在这里(https://hexo.io/docs/) 。在我写这篇博文时的安装命令语句是:

1
$ npm install hexo-cli -g

2.1.3 初始化hexo

安装好hexo后,我们需要对它进行初始化,初始化语句同样最好先参看hexo提供的最新语句,路径在Hexo-Docs-Setup,如果官网没做大改应该在这里(https://hexo.io/docs/setup) 。在我写博文时的初始化命令语句是:

1
2
3
$ hexo init blog
$ cd blog
$ npm install

如果你给文件夹的命名不是blog,把上面的blog换成你的文件夹名就好了。然后我们会看到blog文件夹下出现了大量文件,这时hexo就已经安装到我们的电脑上了。这些文件中,我们在配置博客时会比较常用到的是_config.yml配置文件和theme文件夹,在日后写博文时经常用到的是source文件夹,后面讲到这些内容的时候再详细讲它们。

2.1.4 查看初始博客页面

接下来我们可以修改博客的一些基础配置,但我觉得看着预览修改会更直观一些,而现在我们已经可以看到本地预览了。输入下面的命令,或者在Hexo-Docs-Commands(https://hexo.io/docs/commands) 中找到server所对应的最新命令语句。

1
$ hexo s

然后在浏览器地址栏中输入localhost:4000,就可以看到这个本地博客的预览页面了。注意:预览时不要关掉git bash,否则页面就无法显示了。同时,在预览中,我们的git bash没法进行其它的命令,如果要使用git bash,需要先按ctrl+c退出预览,然后再输入命令。

2.1.5 修改博客基本信息

我们会发现这个初始的博客里有很多信息和自己是不符的,比如博客的作者,比如博客的标题,这些我们可以在blog文件夹下的_config.yml文件中进行修改。

_congif.yml文件可以用windows自带的记事本打开,但我更建议下载一个sublime text ,因为现在这个简短的配置文件还好,在之后我们要修改的主题配置文件那种上千行的代码在记事本的白底黑字中会非常容易误操作。而在以后写博文的时候我们也会觉得记事本中一个自然段就是一行超出页面范围了也不会在显示中自动换行的显示方式让人抓狂。sublime会通过分组缩进连线用不同颜色显示等等方法,来让代码看起来逻辑清晰,减少误操作的可能。sublime是免费的,尽管在使用中它会不时提醒你付费,但坚持不付费它也会让你一直试用下去。我的sublime从三年前一门心血来潮后来不出意外半途而废的前端mooc上收到安利安装至今,仍然没有因为未付费而被停用。

说回配置文件的修改,我们可以看到_config.yml里第5-12行是关于页面的设置。其中第6行title后面,我们可以输入自己博客的标题,第7行subtitle是副标题,会显示在标题的下方,与第8行description的区别在于后者会显示在作者的下方,而作者在第10行author处修改。第11行是博客的语言,默认是英文en,如果需要修改为中文,把en改为zh-CN就好了。第12行时区如果空着会根据系统默认来显示,不会受选择语言的影响。

需要注意的是在填写或修改以上内容的时候,填写的内容与冒号之间需要空一个空格,冒号如果不小心删除了自己补上的时候记得在英文输入法下输入。

继续在git bash中$ hexo s一下,打开localhost:4000,看看现在博客的标题和用户是否已经改好。如果之前没有退出hexo s,只需要把之前打开的预览页面刷新一下就可以了。

2.2 美化博客界面

我们现在的初始博客界面非常辣眼,在_config.yml的倒数第二大段#extensions中我们能看到它的主题theme是叫landscape,在blog文件夹下的themes子文件夹中我们也能看到landscape主题文件夹。虽然也能直接在这个主题界面下修改,但如果它和你心目中的博客页面相去太远,更便捷的做法无疑是先换一个与你理想的博客页面更接近的,再在那个主题的基础上修改。

2.2.1 下载主题

在hexo的网页上,有许多其它用户制作的开放的主题页面(https://hexo.io/themes/) ,可以从中选择一款自己相对喜欢且功能齐全的,把它下载到本地,解压后的文件夹放在blog文件夹下的themes子文件夹中。

2.2.2 应用主题

打开blog文件夹里的_config.yml(注意:是blog文件夹下,而非themes子文件夹下的某个主题文件夹内的同名文件),找到theme: landscape这一行语句,把landscape改成你theme文件夹下新主题文件夹的名称,保存退出。

此时再次通过$ hexo s预览,会发现localhost:4000中的页面已经按照新下载的主题来显示了。

2.2.3 配置主题

但此时的博客界面仍与我们想要的不同,这时我们需要修改主题的配置文件,来让它更接近我们心目中的样子。主题配置文件在blog/themes/你下载的主题文件名/_config.yml,注意这个文件名和之前在blog/_config.yml的文件名一模一样,但它们的位置不同,配置的项目也不同,注意不要混淆。

我选择的主题是next(https://github.com/theme-next/hexo-theme-next/blob/master/README.md) ,因为在试用了几款主题后,感觉这一款相比其它几款而言界面极简清爽,集成的功能相对最齐,开放给用户自行设置的项目最多。如果你选择的其它主题,2.2.3这小节下面的内容可能无法给你提供直接参考,请参见你所选择的主题在github的项目页面,通常作者会在readme文件中对配置项目进行说明,或是直接在主题配置文件_config.yml中以注释#的形式说明。

2.2.3.1 页面签名:第54-81行。

在你预览的博客页面底部,你可以看到一个由时间和你的id以及中间一个icon构成的copyright,以及下面是使用的hexo和next及其版本号的说明。对于这部分,我们可以在这里进行修改。如果你不希望博客页面上显示hexo,可以把第73和75行的true改为false,如果你不希望显示next,可以把第79和81行改为false。如果你不喜欢id和时间中间的这个黑色小人icon,可以在第62行改为你希望使用的icon,icon对应的名字可以在font awesome的网页 上去查询,用你选择的icon的名字替换掉原本的值user就可以了。如果你希望修改这个icon的颜色,在第66行修改,注意颜色的格式是十六进制颜色代码,如果你是在PS软件上取的RGB颜色,需要转化成对应的十六进制代码。

2.2.3.2 主题风格:第110-114行。

next主题提供4个不同风格的子主题,默认使用的是muse,你可以在这里改为其它3个中的一个。修改方式是把你要选的那个风格前面的注释符号#删掉,同时在muse这行最左边打个#注释掉就好。如果你是使用的sublime,会发现之前的muse这行灰了,而你新选的那个风格的那行变成了彩色。点击保存。然后$ hexo s可以看到页面已经变成了你新选择的风格。

2.2.3.3 菜单栏:第117-142行。

这里已经列出了许多类似主页、归档、分类、标签之类的栏目,把你希望显示在主页菜单栏上的项目前面的#取消掉让它在首页显示即可。

选择显示的菜单栏可以进一步进行个性化修改。在这个aaa: /bbb/ || ccc的格式中,其中的aaa是它在你博客首页上显示的文字,bbb是它是什么,ccc是博客首页上显示在这一条文字前面的图标。比如Categories: /categories/ || th,如果你希望在首页上显示的是文章类别这四个字中文,图标改成书本,那么就可以把这行语句改成文章类别: /categories/ || book,图标的名字和图样仍是参看font awesome的网页。

那么,如果我们希望做一个配置文件里没有提到过的页面该怎么办呢?比如我希望菜单里有一个JCS按钮,按钮前是个十字图标,点进去里面会是所有文章分类在jcs下的文章。只需要在menu:下面增加一行JCS: /categories/jcs/ || plus就可以了。

现在$ hexo s预览一下我们的页面,会发现首页的菜单栏上改成了我们希望的样子,但点进去JCS的按钮,会发现提示页面找不到。这是因为我们需要先新建一下这个页面。打开git bash,在里面输入$ hexo new page JCS,我们会发现在blog/source/文件夹下出现了一个叫JCS的文件夹,打开JCS文件夹下的index.md文件进行配置,里边已经有了两行语句title和date,保留它们,如果你希望修改页面上的标题,比如把JCS改成中文的万世巨星,那么在title的冒号空格后面写万世巨星就可以了。我们还可以增加一些别的设置,比如加入一行type: "categories"来规定类别,加入一行comments: false来让这个目录页面不要出现评论框。

2.2.3.4 侧边栏:第145-238行。

显示相关:侧边栏可以显示在左边或右边,如果你希望显示在右边,只需要把# position: right前面的#删掉,再把position: left前面加上#注释掉就可以了。同样如果对侧边栏的宽度不满意,可以把# width: 300前面的#删掉,然后把300改成你想要的宽度。

用户相关:如果你希望侧边栏上显示你的头像,可以把你选择的头像图片以avartar.png命名,然后放到blog/source/uploads文件夹下,接着把# In site directory (source/uploads): /uploads/avatar.png这行前的#删掉就可以了。如果你希望在侧边栏上显示你的社交媒体链接,可以把social link下想要显示的栏目前的#去掉,比如你希望显示微博链接,那么把#Weibo: https://weibo.com/yourname || weibo前的#删掉,再把yourname改为你的微博id即可。

2.2.3.5 阅读控件:第394-416行。

已读百分比和回到顶端:如果希望显示回到顶端按钮,把第394-399行back2top栏目下的enable: false改为true就可以了,把scrollpercent设置为true则会同时显示已读百分比。如果你不希望阅读百分比在一个浮动的图标上显示,而是集成在侧边栏上,那么把sidebar: false改成true即可。

书签:如果希望启用书签功能,把第409-416行bookmark栏目下的enable改为true就可以了。然后可以在color后面修改书签标志的颜色。同时,如果你希望访客上次看到哪里会自动记忆书签在下次打开的时候跳转到上次的位置,那么把save的值命名为auto,否则如果设为manual则需要访客手动加书签。

2.2.3.6 字体字号:第425-477行。

如果对博客的默认的字体字号不满意,可以在这里进行调整。需要说明的是,在调整字号的时候,是用比例而不是绝对值来表示的。比如你希望博客正文的文字小一点,那么在font下的global子栏目下的size后所输入的值,不能是绝对数多少多少,而是比之前的相对数比如.85。同理,在title下设置文章标题、在headings下设置文章内各级小标题时,在size后也是按照输入的比例相对数比如1.75等等。调整的时候可以用$ hexo s开着预览界面一点点微调到你满意的大小。

2.2.3.7 评论功能:第597-688行。

hexo本身是不带评论功能的,需要外接第三方的服务。next集成了几家评论服务商,可以直接在相应的位置修改配置。但非常坑的是,他们中有的已经年久失修,有的已经吃了河蟹,有的需要实名注册,有的与我隔墙相望。我原本倾向于用同样在github上的一个开源项目gitalk,然而注册启用忙活一通以后博文页面虽然能显示评论框了,却始终没法完成初始化。我在gitalk项目的issue页面去找大家的反馈,发现有人报与我同样的问题,他后来在其他人的回复下解决了,我照着做却没能成功,我福至心灵地点进那位幸运仁兄的博客里去,却发现他的评论系统现在使用的服务商其实已经改成了livere。于是我也默默地去注册livere去了。

注册之后发现livere其实比我想象中要好用。最大的劣势是它是一家韩国的服务商,于是我们的博文页面在加载评论框时总是很慢,大约需要好几秒。但考虑到人总得先看了文章再评论,这个等待速度似乎也可以接受。而优势则在于对于博客作者而言只需要邮箱就可以注册,且安装极为方便。而对访客来说也非常方便,一方面可以用微博豆瓣github等第三方账号登陆,另一方面如果不愿使用第三方账号的话,用邮箱注册就可以评论了。且访客在评论时注册无需去livere网站,只需要在博文下的评论框相应位置输入邮箱设置密码就可以在评论的同时快速注册。

把livere的评论功能集成到博客页面上,只需要把你在livere注册后,livere提供的那串uid复制粘贴到next配置文件的livere_uid:后就可以了。

2.2.3.8 搜索功能:第798-829行。

next默认是没有开启搜索功能的,如果希望添加搜索功能需要进行设置。next集成了几家搜索服务商,本着能不注册尽量不注册能原装尽量不三方的原则,我选择的是local search这个本站搜索服务。设置它需要进行几步操作:

首先是把主题配置文件里local search下的enable值改为true

第二步打开git bash,在里面输入命令$ npm install hexo-generator-search --save来安装这个搜索模块,这条命令可能会修改,可以去它的网页(https://github.com/wzpan/hexo-generator-search) 查看最新的命令。

第三步打开blog/_config.yml(注意不是主题配置文件而是blog文件夹下的那个),在里面新增一个#search searvice,把下面语句贴进去(或者先去上面网页查看它是否有什么最新修改):

1
2
3
4
search: 
path: search.xml
field: post
content: true

最后你可以设置搜索时是需要按回车才能开始搜索,还是在访客输字的同时就开始搜索了。如果需要按回车,在主题配置文件第820行的trigger:后的值设置为manual,如果要支持边输边搜,设置为auto即可。

以上是我个人在使用中发现的一些非常实用的功能的设置方法,但next所集成的功能还远不止于此,你还可以在next的主题设置文件中进行修改和设置,来显示你文章的阅读次数和热度统计、来设置支付宝或微信打赏、来在界面背景和鼠标上添加水纹线巢拖尾桃心等动态效果、来给图片增加放大和幻灯片视图等等等等。由于我没有相关需求也未进行相应设置,故不赘述。除此之外,对于github上的适用于hexo的开源功能插件,如果发现有自己喜欢的,即使你选用的主题没有集成,也可以根据那些插件的说明修改blog文件夹下的相应文件,把它们集成添加到你的博客页面中。

2.3 编辑博文

我们终于设置好了博客界面,下面我们可以写博文了。可以选择一篇你过去写好的博文,看看怎么把它显示在浏览器中。

2.3.1 用markdown语句编写博文

博文的存放位置在blog/source/_posts文件夹中,点开它我们会发现这里已经有一个hello-world.md的文件,这就是我们在安装好hexo后就出现在我们博客页面上的那篇示例博文。如果我们想要新建一篇博文,可以输入命令,但更直观的方法是直接复制这个.md文件,然后打开去里面修改就可以了。

首先修改一些基本的博文设置,在最前面的title:后输入你博文的标题。在tags:后输入它的标签,设置多个标签的时候要写成tags: [aaa, bbb, ccc],注意符号均需在英文输入法下输入,符号后均有空格。在categories:后输入它所属的分类,比如categories: jcs。注意如果要设置多层分类,比如我希望一篇文章属于musical大类下的jcs小类中,那么需要按顺序写在方括号中,即写成categories: [musical, jcs]

然后我们进入到博文。.md文件里使用的是mardown语句,我们在编写博文的时候也需要使用它。如果你的博文是一个大长段,那么无需进行任何修改。如果里面有多层小标题,那么在每层标题前加上不同个数的#,比如第一层为##,第二层为###,以此类推,博文在显示时会把每一层标题相应的字体增大加粗,同时会用这些多层小标题自动生成博文的目录大纲。除此之外,还有一些常用的格式比如加粗需写为**需加粗文字**,斜体字需写为*需斜体文字*,更多的可以去搜索markdown常用语法。

2.3.2 插入链接视频音频

1) 如果需要在文章中插入链接,只需要按照下面这样写就可以了:

1
[点击它会跳转到链接的字](http://..链接地址)

2) 如果希望插入视频,只需要把视频外链的iframe嵌入语句直接复制粘贴到希望视频框出现的位置就可以了。

以B站为例,打开希望插入的视频,点击转发按钮,在下面的复制链接中有一项嵌入代码,复制这一串代码,粘贴到博文的.md文件里即可。

3) 同理,插入音频也只需把音频外链的嵌入语句复制到博文的.md文件中希望它出现的博文位置处。

以网易云音乐为例,打开希望插入的音乐或者歌单,点击生成外链播放器,然后选择iframe插件,在勾选希望显示的播放器尺寸后,复制下面的html代码粘贴到.md文件里即可。

2.3.3 插入图片

之所以把图片单独列出来说,是因为这也是一个巨坑。hexo原本是有集成本地传图功能的,然而我尝试了各种方法,找了一堆解决方案,图片们仍然没法出现在博文里。最后我只好选择了放弃本地使用外链。然而安全稳定的支持外链相册也非常难找,目前暂时选择了sm.ms,优势是不用注册即传即生成外链,坏处是不知道哪天就会挂以及单图5m限制。于是我目前博客上需要图片的博文大都还没能搬运过去,因为我得先把图片们压缩到5m以内,这个浩大的工程只好缓缓图之。以后大约会尽量在写文章的时候减少对图片的使用了。这里也希望如果大噶有更好用的图床喂我安利!

一旦使用外链,插入图片就非常简单了。以下是插入图片的markdown语句,仍需注意符号们均需在英文输入法下输入,符号之间无空格:

1
![如果图片不出来你希望在图片位置显示的文字](http://...图片链接地址)

3 把博客部署到网络上

$ hexo s一下,我们在localhost:4000里预览我们的本地博客觉得木啥问题以后,下一步就可以把它放到网上了。

3.1 注册github并开通github page

注册:在github网站(https://github.com/) 用邮箱注册一个账号,注意在开通github page前需要先去邮箱验证过。

开通:登录github,点击右上角头像旁的小加号图标,在下拉菜单中选择new repository,打开新建一个仓库的页面。在Repository name的框里输入xxx(你的github用户名).github.io,这也会成为以后你博客网站的域名。

当然,如果你觉得这个域名不够酷炫,也可以绑定你自己购买的域名,只使用github的云服务器。绑定你购买的域名后,用你的购买域名或是xxx.github.io都可以访问到你的博客页面,只是在地址栏显示的会是你的购买域名。

3.2 设置github使你的hexo文件可以在命令下上传到github page上

接下来我们需要把我们的博文传到github上,但上传必然是需要账号密码的。因此我们首先需要进行以下设置,才能在命令中直接把博文上传到网上。

3.2.1 配置SSH Key

为保证安全,一个普通的密码是不够的,github需要你提交一个更复杂的SSH Key。这个key会包含一个私钥和一个公钥,一个放在你的电脑本地,另一个上传到github上,通过你的电脑和你的github账号上的SSH Key的配对来实现授权。

打开git bash,输入下面语句,然后回车3下:

1
$ ssh-keygen -t rsa

然后去C盘的用户文件夹下,会找到id_rsaid_rsa.pub这两个新生成的文件。打开公钥文件id_rsa.pub,ctrl+a然后ctrl+c,把它添加到github上。

添加到github的位置是github页面右上角你的头像图标 - settings - ssh and gpg keys -new ssh key,ctrl+v到key框里就可以了,title则随便命名都可。

现在测试一下SSH Key是否配置成功了,在git bash里输入下面的语句:

1
$ ssh -T git@github.com

如果返回的是Are you sure you want to continue connecting (yes/no)?,输入yes后,返回Hi, xxx. You've successfully...则表示已经配置成功了。

3.2.2 配置用户名和邮箱

除了密码,我们仍需设置在github上的账户,因为,想像一下,如果你有两个github账号,电脑怎么知道一个命令下去应该把你的同人文传到二次元账号还是三次元账号下呢?因此,我们还需配置上传的账户,包括准备上传到的github账号的用户名和注册邮箱。

在git bash中输入下面的语句完成配置:

1
2
$ git config --global user.name"xxx"
$ git config --global user.email"xxx@outlook.com"

其中xxx是你的github注册的用户名,xxx@outlook.com是你注册github时的注册邮箱,两个xxx未必是一致的。

3.3 发布博文

3.3.1 修改博客配置文件

前面我们对github进行了配置,让它知道谁会给它传文件了。但沟通是双向的,我们还需对电脑上的hexo进行设置,让它明白自己需要把博文传到哪里。

打开blog/_config.yml(注意,不是themes子文件夹下的那个同名文件),在最后添加上以下语句:

1
2
3
4
deploy:
type: git
repository: git@github.com:xxx/xxx.github.io.git
branch: master

需要注意的是:type:后面是git,而不能是github;仓库repository:后面的格式和我们仓库的实际所在地地址不同,需要写成这样git@github.com:xxx(github用户名)/xxx(github用户名).github.io.git的格式。

3.3.2 上传博文

修改好配置文件,并确认你的博文.md文件已经放在blog/source/_post文件夹内后,打开git bash,首先输入下面语句,让hexo把你的.md文件转化为网页所需的html文件。

1
$ hexo g

生成的准备上传的html文件会出现在你的blog/public文件夹里。接下来我们再把它上传到github上,继续在git bash中输入下面语句:

1
$ hexo d

稍等几分钟等待上传完成,打开浏览器,输入你的域名https://xxx.github.io/ ,你就可以看到你的博文上传到网上啦。

以后每当更新了博文,就把.md格式的博文文件放在blog/source/_post文件夹下,然后$ hexo s本地预览无误后,$ hexo g$ hexo d即可。

如果发现更新后的显示有误,尤其是一些做了修改的旧文仍然显示为修改前的样子时,可以在git bash中先输入$ hexo clean,这会把public文件夹的文件清空,然后再$ hexo g生成新的public文件,最后$ hexo d重新上传到github。

以上。祝大家在博客玩得开森。