NNNの博客

使用GitHub来搭建Hexo博客

最近总算是使用GitHub搭建了自己的博客,趁热乎赶紧来记录下搭建过程~


初步搭建过程


1. 你需要有一个Github的账号,如果没有可以注册,很简单的~


2. 进到Github新建一个项目,项目的名字是自己的用户名+.github.io,比如我建的项目仓库的名字就是’menggeNiu.github.io’,然后把这个项目仓库克隆到本地,这个操作除了通过终端来进行,还可以使用GitHub Desktop,我觉得后者更加方便。


3. 接下来就是打开克隆到本地的文件夹,我习惯再在里面建一个文件夹,如blog,进入建的文件夹,我们就可以开始安装hexo了。


4. 现在我们开始安装hexo。hexo是在node支持下运行的,如果没有node可以去官网下载。

安装hexo,命令如下,安装结束之后可以执行hexo -v来检查是否安装成功。

sudo npm install hero -g

5. hexo初始化,,命令如下,然后会在文件夹里自动生成文件

hexo init

6.config.yml文件配置:deploy字段下面添加

type: git 
repo: 域名仓库的https地址

6. 启动本地文件,命令如下,执行之后,终端里会有输出http://localhost:4000/,在浏览器输入网址,就可以看到在本地跑起来的自己的博客了,当然此时的主题是默认的主题。我感觉也还不错,哈哈~

hexo server

7.发布

7.1 首先安装git,输入如下命令
npm install hexo-deployer-git --save
7.2 再输入如下命令,就文成博客发布了,现在我们可以输入博客域名来看我们自己的博客了~
hexo clean && hexo g && hexo d

创建新的博客文章


1.进入项目所在文件夹,输入下面的命令,执行过后会在source/_posts文件夹里产生刚才创建的文件,后缀为md。

hexo new 此处为文章的名字


2.写md文件,可以使用Mou,我用下来感觉还是蛮好用的。


3.如果使用Mou写的话,将写完的内容直接复制粘贴到新创建的文件夹中,然后执行命令:

//转义命令
hexo g

4.如果想在本地看效果,再执行命令:

//服务器跑起来
hexo server

5.最后发布,发布命令:

//发布命令
hexo d

6.这样就发布了一篇你的新博客了~怎么样,是不是好开心~有了自己的博客,我是好开心的,哈哈哈~


更换主题


1.首先在github上找到你喜欢的主题。


2.进入到theme文件夹,执行命令:

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


3.执行上列命令之后,下载的主题包就会出现在theme文件夹中,这时,在根目录下的_config.yml文件中,将theme后面的字段替换为想要更换主题的字段,然后再hexo clean && hexo g && hexo d就可以换起新主题啦~当然,有关主题的设置,可以进入到对应主题文件夹根目录下的_config.yml文件中进行更改,其他样式什么的也可以更改,我暂时还没有改,如果想改的小伙伴可以去对应的css文件或者其他文件进行更改哦~


添加评论


1.评论系统可以使用duoshuo


2.http://duoshuo.com/进入多说官网,注册,按照步骤逐步完成域名绑定等。


3.绑定成功之后,你的博客的站点会出现在右上角,最左边的选项中,点进去。


4.点击设置,记住域名中的二级域名,即.duoshuo.com之前的字符串。


5.再回到我们的本地博客文件中,这个评论的设置由于主题的不同而不同,大致的思路就是,在_config.yml文件中如果没有duoshuo_shortname的填上这个字段,并把刚才记下的二级域名的名字写上,如果主题中有duoshuo字段的,直接在主题的_config.yml文件中添加刚才的字段,然后把主题/layout/下面的comments.ejs里面的代码替换为duoshuo的默认代码,代码如下:

<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
  <% } %>

6.完成之后,再执行如下命令,稍等片刻,我们就可以在自己的博客看到评论功能已经添加进去了~

`hexo clean && hexo g && hexo d`




以上就是我初步的搭建过程,还有很多不足,很多模块还没有添加进去,希望小伙伴们多多交流,一起完善哦~

亲们一定要在网好的情况下转义和发布!我就被坑了~~