hexo+github搭建免费个人博客

作者: suporka | 来源:发表于2017-10-13 18:05 被阅读59次

阅读本文应具备的知识：

了解 git 和 github
具备 markdown 语法基础知识

1.在 github 建立属于自己的 github.io

你要有一个 github 账号，并建立自己的 github.io 仓库，不懂可以查我这篇文章《在 github 上实现页面托管预览功能》
了解 markdown 语法，简单入门可以查看我这篇文章《如何入门简书》
下载和安装git,教程请自行百度
安装了 node.js 并了解npm相关基础知识；

2.配置 github 的 SSH key

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

注意：本文是用 git bash 输入所有命令，用 cmd 可能会出错

$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "邮件地址"

注意：这里的邮件地址指的是你注册 github 的邮箱
然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录即c:\Users\你的电脑用户名，找到.ssh文件夹下的id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：

这里写图片描述

将刚复制的内容粘贴到key那里，title随便填，保存。

ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

You've successfully authenticated, but GitHub does not provide shell access.

注意，这里一定要输入YES，否则连接不成功

此时你还需要配置：

$ git config --global user.name "liuxianan"// 你的github用户名
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

3.使用hexo写博客

$ npm install -g hexo

安装，然后进入你想存放的文件夹，右键 git bash ，输入

$ hexo init

hexo会自动下载一些文件到这个目录，包括node_modules，目录结构如下图：

这里写图片描述

$ hexo g # 生成
$ hexo s # 启动服务

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容

执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的：

这里写图片描述

第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章，默认的主题比较丑，打开时就是这个样子：

这里写图片描述

4.修改主题

既然默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。这是官方主题。

个人比较喜欢的2个主题：hexo-theme-jekyll 和 hexo-theme-yilia。

首先下载这个主题：

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载的主题存放于theme文件夹中

修改_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

5.上传到github

首先，ssh key肯定要配置好。

其次，配置_config.yml中有关deploy的部分：

deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git
  branch: master

安装插件

$ npm install hexo-deployer-git --save

提交，输入一下代码

$ hexo g
$ hexo d

注意：第一次上传之前检查一下根目录是否有.deploy_git文件夹，如果有将其删除，否则会出现将整个根目录的文件上传。我们要的只是public里面的文件

6.写博客

我写markdown用的是 sublime text 3 编辑器，当然你也可以用其他的。

$ hexo new '你的文章名字'

它会帮我们自动生成 markdown 文件，位于 source_posts 文件夹下，下面是生成的模板

---
title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---

以下是正文

小提示：生成的文章在主页中默认是全部显示的，你也可以在文章中的某处加入`` 使其高度缩小，可以点击阅读详情

7.增加分类

yilia主题默认的分类是主页和随笔，如果我想增加多几个分类，怎么实现呢？

在 theme/yilia 文件夹下找到_config.yml 文件，修改 menu

menu:
  主页: /
  随笔: /categories/随笔/
  前端: /categories/前端/
  后端: /categories/后端/

然后在scaffolds文件夹中修改post.md文件

---
title: {{ title }}
date: {{ date }}
tags:
---
categories:
随笔
前端
后端
---

注意：你的文章必须有该分类，点击分类名才有效果，如下面例子的categories

---
title: 简单入门小程序 01
date: 2017-09-27 20:23:13
tags: 小程序
categories: 前端
---
**文 | 小皮咖**

8.增加博客访问人数和访问量

在theme/yilia/layout/_partial 下的footer.ejs , 在代码最后加入

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

增加文章访问量

找到 article.ejs ，修改代码，增加如下代码。位置可以自选，但不能放于文首，这样会出现主页出现一片文章有访问量，其他文章不出现访问量的情况。

<div style="color:#666">
  <span id="busuanzi_container_page_pv">
    本文总阅读量<span id="busuanzi_value_page_pv"></span>次
  </span>
</div>

