Ubuntu16 or 18 下用hexo建立自己的博客
Ubuntu16 or 18 下用hexo建立自己的博客
Sandy1.Hexo介绍
Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown解析文章,在几秒内,即可利用靓丽的主题生成静态网页。本文介绍如何在Mac以及Windows上搭建Hexo,Linux用户也可以参考。网上关于Hexo的教程也比较多,但大都会让读者在一两个点上卡住。综合官网教程以及自己在安装过程中遇到的问题写下了本教程,一步一步来就可以无痛安装。
2.准备安装必须的组件
2.1 git
git是地球上最先进的版本管理控制系统,与时俱进的程序员、黑客、作家都在用它。
你不用后果比较严重。。。只能说这么多了
首先确认本机上有没有安装git
1 | git --version |
能正确显示版本号说明已经安装好了,没有安装的话不出意外,终端会提示安装命令,类似
1 | apt-get install git-core |
2.2 npm (node package manager)
首先确认本机上有没有安装npm
1 | npm --version |
看看会不会返回版本号先,没有返回也会提示安装命令,照做吧,just do it.
1 | apt-get install npm |
2.3 nodejs
首先查看一下版本
1 | node -v |
显示v8.x都符合,不然都得升级!
首先安装低版本,然后在升级!
1 | apt-get update |
然后查看版本
1 | nodejs -v |
发现是v4.x版本,我们就可以升级了
1 | #更新8.x地址 |
然后查看版本
1 | nodejs -v |
发现是v8.x,我们就成功了!
2.4 安装nvm
安装nvm命令
1 | #安装nvm命令# |
3.安装Hexo
初始化生成hexo的目录
1 | mkdir hexoDemo |
4.hexo的配置说明
整体的配置信息如下(配置文件在hexo的主目录下),是直接从我自己博客上复制下来的,跟原始的稍微有点区别,但是不影响理解。
1 | # Hexo Configuration |
hexo下主题theme的配置说明
在主题的目录下也会有一个_config.yml文件,这个yml文件配置了页面的头信息、搜索栏信息以及左右侧的侧边栏信息。另外还有相关插件信息。
1 | # Menus |
到这里Hexo安装完成,配置文件都已经弄好,其实这些都不是很难,稍微看一下网上的解释,就可以知道各个配置的含义,没有太大的难度。这里主要就是页面的自定义样式,这个涉及到在页面添加删除组件,在css文件里面加入需要的样式,这些操作比较麻烦,需要对html和css有一点点基础。最恶心的是,在这里不好描述,只能靠小伙伴们自己研究啦。
Hexo弄好了以后,其实已经完成了建站的90%,为什么这么说呢,在设计图上,中间有一个博客系统,这个系统其实可以不要,因为我自己需要做一些网站统计(如每天的IP、PV)。如果没有博客系统,自然就没有MySQL数据库、Redis缓存。另外10%只要一个nginx,在nginx内配置指向Hexo生成的静态文件目录即可,这个静态文件目录在hexo的配置文件中都是配置好的,默认是public目录。
5.常用命令
1 | #清除缓存文件 (db.json) 和已生成的静态文件 (public)。 |
6.安装博客插件
6.1 Hexo开启站内搜索功能
根据关键字搜索博文,站内搜索的功能很实用。hexo开启站内搜索很方便,已经有现成的插件可以使用。
1.安装插件
1 | npm install hexo-generator-search --save |
2.配置hexo站点主配置文件_config.yml,添加
1 | search: |
3.修改next主题配置文件_config.yml,启用local_search
1 | local_search: |
这样就开启了站内搜索。
6.2 给博文增加密码
安装插件
1 | npm install --save hexo-blog-encrypt |
开始使用
1 |
|
password: 是该博客加密使用的密码
abstract: 是该博客的摘要,会显示在博客的列表页
message: 这个是博客查看时,密码输入框上面的描述性文字
6.3 给博客增加api接口
安装插件
1 | npm install hexo-generator-restful --save |
在网站配置**_config.yml**下增加
1 | restful: |
具体说明文档:https://github.com/yscoder/hexo-generator-restful
6.4 增加rss订阅
首选先安装这个包
1 | npm install hexo-generator-feed |
然后在在**_config.yml**文件中配置该插件
1 | feed: |
参数的含义:
type:RSS的类型(atom/rss2)path: 文件路径,默认是atom.xml/rss2.xmllimit: 展示文章的数量,使用0或则false代表展示全部hub:content: 在RSS文件中是否包含内容 ,有3个值true/false默认不填为falsecontent_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,,防止从中间截断.
6.5 hexo链接持久化终极解决之道
1 | npm install hexo-abbrlink --save |
站点配置文件里:
1 | permalink: post/:abbrlink.html |
另外可以修改scaffolds里的模版文件,修改post.md为:
1 | --- |
不建议的写法
有的人采用了md文件的名字是英文,在Front-matter里将title写成正常的中文呢,这个将来文章多了,都是英文不利于收藏整理。
7.Hexo更改主题
配置到hexo后运行$ hexo s可以开启本地服务,进行浏览。打开页面后你会发现,这XX的也太丑了!对啦,所以现在的问题就是我们如何更改hexo的主题。
Hexo提供了大量的主题可供选择,主题的配置方法也不尽相同,但大概思路是差不多的,使用量最多的主题该署 hexo-theme-next了,随便一百度就有大把的教程。
你可以去下面列出的地方挑选喜欢的主题,基本上发布主题的人都会在仓库的wiki里讲解该主题怎么安装和一些配置问题。如果没有说明的地方可以再另行百度,毕竟人和人的需求不一样,文档也不可能符合每个人的要求。
hexo-theme-icarus
我使用的主题是: hexo-theme-icarus
这个主题属于清新、简约的感觉,内置评论功能。接下来我就要讲这款主题怎么配置,如果你选择的是其他的主题,配置过程也大同小异,动动脑子动动手指,尽享无数主题。
icarus 的配置
发布者已经把基本的配置步骤写在了wiki里,还包括FQA,如果有什么解决不了的问题也可以到https://github.com/ppoffice/hexo-theme-icarus/wiki去提问,或看有没有和你同样问题的回答。
Install
在你的终端中先进入Blog目录,创建
themes/icarus主题文件夹路径,输入下列命令:1
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
更改全局配置文件(_config.yml)的
theme属性为:theme: icarus重命名主题配置文件
_config.yml.example为_config.yml别忘了检查你的主题版本是不是最新的:
1
2$ cd themes/icarus
$ git pull如果你的博客中需要添加搜索功能,你需要先安装
hexo-generator-json-content:1
$ npm install -S hexo-generator-json-content
编辑_config.yml
我分部看一下示例主题配置文件的内容,我再细细讲解每个属性的意思:
1 | _config.yml |
这部分就是博客导航栏的规划,之后你也可以自行编辑导航都显示什么,或者更改他们的路径。这里要说的是,主题只生成主页和时间轴的页面,其余的你要根据自己的需要自己生成页面文件。你可以使用相对路径,也可以使用绝对路径。
1 | _config.yml |
这里没什么好说的,相应的改为你自己的信息。
1 | _config.yml |
这里是右侧边栏的显示配置,到时候你可以打开博客自己看,就是归档、标签云和链接之类的,如果你不想要哪个部分,就在这里删除它。
1 | _config.yml |
需要先安装,上面讲过了。
1 | _config.yml |
如果需要开启评论功能,需要先去相应的地方注册账号,然后按照提示把ID或名字添加上。 跟着做就对了。剩下一些评论框自定义的样式就自行百度,或注册后在网站内进行更改设置就好了。
1 | _config.yml |
提供了几个参数可供选择,你可以 看到各种参数的样式,进行选择和更改。
1 | _config.yml |
主题内置了相册功能,一般不用做什么更改了,其他的可以
进行到这里,你的博客样式已经改好了,运行hexo g和hexo s本地浏览下效果吧。接下来的工作就是你自定义样式了,主题样式文件都在themes/icarus/source/css/_partial里,对照着页面文件找到对应的class样式去修改吧。
发布文章
创建文章
$ hexo new "我的第一次提交"- 打开
source/_post目录下的我的第一次提交.md编辑内容 - 启动本地服务,浏览效果
编辑文章内容,需要你学会 Markdown 格式,还有些格式问题可以直接百度去搜索,多写一些文章自然就记下了各种格式标签。
这里说一个小技巧:
发布的文章较长时,主页会全部显示出来,页面也会变得很长。这个时候我们在编辑内容时,在合适的地方添加一行代码:<!-- more -->,在它之上是摘要,是在主页会显示的文字部分。在它之下是余下全文,在主页中会多一个阅读全文的按钮,点击后才会看到全部内容。
这样就避免了主页显示不必要的内容,占据大量篇幅。
文章参数
打开 scaffolds/post.md 增加类别和描述,修改默认布局的参数:
1 | post.md |
在新建一篇文章,你就能看到新建的文章已经新增了这些参数,不用每次自己手打,不需要的值就可以空着。
其中tags和categories有多个值,用数组的形式写入。
thumbnail是主页侧边栏的展示图,这里如果不给定值,Hexo自动显示默认图片。
banner是文章的顶部封面图,在主页也会展示,如果不给定值就不显示。
图片都放在source/images中,如果没有这个文件夹就新建一个,在这里存放文章中会用到的图片。
注意!引用图片路径时,一定要以/开头,例如:/images/img1.jpeg 这样,无论是在主页或者打开文章都可以显示图片。
8.安装nginx
1 | apt -y install nginx unzip |
nginx安装完成之后把nginx的这个引用配置文件改个名:
1 | mv /etc/nginx/sites-enabled/default /etc/nginx/sites-enabled/default.bak |
新建一个nginx的conf:
1 | vim /etc/nginx/conf.d/blog.e9china.conf |
配置如下:
1 | server { |
9.出现错误解决
hexo内存溢出问题
当hexo生成文章大概在1000左右的时候,便有可能出现该问题.
1 | FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory |
解决方法:
找到hexo 命令的位置
1 | which hexo |
编辑hexo命令的bin文件的第一行为以下内容.
1 | /usr/bin/hexo node --max_old_space_size=8192 |
10.部署到服务器
现在配置 hexo 的 deploy
安装插件
本地运行
1 | npm install hexo-deployer-git --save |
安装git
服务器安装git
1 | apt-get install git |
创建一个git用户
1 | sudo adduser git |
虽说现在的仓库只有我们自己在使用,新建一个 git 用户显得不是很有必要,但是为了安全起见,还是建议使用单独的 git 用户来专门运行
git 服务
添加证书登录
把刚在在本地创建或者已经拥有的公钥,也就是 ~/.ssh/id_rsa.pub 文件里的内容添加到服务器的 /home/git/.ssh/authorized_keys 文件中,如上所说,添加公钥之后可以防止每次 push 都输入密码。(*可以直接执行cat ~/.ssh/id_rsa.pub | pbcopy 复制)
初始化 Git 仓库
可以将git仓库放到自定义位置,我是将其放在 /var/repo/blog.git 目录下的
1 | sudo mkdir /var/repo |
使用 –bare 参数,Git 就会创建一个裸仓库,裸仓库没有工作区,我们不会在裸仓库上进行操作,它只为共享而存在。
配置 git hooks
我们这里要使用的是 post-receive 的 hook,这个 hook 会在整个 git 操作过程完结以后被运行,关于 hooks
的详情内容可以参考这里。
在 blog.git/hooks 目录下新建一个 post-receive 文件
1 | cd /var/repo/blog.git/hooks |
编辑这个文件
1 | vim post-receive |
在 post-receive 文件中写入如下内容
1 |
|
注意,/home/www/hexo 要换成你自己的部署目录,正如上文所说,我是的配置目录是/home/www/hexo。/var/repo/blog.git是git仓库的位置。上面那句 git 命令可以在我们每次 push 完之后,把部署目录更新到博客的最新生成状态。这样便可以完成达到自动部署的目的了。
设置这个文件的可执行权限
1 | chmod +x post-receive |
改变 blog.git 目录的拥有者为 git 用户
1 | sudo chown -R git:git blog.git |
禁用 git 用户的 shell 登录权限
出于安全考虑,我们要让 git 用户不能通过 shell 登录。可以编辑 /etc/passwd 来实现
1 | vim /etc/passwd |
将
1 | git:x:1001:1001:,,,:/home/git:/bin/bash |
改成
1 | git:x:1001:1001:,,,:/home/git:/usr/bin/git-shell |
这样 git 用户可以通过 ssh 正常使用 git,但是无法登录 sehll。
至此,服务器环境的搭建已经基本结束。
配置本地_config.yml文件,完成自动化部署
现在配置 hexo 的 deploy。
修改 hexo 目录下的 _config.yml 找到 deploy, 修改为:
1 | deploy: |
repo 的地址为你自己的地址以及 git 仓库目录
至此,我们的 hexo 自动部署已经全部配置好了
开始使用
新建文章:
1 | hexo new "post name" |
生成 & 部署:
1 | hexo clean && hexo g && hexo d |
在crontab里面定时更新
在hexo本机执行
1 | crontab -e |
增加2个小时更新一次的定时任务
1 | */120 * * * * cd /root/hexoDemo && hexo clean && hexo g && hexo d |
