使用 github Pages 服务建立个人独立博客全过程

时间：2023-08-15 23:14:20

你是否有这样子的需求，只是想简单的写写文章，记录下自己的学习心得、成长经历等，都是些文字内容，不需要配置使用数据库、不想购买服务器自己搭建站点，只是想安安静静的用比较舒服的方式来写篇文章。 静态博客就是为此而生的，不用配置服务器、不用数据库、访问速度相当快、没有不安全漏洞的说法，最重要的，对于一个经常使用 markdown来写文章的人来说，她完美支持！

GithubPages ,the Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

上面简单的一句话，就说明了 GithubPages 的本质：托管在github上面的个人站点页面，使用markdown 来写文章，简单、易用，不用在乎太多的排版工作，而且免费。

说完了这两个概念，就可以说一说 ixirong.com 整个站点的建立过程了，总结为使用hexo搭建博客，托管在 githubpages（国外） 和 gitcafe（国内） 上，监控使用阿里云+360云监控（两个托管商服务还是很稳定的），统计流量采用老牌 CNZZ 数据专家，站长工具采用百度站长，也参考google站长。详细如下：

域名申请

域名我选择了国外的服务商 Godaddy，详情请参考 如何在Godaddy申请域名？，当然你也可以选择万网、新网、西部数码或者新生高傲的google域名注册服务。

域名备案

采用 github Pages 服务，是不需要备案的，当如果你想使用七牛的自定义域名、CDN服务、站长助手的一些高级功能使用，是需要有备案的，详情请参考我的另一篇单独博客个人godaddy域名备案解决方案。

域名解析

采用顶尖老牌服务 dnspod ，稳定、高效、实时生效，详细方法请参考Godaddy注册商域名修改DNS解析方法，如有任何疑问，可以查看帮助中心。

使用 github Pages 服务建立个人独立博客全过程

hexo 写博客

hexo是由Node.js驱动的一款快速、简单且功能强大的博客框架，它和jekyll相比，更快，更轻量，命令更简单（而且jekyll很多缺点）。网友已经写过这方面的好多文章了，当时我主要参考的如下，当然你也可以google搜索下使用方法

2015-05-19 更新，如果你嫌下面的文章太长了，有没有一篇完整的、详细的介绍，很高兴，@cnFeat就是这样子一个人，详情见文章：
如何搭建一个独立博客——简明Github Pages与Hexo教程

图床静态资源

云存储这东西，目前存在很多七牛云、又拍云、阿里云、腾讯云都可以用来做图片存储，ixirong.com 选择的是七牛，为什么？靠，免费啊~ 当然，七牛的精力一直在做这块，还是很不错的，注册七牛云，建立个空间，上传图片，点击图片链接就可以访问了，把这些图片链接放到你的博客中使用到的地方就ok了。默认的七牛域名比较长，已经备案的域名可以申请自定义，比如ixirong.com 的自定义为 static.ixirong.com域名，你可以看看下面这张图：
使用 github Pages 服务建立个人独立博客全过程

站点统计、监控、站长助手

使用百度站长工具来进行百度分享、百度统计、SEO优化等的调整，使用google站长工具主要是分析国外流量来源，使用cnzz数据专家进行全方位的统计分析工作。

网站的监控采用阿里云和360监控，基本上覆盖了全国地区的检测点，两者都有免费的报警短信（1000条/月），小站点足够使用了 如下图：
使用 github Pages 服务建立个人独立博客全过程

使用 github Pages 服务建立个人独立博客全过程

腾讯云CDN使用

前段时间DNSPod联合腾讯云赠送免费CDN服务，我整了一个，使用体验了下，CDN的设置还是挺简单的，具体见图片即可，全国电信、联通、移动的用户访问 http://www.ixirong.com 速度上面应该挺快的，可以尝试下。

使用 github Pages 服务建立个人独立博客全过程

hexo 静态博客上线文章打赏功能，支持支付宝、微信支付捐赠

发表于 2015-05-24   |   分类于 网站建设   |   8条评论

目前微信公众号(需要开发)、微博、简书（部分文章）都有了“赏”的功能，说白了，就是你的文章对阅读者有一定的帮助，阅读者愿意支付一定的费用来支持作者继续写作，写出好文章，这也代表着内容付费时代的慢慢到来，当然这对于作者来说也是一定的鼓励，同样也是要求，你必须写出靠谱的文章，让人感到值得付出金钱的文章，读者才会心甘情愿的给你打赏。
下面就说一说，hexo 框架下的文章如何来支持此功能，我使用的主题 NexT ，当然是xirong 定制过的版本，已经支持了此功能，如果你也是用 hexo ，并且感觉 next 主题还不错，你可以直接fork下来，直接使用即可。那么这个功能是怎么开发出来的呢，如果我是其他的博客，我该怎么样做才可以支持打赏的功能？
其实只需要在你文章的你想要出现赏功能的位置，添加如下代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<! -- 添加捐赠图标 -->
    <div class ="post-donate">
      <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="Donate 打赏"></a>
        <span class="donate_txt">
           &uarr;<br>
           Enjoy it ? Donate me !  欣赏此文？求鼓励，求支持！
           {% endif %}          
        </span>
        <br>
      </div>  

    <!-- 支付宝打赏图案 -->
      <div id="donate_guide" class="donate_bar center hidden">
          <a href="http://static.ixirong.com/pic/donate/alipay1.webp" title="支付宝打赏" class="fancybox" rel="article0"       style="float:left;margin-left:25%;margin-right:2px;">
          <img src="http://static.ixirong.com/pic/donate/alipay1.webp" title="支付宝打赏" height="164px" width="164px">
          </a> 
      </div>

    <!-- 微信打赏图案 -->
      <div id="donate_guide" class="donate_bar center hidden">
          <a href="http://static.ixirong.com/pic/donate/wechat.png" title="支付宝打赏" class="fancybox" rel="article0"  >
          <img src="http://static.ixirong.com/pic/donate/wechat.png" title="支付宝打赏" height="164px" width="164px">
          </a> 
      </div>

      <script type="text/javascript">
        document.getElementById('btn_donate').onclick = function(){
          $('#donate_board').addClass('hidden');
          $('#donate_guide').removeClass('hidden');
        }
      </script>
    </div>
<! -- 添加捐赠图标 -->

我把两个打赏的地方简化出来，你只需要将支付宝、微信的打赏图片替换成你自己的就ok了，这段代码，随便放到任何的博客文章中都是ok的，NeXT 的主题进行了单独的定制化，详情参考 github wiki 说明 增加博客打赏功能。

文章参考： http://icehe.me/2015/03/04/Donate%20%E6%89%93%E8%B5%8F/

原文http://www.ixirong.com/2015/05/17/how-to-build-ixirong-blog/

相关文章