来自肥宅的小乐趣,带你玩转hexo自建博客,生活还是需要装一下的嘛:)。
官网 : https://hexo.io/zh-cn/
关于hexo,如官网的一句话介绍,
正如上面的介绍,hexo会在本地生成一个静态html页面,为了让别人看到我们的博客,我们就需要将其推到远端--服务器。
那么github就提供给我们一个免费的仓库,对于新人练手是再好不过了。当然,也可以购买属于自己的域名,让更多的朋友看到你的博客。话不多说,让我们开始吧!(作者使用的是mac os系统,其他系统也类似)
mac用户推荐使用 Homebrew
笔者安装的版本为v12.6.0
安装hexo需要依赖node.js的 npm 的包管理器,由于国内镜像源速度很慢,为了避免出错,所以在使用之前一般是利用 npm 来安装 cnpm , cnpm 为淘宝的镜像源。
至此,我们hexo的博客搭建初步完成了。 INFO Start blogging with Hexo!
若不存在,请进行下一步(存在,请跳过创建步骤)
输入后按回车,然后会提示输入密码,可以按回车设为空。之后SSH就生成了,下图所示:
4. 检验SSH Key
执行yes,若出现下例,则表示配置成功。
5. 设置用户信息
6. 本地博客部署至Github
终端 myblog 目录下,使用 vim 打开 _config.yml ,
滑动至最底部,如图,编辑 deploy 节点,
type: git
repo: git@github.com:codehory/codehory.github.io.git
branch: master
注:1.冒号后有空格 2. repo 一行为新建仓库的SSH地址,打开新建仓库就能看见
输入完毕,按 esc , :wq 保存退出。
7. 安装部署插件
在 myblog 目录下,
8. Deploy to Github
至此,恭喜,完成全部部署,在网址栏输入: yourusername.github.io 就能看到你的初步博客啦!( yourusername 为你github用户名)
在 myblog 目录下,新建一篇博客,
在本地博客的 source->_posts 路径下看到新建的文章,是md格式的,使用markdown文本编辑器进行编辑即可。
编辑完成之后,执行以下命令,即可更新博文,
为了继续满足我们深入骨髓的DIY之心,换一个自己喜欢的主题也是必不可少的环节。Github上有很多眼花缭乱的主题,去选一个自己喜欢的吧! https://hexo.io/themes/
本文例程使用的是: https://github.com/litten/hexo-theme-yilia
在 myblog 目录下,用 vim 打开 _config.yml ,
可以修改 title,subtitle,description,keywords,author 等内容,这些属性依赖于你选择的主题。
输入完毕,按 esc , :wq 保存退出。
menu 用来设置你博客的分类,标签等。
subnav 为你的社交媒体的链接,如github,微博等。
用github当图床
头像 更换:在 myblog 目录下的 source 文件下创建 img 文件,将图片保存在其中。我们通过部署生成,把图片放到 github 上,通过链接找到。
例如:本文将一张 timg.jpeg 的图片存放到 myblog/source/img/ 下,那么我们可以通过之前生成的链接,如 https://codehory.github.io/img/timg.jpeg ,进行图片的插入。
还有许多诸如此类的设置,各自进去修改吧,同样的操作,保存退出。
最后来看看我们的博客吧,还不错吧:
由于博客是在本地生成的,如果更换电脑,那我们是不是就不能用这个博客了?方法总比问题多,我们可以利用 github 来备份博客的文件和数据。
第一次备份完毕,以后的备份,只需进行如下操作:
这样备份完毕后,我们在另一台电脑上,只需 git clone 一下就行了。
说长不长,说短不短,一通操作下来,不知你是否成功了呢?作者只是抛砖引玉,带你入门,之后的进阶过程,还望各位继续探索,玩转hexo。欢迎在评论区展示下你们的成果咯,让作者也学习学习,哈哈。同样,如若有任何纰漏或者相关问题,请在评论区留言吧!感谢各位观看!See you~
前期准备
喜欢Hexo的主题,不少都适合中文,配置简单,一键发布,所以选择它。
关于如何搭建 Hexo 的环境,这里就不罗嗦了, Hexo官方文档已经讲解的非常详细
VPS 上安装 Nginx 服务
SSH 连接 VPS 后,添加 CenOS 7 的 epel 软件包: $ yum install epel-release
安装Nginx: $ yum install nginx
启动 Nginx: $ systemctl start nginx.service
使用 firewalld 给防火墙添加规则允许 HTTP 以及 HTTPS
设置 Nginx 自动跟随系统启动
$ systemctl enable nginx.service
现在可以在浏览器中输入 VPS 的 ip 检查看 Nginx! 是否启动了。
如果出现 "Welcome to Nginx.." 的字样,恭喜!代表你的 Nginx 成功安装并启动。
VPS 上搭建 Hexo
方案选择
毋庸置疑,为了安全起见并且在本地能同时 Deploy 到 VPS 和 Github (用作备份)上,选第二种方法肯定是比较好的
使用 rsync 将 Hexo 部署到 VPS 上
在 Hexo 目录下安装 rsync : $ npm install hexo-deployer-rsync --save
根据 Hexo rsync 部署文档 在 Hexo 中的 _config.yml 中添加 Deploy 的配置,以下是我在自己项目中的配置代码
V1.png
*必须先在 VPS 上创建好了想要存放 Hexo 静态文件的目录, rsync 不能创建不存在的目录
网上有的朋友说光在 Hexo 中使用 rsync 不够,在 VPS 也需要下载 rsync 服务,但是我在雷电VPS上就没有下载 rsync 服务。如果你在 Hexo 中用 rsync 部署的时候一直报错,那就在 VPS 上下载 rsync 服务,看能否解决一直出错的原因,命令如下:$ yum -y install rsync
配置 Nginx
Hexo 成功部署到 VPS 上之后,剩下的就是来配置 Nginx 了
$ vi /etc/nginx/conf.d/default.conf
将以下内容替换原内容
重启一下 Nginx 服务
$ systemctl start nginx.service
$ systemctl enable nginx.service
这样设置之后网站就应该可以通过 VPS 的 IP 地方访问到了
申请域名及域名解析
至此在 VPS 上搭建 Hexo 并绑定域名就到此结束了
附上原文链接:网页链接
在 我的自建博客之路系列 的前面几篇文章中,我们已经一起在本地和github、coding搭建起了自己的hexo博客站点,更换了Next主题,并且绑定了自己选择的个人独立域名,但是还未发表过文章,站点的配置还是原来的默认值。在本节,我们来进行个性化的设置,按照自身需要情况将站点打造成自己的。
这里首先要知道在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml,它们均是用于站点配置使用的。其中,一份位于站点根目录下(比如我的: D:\hexo_config.yml ),主要包含 Hexo 本身整站的配置;另一份位于主题目录( D:\hexo\themes\next_config.yml )下,这份配置由主题作者提供,主要用于配置主题相关的选项。为了描述方便,在以下说明中,将前者称为 站点配置 文件, 后者称为 主题配置 文件。下面我们先来看看 站点配置 文件的配置修改。
Hexo 使用 Moment.js 来解析和显示时间。
在站点的根目录下执行以下命令:
更多插件请移步 Hexo官方插件 页了解
现在执行
打开 localhost:4000 查看效果了。
访问HEXO官方文档
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)