Hexo+github搭建个人博客教程

步入程序猿这一行业也有1年多的时间了,在这一年的学习与开发中,总有一些知识点忘了记,记了又忘, 一直想把它们记下来,但又不知道记在什么地方,直到最近,发现网上许多程序猿都喜欢搭个个人独立博客,用来记录记录自己的学习总结,心路历程什么的,觉得这用来装逼不错,有点高大上,于是自己也按照网上的教程鼓捣了一个个人博客,安装平台是windows下,采用的是hexo+github Pages,hexo主题是github上搜的hexo-theme-next,安装好的效果如下所示:

blog截图

安装步骤

  • 一、下载并安装Git
  • 二、下载并安装Node.js
  • 三、在上述安装完成后,在window下打开cmd,输入如下命令,利用npm命令安装hexo

npm install -g hexo

  • 四、安装完成后,选择某个盘符下建立一个文件夹(比如在D盘建立一个文件夹,命名为HEXO)用来存放建立个人博客所需要的所有文件,并进入该文件夹,在任意位置单击鼠标右键,选择“Git Bash here”,打开Git bash,输入“hexo init”,来初始化文件夹,成功后,重新进入文件夹,会发现里面已经有文件填充了。

wenjainjia

  • deploy_git:执行hexo deploy命令部署到Github上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些JavaScript脚本
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
    • _drafts:存储草稿文章的目录
    • _posts:存储发布文章的目录
  • themes:主题文件目录
  • _config.yml:全局配置文件
  • package.json:应用程序数据,指明hexo的版本等信息
  • 五、登录自己的github账号(没有的可在此注册),新建一个repository,并用自己的账号名来命名。比如我的github账号为wanjianwei,则我刚刚建立的repository名字应该是wanjianwei.github.io

与github pages进行绑定

  在完成以上安装步骤后,我们事实上已经在本地搭建了一个简单的hexo博客站点,进入存放hexo相关文件的文件夹,点击鼠标右键->”Git Bash here”,分别输入以下命令后,即可打开浏览器,访问“http://localhost:4000” 即可打开hexo的Hello World界面

hexo generate;
hexo server

只不过此事的hexo静态博客只能在本地访问,为了可以让其他人通过网络访问我们的博客,我们必须将hexo静态博客发布到云空间上,在此我选择的是github。我们进入存放hexo相关文件的文件夹类,打开站点配置文件_config.yml,按下图所示进行配置

hexo_config.yml

上述的repository要换成自己新建的repository的url,配置完成后,我们即可通过指令将我们在本地生成的hexo静态博客推送到github上了。接下来,我们需要先熟悉下hexo的一些常用指令

配置Hexo主题

  hexo默认自带的主题外观如果无法满足我们的需求,我们可以在github上搜索符合我们需求的主题,在此推荐hexo-theme-next,安装方法和配置方法在其官网上都有详细描述(点击查看)。

安装教程截图

它自带有三种布局主题分别为Muse,Mist,Pisces;楼主采用的是Pisces,效果在上文中已展示。需要注意的是第三方服务的安装,比如评论,统计博客浏览情况,这其实也不复杂,在Hexo的官网上也有专门的介绍(点击查看)。
  在完成上述步骤后,我们就基本为自己搭建了一个独立的个人博客网站,当然,一开始我们会觉得有些不完美,但随着使用的深入,我们都能找到相应解决的方法,逐渐把它改进成自己想要的样子。在改进完善的过程中,往往需要下载一些插件,这里提供一个集合了几乎所有hexo第三方插件的地址,大家如果有需要可以按需要下载点击前往>>

域名绑定

  当我们将本地的hexo静态博客push到github上建立的repository时,github自动给我们分配了一个二级域名:username.github.io,其中username即是我们的账户名。我们可以通过这个域名访问我们push的Hexo博客,如果我们希望用一个新的,个人所属的域名来替换它,来增加自己的品牌效应时,步骤也非常简单。
  我们可以直接在github上存放Hexo静态博客的repository中增加一个CNAME文件(注意一定要CNAME一定要大写),将自己的个人域名写入保存就行。但这样的缺点是本地每次往repository上push,CNAME都会消失,必须重新添加并编辑;
  另一种方法是本地安装hexo-generator-cname插件,安装方法是进入存放Hexo相关文件的目录,打开Git Bash,输入以下命令:

npm install hexo-generator-cname –save

并在站点配置文件_config.yml中的Plugins字段中增加- hexo-generator-cname,如下图所示

cname

从此,每次本地编辑完博客后执行“hexo g”命令,都会在public目录中生成一个CNAME文件,我们只需打开,并写入自己的个人域名,保存后再执行“hexo d”命令。该方法也有一个问题,就是每次执行“hexo g”命令后,publish文件夹中都会重新生成一个CNAME文件,我们需要重复编辑个人的域名并保存,才能执行“hexo d”;

编写博客

  Hexo 采用markdown编写博客,进入存放Hexo相关文件的目录,打开“Git Bash”,输入如下命令

hexo new post “filename”

便会在./source/_post目录下生成一个md文件,利用markdown书写软件打开,便可开始编辑自己的博客了,保存后依次输入以下命令,即可push到github。

hexo clean
hexo g
hexo d

如果想在本地先预览下,可以依次输入如下命令,然后打开浏览器,访问“http://localhost:4000”

hexo g
hexo server

markdown书写软件推荐window系统下我使用的是markdowmPad 2;markdown的语法也较简单,可参考这篇博文

总结

  一些东西在我们看来很难,其实是因为我们对它不够了解,就拿搭建这个个人博客来说,网上有许多不同的实现方法,但如果我们只停留在阅读教程而不是去亲手实践,是无法体会到学习一门新技术的快乐的。重要的还是我们要有一个敢于挑战的心,一种Geek的精神,敢于钻研,就一定会有所收获的。

热评文章