你也可以参考我存放的位置，代码如下：

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> <%if(index){%> article-index<%}%>" itemscope itemprop="blogPost">
  <div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        <% } %>
      </header>
    <% } %>
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% if (theme.excerpt_link) { %>
          <a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
        <% } %>
      <% } else { %>
        <%- post.content %>
      <% } %>

      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
        <div class="page-reward">
          <a href="javascript:;" class="page-reward-btn tooltip-top">
            <div class="tooltip tooltip-east">
            <span class="tooltip-item">
              赏
            </span>
            <span class="tooltip-content">
              <span class="tooltip-text">
                <span class="tooltip-inner">
                  <p class="reward-p"><i class="icon icon-quo-left"></i><%= theme.reward_wording%><i class="icon icon-quo-right"></i></p>
                  <div class="reward-box">
                    <% if(theme.alipay) {%>
                    <div class="reward-box-item">
                      <img class="reward-img" src="<%= theme.alipay%>">
                      <span class="reward-type">支付宝</span>
                    </div>
                    <% } %>
                    <% if(theme.weixin) {%>
                    <div class="reward-box-item">
                      <img class="reward-img" src="<%= theme.weixin%>">
                      <span class="reward-type">微信</span>
                    </div>
                    <% } %>
                  </div>
                </span>
              </span>
            </span>
          </div>
          </a>
        </div>
        <div style="color:#666">
          <span id="busuanzi_container_page_pv">
            本文总阅读量<span id="busuanzi_value_page_pv"></span>次
          </span>
        </div>
      <% } %>
    </div>
    <div class="article-info article-info-index">
      <%if(post.top){%>
        <div class="article-pop-out tagcloud">
          <i class="icon-tuding"></i>
          <a class="article-tag-list-link color3">置顶</a>
        </div>
      <% } %>

      <%- partial('post/tag') %>
      <%- partial('post/category') %>
      <% if (index && theme.show_all_link){ %>
        <p class="article-more-link">
          <a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
        </p>

      <% } %>

      <% if (!index && theme.share_jia){ %>
        <%- partial('post/share') %>
      <% } %>
      <div class="clearfix"></div>
    </div>

  </div>

</article>
<% if (!index){ %>
  <%- partial('post/nav') %>
<% } %>
<%- partial('_partial/aside') %>


<% if (!index && post.comments){ %>
  <% if (theme.duoshuo){ %>
  <%- partial('post/duoshuo', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>
  
  <% if (theme.wangyiyun){ %>
  <%- partial('post/wangyiyun', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.changyan_appid && theme.changyan_conf){ %>
  <%- partial('post/changyan', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.disqus || config.disqus_shortname){ %>
    <section id="comments">
      <div id="disqus_thread"></div>
        <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = '<%= theme.disqus || config.disqus_shortname %>'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </section>
  <% } %>

  <% if (theme.gitment_owner && theme.gitment_repo &&theme.gitment_oauth && theme.gitment_oauth.client_id && theme.gitment_oauth.client_secret){ %>
  <%- partial('post/gitment', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>
<% } %>

增加访问人数和访问量

找到 left-col.ejs，增加代码，位置自选

<div style="color:#666">
    <span id="busuanzi_container_site_pv">
      访问量 <span id="busuanzi_value_site_pv"></span>
    </span><br>
    <span id="busuanzi_container_site_uv">
      你是第<span id="busuanzi_value_site_uv"></span>个来到我博客的小伙伴,欢迎你！！٩(๑❛ᴗ❛๑)۶ 
    </span>
</div>

当然你可以修改上述代码，只要id不要修改即可，也可以参考我代码位置

<% var defaultBg = '#4d4d4d'; %>
<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="<%=theme.root%>" class="profilepic">
            <img src="<%=theme.avatar%>" class="js-avatar">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="<%=theme.root%>"><%=theme.author%></a></h1>
        </hgroup>
        <% if (theme.subtitle){ %>
        <p class="header-subtitle"><%=theme.subtitle%></p>
        <%}%>

        <nav class="header-menu">
            <ul>
            <% for (var i in theme.menu){ %>
                <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
            <%}%>
            </ul>
        </nav>
        <nav class="header-smart-menu">
            <% for (var i in theme.smart_menu){ %>
                <% if(theme.smart_menu[i]){ %>
                <a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
                <% } %>
            <%}%>
        </nav>
        
        <nav class="header-nav">
            <div class="social">
                <% for (var i in theme.subnav){ %>
                    <a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
                <%}%>
            </div>
            <div style="color:#666">
            <span id="busuanzi_container_site_pv">
              访问量 <span id="busuanzi_value_site_pv"></span>
            </span><br>
            <span id="busuanzi_container_site_uv">
              你是第<span id="busuanzi_value_site_uv"></span>个来到我博客的小伙伴,欢迎你！！٩(๑❛ᴗ❛๑)۶ 
            </span>
        </div>
        </nav>

    </header>       
</div>

以上就是 hexo 与 github pages 搭建个人博客的全部教程！希望对你有用~

了解更多 hexo 配置，请移步《hexo中文文档》

感谢小茗同学的《使用hexo+github搭建免费个人博客详细教程》，本文大部分内容基于他的分享

感谢 ‘不蒜子’的 js 脚本，实现了静态文件访问量

hexo+github搭建免费个人博客

1.在 github 建立属于自己的 github.io

2.配置 github 的 SSH key

注意：本文是用 git bash 输入所有命令，用 cmd 可能会出错

注意，这里一定要输入YES，否则连接不成功

3.使用hexo写博客

4.修改主题

5.上传到github

6.写博客

7.增加分类

注意：你的文章必须有该分类，点击分类名才有效果，如下面例子的categories

8.增加博客访问人数和访问量

增加文章访问量

增加访问人数和访问量

想了解我更多可以前往我的个人博客——小皮咖

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

Web前端之路

让前端飞

前端开发那些事

程序猿阵线联盟-汇总各类技术干货

Web 前端开发