Ubuntu下使用Hexo+GitHub+nexT搭建个人博客
欢迎来到我的博客:wang-sy.github.io
一、下载nodejs和npm
打开 Node.js官网,下载源代码,解压后进行编译、安装。
解压后进入文件夹,输入:
sudo make -j 12#使用12线程编译,可以视情况而定
sudo make install
至此为止Node.js, npm下载完成,输入语句
node -v
npm -v
检验是否安装成功。
二、下载Hexo并在本地搭建博客
先安装Hexo
sudo npm install hexo -g
使用下方语句检验是否安装成功:
hexo -v
出现版本信息就说明安装成功了。接下来使用hexo对博客进行初始化和本地布置,输入语句,在这个过程中出现任何问题,都可以将这个博客文件夹干掉重来
sudo hexo init blog # blog可以替换成你喜欢的名字,该操作可以在任何文件夹下进行
cd blog
sudo npm install
sudo hexo clean
sudo hexo g
sudo hexo d
操作完成后会出现如下信息:
INFO Deploy done: git
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
这时候我们将上面的网址复制到浏览器中,进入即可,进入后可以看到如下画面:
至此,hexo本地部署完成
三、 将Hexo博客Push到GitHub
进入GitHub,如果没有账号,那么自行注册。
进入个人主页,新建一个仓库,仓库的名字是且必须是:
xxxxxx.github.io
以我为例,我的账号是wang-sy,在这里我填写的是wang-sy.github.io,以后我们也将通过这个网址来访问我们的博客。
进入我们之前创建的blog文件夹,对_config.yml进行编辑,修改最后面的内容,修改为:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/wang-sy/wang-sy.github.io.git
branch: master
修改完成后保存,我们将初始化的博客部署到github中,在控制台中输入如下代码:
cd blog#进入你定义的博客文件夹
hexo clean
hexo g
hexo deploy
等待一段时间后,在浏览器中输入,你自己的xxx.github.io,即可查看博客,如下:
值得注意的是,将内容push到GitHub后需要等待一段时间后,你的改动才能有效。所以说如果到了这步,你不能通过xxx.github.io访问自己的博客的话,不妨稍等片刻(不超过五分钟)再重新尝试一下。
到此为止我们部署的博客,不仅可以在本地供自己查看,也可以在云端供所有人查看,博客的基础搭建完成,在后面的章节中我们会引入nexT对博客进行美化。
四、使用Next主题进行美化
进入上面的界面后,我感觉非常的赏心悦目,但是坐在一旁的女朋友却并不这么想,于是问题就来了,难道只能用一种主题么?答案显然是否。Hexo拥有许多可配置的选项,其中就包括了更改主题,Next是使用人数最多的主题之一,所以出现问题的时候上网搜解决方案比较容易一些,所以我们使用了Next主题,在这一节中,我们介绍如何下载并更换主题,我们以Next为例。
下载Next
cd blog/themes
git clone https://github.com/iissnan/hexo-theme-next.git next
启用主题
进入blog文件夹,并且使用vim编辑_config.yml文件,将主题选项改为next
cd blog
sudo vim _config.yml
值得注意的是,在以后的修改中我们不仅要修改blog文件夹下的_config.yml,也要修改主题包中的_config.yml:
-
位于站点根目录下的_config.yml,主要包含 Hexo 本身的配置
-
另一份位于主题目录下的_config.yml,这份配置由主题作者提供,主要用于配置主题相关的选项
重新更新
注意,每次更新搞这几步就可以了,你也可以把它写成一个shell脚本,以后每次同步直接运行shell脚本即可。
当然,你也可以每次都运行下面的所有语句,脚本如下:
cd ~/blog
hexo clean
hexo g
hexo d
hexo s
ehco "ok"
运行完成后我们打开 http://localhost:4000 查看使用next主题的博客,效果如下
emmm,为什么感觉还不如原来的好看呢(逃
五、让它变得好看
我们同样是Next,别人的长这个样子:从这里进入,我的next安装就是借鉴的他的
那肯定不得行,我们也要把自己的博客搞漂亮点,我们先对未来进行规划,以我自己为例:
-
博客需要分类,我在同时学习不同方向的知识,需要分类功能才能有序的检索
-
我的博客不能叫Hexo,要叫SaiyuWang’s Blog
-
我要上面那种两栏的,不要这种中间一条的
-
我要搞个小头像,下面还要放段话
有了需求之后,我们开工,开工之前,我们再次重申如果过程中出现问题,你又不想找错的话,可以直接干掉blog文件夹从头再来,如果你害怕这种事情发生,那么你可以将过程中的操作写入shell脚本中,以达到一键回到上一步的目的。
调整主题
正如我们上文所说,我们不想要中间一大条的,我们想要的是像上面那张图里一样的,于是我们需要更改NexT的主题,来达到我们的目的。
通过阅读文档,我们知道Next支持三种主题:
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- Pisces - 双栏 Scheme,小家碧玉似的清新
看描述我们要的是Pisces主题,下面进行设置,各位也可以各取所需。正如上一章所说,我们要更改next内部的主题,所以我们对themes/next文件夹中的_config.yml进行更改
cd themes/next
sudo vim _config.yml
搜索 scheme 关键字,你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 #
去除即可,这里我们选用Pisces。
#scheme: Muse
#scheme: Mist
scheme: Pisces
这里科普一下,在vim中可以通过在命令模式下的
:/string
语句来对相应字符串进行搜索。更改完成后我们进行更新查看。
这样的布局基本上符合我们的要求。
设置语言
打开blog文件夹下的_config.yml,对语言进行设定。
cd ~/blog
sudo vim _config.yml
将language
设置成你所需要的语言,我们将语言设置为简体中文。
language: zh-Hans
如果需要繁体中文,那么将zh-Hans更改为zh-tw或zh-hk即可(PS:我怀疑这个语言包的作者有台独意向 )
设置菜单
添加属性
正如前面所说,我们希望左边栏中的内容丰富起来,至少包括分类、Home、等功能,下面我们将通过修改themes/next文件夹下的_config.yml文件来达到丰富菜单的目的。
我们先打开themes/next中的_config.yml进行编辑:
cd themes/next
sudo vim _config.yml
首先,我们设置主页和归档,进入_config.yml后,无需翻页直接对menu项目下面的属性进行更改,我们将该属性改为下面的样子:
menu:
home: /
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
保存后重新开始服务,可以看到网页变成了中文版,并且左边框中有了主页和归档两个选项。
归档即我们博客更新的时间线,如下:
接下来我们添加剩下的两个界面:
-
标签页
-
分类页
首先,在themes/next文件夹下的_config.yml中,进行如下更改:
menu:
home: /
#about: /about/ || user
tags: /tags
categories: /categories
archives: /archives
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
之所以把他们放在下面添加,是因为前面的两个无需新建新的页面,而这两个需要新建界面才能够添加。接下来我们将分类放入左边的边框中,首先我们使用语句新建相应的面:
hexo new page "categories"
执行后,收到提示:
INFO Created: ~/blog/source/categories/index.md
这段提示中告诉我们在~/blog/source/categories/文件夹下生成了一个index.md(其实也生成了categories文件夹),我们现在进入这个路径下的index.md进行更改:
sudo vim ~/blog/source/categories/index.md
在原有的基础上,增加type属性,type: “categories”
---
title: categories
date: 2020-03-29 19:11:59
type: "categories"
---
完成这些操作后,我们重启服务,进行查看,发现新的网站左边出现了标签、分类两个新的选项,点击进入分类,我们可以看到:
而进入还没有定义的界面“标签”后,会报错。
分类功能已经基本完成,接下来我们新建一篇文章来进行测试。我将之前写好的文章放入其中,这是一篇关于计算机组成原理的文章,我们通过命令:
sudo hexo n "组成原理第一章"
生成一篇名为:组成原理第一章的博客
它返回了提示信息:
INFO Created: ~/blog/source/_posts/组成原理第一章.md
我们可以看出它实际上是创建了一个markdown文件,来供我们编辑。
于是我们编辑这篇markdown文件,我们希望他分类在“组成原理”一类中。对文档进行编辑:
sudo vim ~/blog/source/_posts/组成原理第一章.md
---
title: 组成原理第一章
date: 2020-03-29 19:31:12
tags:
categories:
- 组成原理
---
<feff># **引言**
自己看计组,顺便写个markdown玩玩,
bulabula
在这里我们要给文章分类的话,就需要在categories属性下注明他的分类,我们这里规定他的分类为:“组成原理”,我们重新生成博客,进行查看。再次进入分类,我们就发现多出来一个组成原理类,组成原理类中也有一片我们新建的文档。
接下来我们仿制上面的思路,将tag列表加入,下面只贴代码:
hexo new page "tags",
收到:
INFO Created: ~/blog/source/tags/index.md
编辑文档
sudo vim ~/blog/source/tags/index.md
---
title: tags
date: 2020-03-29 19:41:58
type: "tags"
---
向刚才的文章添加标签,刚才的文章储存在/blog/source/_posts文件夹中
---
title: 组成原理第一章
date: 2020-03-29 19:31:12
tags:
- 组成原理
- 大二下
- 课内学习
categories:
- 组成原理
---
<feff># **引言**
自己看计组,顺便写个markdown玩玩
重启,进入标签页面,我们可以看到新做出的改变。
进入相应标签就可以找到相应的文章了。
添加图标
最后,我们发现左边的这些栏目都没有图标,所以我们需要给他们加上图标:打开themes/next文件夹下的配置文件进行修改:
cd themes/next
sudo vim _config.yml
找到menu_icon,进行修改:
menu_icons:
enable: true
# Icon Mapping.
home: home
categories: th
tags: tags
archives: archive
重启服务,观察,竟然没有出现图标,经过一番搜索后,我们在这里找到了解决方案:
重新打开themes/next的配置文件,将menu属性下作如下更改,注意修改时大小写和空格要严格遵守。
menu:
home: /|| home
#about: /about/ || user
tags: /tags/|| tags
categories: /categories/|| th
archives: /archives/|| archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
原来这是因为在新版的next中,图标也在menu一栏进行设置,重启服务后,效果如下:
给自己的博客换名字、写标题等等
首先先准备好图片,我在网上找了只皮卡丘,并且放到了图床中,使用的是路过图床,这只皮卡丘图像的连接是:https://imgchr.com/i/GZ3vOe
这次我们要编辑的是blog文件夹下的配置文件,打开编辑
cd ~\blog
sudo vim _config.yml
找到avatar属性,进行修改,将刚刚生成的图像链接加入
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: https://s1.ax1x.com/2020/03/29/GZ3vOe.jpg
重新生成后我们的主页上出现了一只可爱的皮卡丘
填写自己的信息和标语
我们发现,我们的博客还是叫Hexo,我们的名字还是叫John Doe,这显然是不合理的,所以我们要填写自己的信息;
我们打开blog下的配置文件,对其中的内容进行修改,我做出的修改如下
# Site
title: SaiyuWang's Blog
subtitle: '淡黄色长裙,蓬松的头发'
description: ''
keywords:
author: Saiyu Wang
language: zh-Hans
timezone: ''
到了这里,看到语言,又想diss一下这个作者,为什么繁体中文是zh-tw和zh-hk???
ok到此为止上面的所有需求都完成了。
最后的需求:填写自己的社交账号
添加社交账号到左边栏
我们打开themes/next文件夹下的配置文件
cd themes/next
sudo vim _config.yml
找到social属性进行更改
social:
GitHub: https://github.com/wang-sy || github
E-Mail: mailto:wangsaiyu@cqu.edu.cn || envelope
#Google: https://plus.google.com/yourname || goo
重启查看
六、未完成部分
好了,至此位置,美化的部分基本上全部结束,接下来再加一些其他的功能,如评论、流量监测等等功能,这些功能我会在以后慢慢加。
经过观察,markdown中的数学公式渲染仍然有问题,目前还没有寻求解决方案。