hexo:从零开始搭建个人博客

博客是传递、分享技术的一种高效途径,如果你不满足于github、CSND、简书等方式,还可以搭建自己的个人博客,使用hexo搭建个人博客是一种便捷有效的方式。
本文介绍一种搭建个人博客的方法。通过hexo搭建个人博客,部署到github上;另外介绍如何使用github的域名绑定功能,给个人博客设置域名。


版权声明:本文为博主原创文章,禁止转载
作者博客:codesong.cn


工具及平台:

工具:hexo、git、Node.js、npm/cnpm
平台:Linux、macOS、Windows等
不同系统操作基本相同,本文以win10为例进行演示。
(windows环境需已安装git并配置为环境变量)

搭建过程:

1、安装hexo

(1)安装Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境,能够是js运行在服务端。安装方法非常简单:
nodejs.org下载安装即可。推荐下载LTS(Long Time Support)版本


下载安装Node.js

(2)安装NPM

NPM(Node Package Manager)是基于Node.js的包管理工具,方便开发人员分享和获取第三方包并使用。
由于NPM镜像是国外资源,安装十分缓慢,因此我们选择安装淘宝团队做的镜像cnpm。在win10环境下,以管理员身份运行CMD,输入以下命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样我们便完成了Node.js和NPM的安装,此时我们可以通过查询版本号的方式来验证Node.js和NPM是否安装成功:

node -v
npm -v

如果出现两者的版本信息,说明我们已经成功安装了Node.js和NPM,很简单是吧。

(3)安装hexo

使用cnpm安装hexo:

cnpm install -g hexo-cli    //安装hexo

同样可以通过查询版本信息确认hexo是否安装成功:

hexo -v

2、使用hexo搭建博客

(1)创建工作路径

首先在电脑任意位置(如D盘)新建一个文件夹,比如我们命名为blog,在windows系统下,此操作可以直接在D盘操作,或用命令行创建:

mkdir blog

(2)初始化博客

进入blog文件夹并初始化博客:

cd blog
hexo init

注意:在macOS或Linux环境需以管理员身份进行操作

此时我们就通过hexo完成了博客的初始搭建,hexo会默认创建一个landscape主题。此过程有时较慢,耐心等待。
这时我们打开电脑的blog文件夹,会发现生成了许多文件,其中theme文件夹内就是我们博客的主题,后续更改主题需要在此操作。


(3)启动、生成博客

启动博客:

hexo s

启动后会出现本地访问的端口


hexo启动

在浏览器中输入 localhost:4000 ,就可以进入我们刚刚生成的博客主页了。大概长这个样子:



很激动对吧!别着急,个人搭建的博客可玩性可不仅如此呢,接下来简单介绍如何在新建文章。

(4)新建文章

windows环境下推荐直接将写好的文章放在blog/source/_post路径下:


当然也可以像macOS或Linux下使用命令行新建文章,然后进行编辑:

hexo n "新建的文章"

博客一般使用markdown格式(.md),非常方便的一种格式,网上有很多介绍,大家可以学习一下。

(5)更新博客

对博客内容、主题进行修改后,比如刚才新建了一篇文章,需要将修改更新。
一般需要在blog目录下按顺序进行清理(clean)、生成(generate)、启动(sever/start)操作:

hexo clean
hexo g
hexo s

至此我们就完成了个人博客的创建,以及如何对博客进行修改等操作。不过我们的博客现在只能通过本地端口(localhost)访问调试,怎么才能让别人看到我们的博客呢?

接下来就来介绍如何将博客部署到github上进行访问。

3、将博客部署到github上

(1)在github上新建仓库

仓库名称必须为 xxx.github.io(其中xxx为自己的github用户名),如codesong99.github.io,并得到仓库地址:


github仓库地址

2)在blog目录下安装一个git的部署插件

cnpm install --save hexo-deployer-git

3)修改blog目录下的配置文件

打开blog目录下的_config.yml文件,在最后几行的部署(deploy)信息位置添加以下配置:


deploy配置

部署类型为git,仓库地址为刚才获得的github仓库地址,branch设置为master,修改完成后保存并关闭。
注意冒号后有一个空格。

(4)将博客部署远端

回到CMD窗口,在blog目录下输入一下命令,将博客推到远端:

hexo d

这个"d"就是deploy的意思。此过程需要输入github账号及密码。

至此我们就完成了搭建hexo博客并部署到github上的所有工作,在浏览器中输入xxx.github.io即可访问自己的个人博客。

4、One More Thing

虽然我们已经完成了个人博客的搭建,并部署到github上进行访问,但默认的landscape主题、xxxxxxx.github.io的地址是不是感觉跟真正的博客还有些不同?
上文中已经简单提到,我们可以自己修改个人博客的主题(将博客主题放在theme路径下),具体实现就要考验大家的审美和动手能力了,网上也有很多优秀的修改方法、模板,本文不再介绍。
接下来我将简单介绍如何设置自己的域名来访问博客。

绑定域名

github支持绑定域名,来访问我们的博客。只需在github上绑定域名,并将域名解析到github仓库即可。具体需要以下三个步骤:

首先在github博客仓库中新建一个"CNAME"的文件,文件内容为自己注册的域名(可在阿里云、腾讯云购买域名,暂不需要购买服务器),如“codesong.cn”:



这样我们在仓库的settings->options->Custom domain界面就能看到自己绑定的域名啦:


github绑定域名

第二步,ping一下自己github仓库的ip:


ping

最后将自己的域名解析中添加www、@两条A型记录,其中“记录值”为刚才ping到的github仓库ip


域名解析

这样,我们就可以同时通过 用户名.github.io 和自己注册的域名来访问个人博客了。

以上就是本文的全部内容了,希望大家早日熟练hexo clean 、hexo g 、hexo d 三连~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容