美文网首页关于hexo搭建博客Hexo
使用Hexo+GitHub搭建个人博客

使用Hexo+GitHub搭建个人博客

作者: 孙帅并不帅 | 来源:发表于2016-11-09 17:23 被阅读1834次

        写这篇文章也是为了巩固一下使用Hexo搭建博客的流程,刚开始接触博客,应该说比较晚了,比较惭愧,那目前比较流行的大部分也是通过Hexo和GitHub来搭建个人博客,毕竟GitHub提供免费的服务器,这点还是很nice的,搭建过程也踩了不少坑,大致总结一下吧,也是通过网上搜索了我遇到的相关情况,把这些问题以及搭建的过程写下来后续我也能看看巩固一下,好了下面开始操练起来了。(目前是基于mac OS操作系统搭建的)

    GitHub上创建repository

    1.首先创建一个resitory

           这里注意一下Repository name一定是GitHub的用户名.github.io的形式,否则不能成功部署。到了这里点击Create repository就算创建成功了一个repository。

    2.添加SSH keys

        这个很关键SSH keys,由于远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置,继续上图开始配置。

    这个选择到SSH and GPG keys会出现右边的界面,这个时候点击右上角的New SSH key就会出现下图。

    title可以自己起个名字,关键是key怎么填写呢,看着需要一定的格式,是的这里我们需要通过终端打开自己的.ssh里面的一个id_rsa.pub文件如下图找到这个文件所在

    打开id_rsa.pub文件,文本编辑器打开即可,我们需要将里面的东西全部复制下来

    这个是我自己的,每个用户的不一样,复制之后就可以粘贴到我们之前说的这个key里面。

    至此SSH keys就算完成了,如何测试是否可行了呢,这时候打开终端,输入ssh -T git@github.com,如下图

    如果出现successfully就是已经完成了。好了现在搭建GitHub的resitory就算完成了。

    安装并设置Hexo主题

    1.安装Hexo

      这些网上有很多,我就贴一下具体的步骤吧

    安装环境及 Hexo

    node.js

    git

    Mac OSX 用户在终端里用npm命令安装 Hexo

    npm install -g hexo-cli

    若写入权限不够,加sudo 。

    初始化 Hexo

    Hexo 安装好后,打开终端,想好 Hexo 的初始化位置,比如:/Users/sunshine/Blog/hexo,执行一下命令行:

    1 hexo init /Users/sunshine/Blog/hexo

    2 cd /Users/sunshine/Blog/hexo

    3 npm install

    若写入权限不够,加sudo 。Hexo就初始化完成。

    2.配置Hexo

    配置文件有三个是比较重要的

    首先是_config.yml

    打开之后有几个是需要配置的,下图是_config.yml的几个比较重要的配置

    首先Site下面的东西是博客上面需要显示的一些基本配置,关键是deploy下面的type注意一定是git现在Hexo3.0已经默认是git类型github已经不起作用了,还有branch事master分支,Extensions下面的theme是主题,我们可以自己配置一些喜欢的主题,之前我用的是MOxFIVE写的yelee主题,可以在终端cd到hexo目录下(cd /Users/sunshine/Blog/hexo)执行一下命令

    git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

    主要现在有的人比较喜欢next主题,因为这个主题相对来说比较简洁,同样可以执行一下命令

    git clone https://github.com/iissnan/hexo-theme-next themes/next

    这样主题我们可以在hexo下的themes文件下可以看到相关的主题文件,打开themes下的next文件(本人用的是next主题,所以就介绍一下next相关配置),打开next下的_config.yml文件。

     可能刚开始在预览的过程中,首页和归档都是英文显示的,这个时候我们需要把next文件下的language文件的zh-Hans.yml重命名成zh-CN.yml,这个也是之前踩过的坑。

    还有侧边栏是需要点击才会显示的,如果我们想让侧边栏显示在左边而不是隐藏的话,需要将scheme: Pisces改成这个属性就好了,还有一些图标未显示,如github,或者weibo的图标,是因为需要像下图这样配置。

    还有如果不想让整篇文章显示全,只是显示大概,下面出现阅读全文的按钮的话,需要设置这个auto_excerpt:下面的enable: true这样就可以了

    大致这样就算配置完成了,那么需要将Hexo的一些常用指令说一下

    hexo clean 在频繁切换主题或者写博客的时候最后先执行一下这个命令

    hexo g 将修改的东西生成到public静态文件里面,这步必须要有

    hexo s 可以生成本地预览

    hexo d 将修改过的东西提交到GitHub上

    由于之前我不小心把整个hexo给删除了,重新配置之后hexo d老是失败,就上网搜了一下发现执行下面这个就行了,这个命令就是将hexo的_config.yml的deploy的type改成git型,但是我里面已经是git的不明白这个是为啥,估计是之前缓存问题吧

    npm install hexo-deployer-git --save

    3.总结

    至此整个Hexo+GitHub基本就配置完成了,如果大家不想使用GitHub上的域名,可以自己在万网上买个域名,买完之后需要域名解析如下图

    之后需要在自己建的resitory上也设置一下,如下图,打开setting,找到下面的GitHub pages在Custom domain下面写上自己买的域名就ok了,后面就可以拿出去装个逼还能跑了。

    那么搭建了博客之后,我们就可以写自己的文章,和创建文章了,创建文章依然可以使用下面的指令

    hexo new "new article"

    执行完之后会出现一个.md的文件打开之后我们可以使用MarDown的编辑器进行编辑,编辑完成,就可以通过

    hexo g 和 hexo d来进行提交,大致就是这样了。

    可能有说的不对的地方还请大家指教,以后就要开始好好学习写东西了,又可以写完东西之后拿出来装个逼了,哈哈。

    相关文章

      网友评论

        本文标题:使用Hexo+GitHub搭建个人博客

        本文链接:https://www.haomeiwen.com/subject/akqtpttx.html