Hexo+GitHub+阿里域名搭建自己博客

效果

  • 博客的地址:我的博客
    • PC端的效果
      PC端的效果
    • 手机端效果
      手机端效果一

手机端效果二

  • 最近抽空终于搭建完成,网上的资料很多,这篇文章只记录下遇到的问题,如果你想搭建一个博客!可能对你有些帮助。

Hexo+GitHub

域名

  • 域名我是在阿里云上买的 阿里云
  • 输入你想要买的域名地址,如图所示!选择一个您觉得合适的域名,加入到清单,然后购买就可以了
    域名
    • 这个是阿里云的代金券!阿里云代金券
    • 购买成功了,进入域名控制台
      控制台
    • 点击解析设置,然后添加记录,就会出现下面的窗口
      设置
    • 设置值,结果如下
      设置结果
  • 这个记录值是什么?如图所示,其实就是 :https://shimingli.github.io/ip值,当然你需要设置成你的
    image.png
    • 设置完成了,还有关键的一步,就是实名认证,认证通过了,域名才可以使用。

GitHub Pages的设置

  • 进入到 name.github.io的工程目录下,然后进入到Settings,最后定位到Github Pages的选项,输入你自己购买的域名,我这域名 7块一年,物超所值!
    settings

主题选择

  • 有哪些好看的Hexo主题
  • 个人看了几个,我还是比较喜欢这个 Yelee。感觉比较闷骚
  • clone到本地

    1
    git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee
  • 使用的步骤建议参考 官方的文档,非常的详细 Yelee 主题使用说明 [简中]
    目录结构

    • public:pullGithub
    • themes:博客的主题`
      • soure:就是文章存放的地方
  • 然后把cloneyelee放到themes目录下

image.png

  • 在博客的根目录下设置theme: Yelee
    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: Yelee

设置

Hexo 几个常用的命令

1
2
3
4
5
hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务,用于博客的预览
hexo deploy (hexo d) 部署博客到远端服务器
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
  • 简写:

    1
    2
    3
    4
    $ hexo n == hexo new
    $ hexo g == hexo generate
    $ hexo s == hexo server
    $ hexo d == hexo deploy
  • 如果一切配置ok的话,打开http://localhost:4000/ 就可以看到刚才搭建的本地博客了,Hexo会默认生成一个Hello World的博文。

遇到的问题

  • Hexo中的Yelee主题,首页不显示文章,需要把themes中的文件_config.ymlsearch中的on: true的注释去掉,同时必须注释掉onload,同时需要去安装插件!,然后就可以检索了。
    1
    2
    3
    4
    5
    6
    7
    8
    # Local Site Search | 本地站内搜索
    ## Insatall below plugin to take effect | 使用搜索需先安装对应插件
    ## https://github.com/PaicHyperionDev/hexo-generator-search
    search:
    on: true
    #onload: false (Hexo中的Yelee主题,首页不显示文章)
    ## true: get search.xml file when the page has loaded
    ## false: get the file when search box gets focus

再来一个好玩的,如何统计网页的访问量?如下图所示,请忽略我的可怜的访问量?

访问量

image.png

  • yelee 主题下的 _config.yml文件中,有个百度统计

    1
    2
    3
    4
    5

    # 百度统计
    # 百度统计 http://sitecenter.baidu.com/sc-web/
    # 查看代码,填入 //hm.baidu.com/hm.js? 之后的内容
    baidu_tongji:
  • 登录注册后填写网站,然后获取代码

百度统计.png

获取代码的详情

  • 这是我的获取代码的详情

    1
    2
    3
    4
    5
    6
    <script>
    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?1add6c64d9c467153aaed18d249d81c4";
    var s = document.getElementsByTagName("script")[0];
  • 把这一串东西 1add6c64d9c467153aaed18d249d81c4放到百度统计一栏,即可。
    百度统计

  • 然后 hexo g hexo s hexo d ,然后pushGitHub.他会自动的检测代码。


 上一篇
常用集合的原理分析 常用集合的原理分析
分析常用集合的底层的原理:ArrayList、Vector、LinckedList、HashMap、HashSet、LinkedHashMap、LruCache、SparseArray、ConcurrentHashMap一、ArrayLi
2018-08-22 Shiming_Li
下一篇 
Android 9 Pie 正式版总结 Android 9 Pie 正式版总结
先声明下,以下的整理的资料一部分来源于公众号谷歌开发者,一部分来源于谷歌安卓官方网站(不用翻墙,gogogo),还有小部分自己的理解。 微信公众号号谷歌开发者推送了 Android 9 Pie 现已面向全球正式发布!,就去更新 Andro
2018-08-14 Shiming_Li
  目录