Forever and ever

Begin Again

Posted on In
Symbols count in article: 2.2k Reading time ≈ 2 mins.

Meet you in March. ^O^

捣鼓将近一周，我的博客小站终于在今天正式营业啦，不知道前台的小可爱tay大家是否喜欢呢！话不多说，下面是我自己关于建站的一些share，上菜！

A Map

  1. 框架介绍
  2. 建站流程
  3. 简单优化
  4. 本地恢复

框架介绍

1.1 Github Pages

Github Pages是github提供给用户来展示个人或项目主页的静态网页系统。每个注册用户都可以使用自己的github项目创建，上传静态页面的HTML文件，github会帮你自动更新页面。

1.2 Hexo

Hexo是一个基于Node.js的静态博客框架，依赖少易于安装使用，可以方便地生成静态网页托管在Github上，并一键部署到GitHub Pages.
参考数据流图
参考数据流图

建站流程

OS: Windows 10

2.1 环境配置

  1. Github创建个人仓库
    (注意：这个仓库名比较特殊，取名格式为userName.github.io，用户名为github的用户名，这是固定写法。我觉得应该是github后台通过这种写法可以根据仓库属性匹配到这是一个pages项目）

  2. 安装Git
    何为Git?简单来说Git是开源的分布式版本控制系统。这里我们的网站在本地搭建好后，需要使用Git同步到Github上。最近我也在了解Git的细节，强烈推荐廖雪峰老师的Git教程。
    最后从Git官网下载安装包安装即可，具体过程可参考网上其他教程。

  3. 安装Node.js
    Hexo基于Node.js，Node.js下载地址：Download|Node.js

  4. 配置Git及生成ssh密钥文件

    • 配置信息

      1
      2
      $ git config --global user.name "Your Name"
      $ git config --global user.email "email@example.com"

    • 生成ssh密钥文件

      1
      $ ssh-keygen -t rsa -C "your GitHub register email"

      接下来就是将生成的公钥部署到GitHub，具体操作请动用你强大的搜索能力哈……！

2.2 安装Hexo
Hexo就是我们的个人博客网站的框架，这里需要自己在电脑里创建一个文件夹，可以命名为Blog，Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后，进入文件夹中，按住shift键，右击鼠标点击命令行(Git Bash)

具体请参考Hexo官方教程和大佬分享的地表最强建站教程Github+Hexo

2.3 站点文件配置
2.4 主题文件配置
我选择的是NexT主题哈 |NexT配置文档
2.5 个性化设置

  • 头像
  • 背景
  • 侧栏菜单
  • 标签云、分类
  • 网站favicon(适配PC端、客户端)favicon generator
  • 站点统计
  • 本地搜索
  • 站点footer个性化
  • live2d看板娘 快看右下角的小可爱tay

简单优化

由于GitHub的服务器在国外，后来发现，在国内访问自己的博客时，加载速度有时候很慢，特别是当deploy的博客文件有点大时，让我等到心态崩。。。

  • Gulp
    如果你打开生成的public文件夹里面的html、css、js源文件，你就会发现里面有大段的空白，这些空白占据着一定的空间。gulp是一个基于Node.js的自动化构建工具，我们可以通过一些gulp插件实现对html、css、js、image等静态资源的高效压缩，通过压缩这些静态资源，可以减少请求的数据量从而达到优化博客访问速度的目的。
  • 图床
    采用外部链接访问加载图片 而不是每次都将本地图片上传到仓库中 推荐七牛云
  • Gulp压缩js文件问题
    由于gulp-uglify不兼容es6 [ECMAScript 6.0（以下简称 es6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了,但目前的各大浏览器并不完全支持].
    我遇到的问题是在执行gulp task在压缩js文件时报错了。。。
    我尝试了两种方法：
    1. gulp+babel将es6转es5
      然鹅，我整来整去好几天，不知道哪错了，一直不成功，这。。。
    2. 利用gulp为解决兼容问题暂时推出的一款插件 gulp-uglify-es
      是直接支持es6而不是将es6转成es5 没想到吧 经过实践 make it okay 成功了！
      在这里非常感谢这位外国朋友的博文

本地恢复

当遇到某些情况如换电脑时，为了我们博客的可持续发展，当然要做好备份工作啦(主要是备份环境配置如依赖包啊等等)。本质上，Hexo是将本地的md文件编译成静态文件上传到github上的，建议是将本地的整个Hexo项目（blog）原件同步提交到github站点。当然，因为public文件在每次执行hexo操作时都会生成，所以也可以只需备份除public以外的文件就行了。这里有两种方法：

  • 可以新建一个仓库
  • 在原有GitHub仓库下新建一个分支（推荐）
    【遇到bug时一定要充分利用好身边的资源，开源多香啊(狗头)。搜索、解决问题的能力往往就是这样一点一点累积的，如StackOverflow等技术问答网站都是很给力的哦】

自己第一次动手搭博客，累并坚持着。虽然有些地方我写的不是很全（>>偷懒<<）,还是很开心能和大家分享这次经历的点滴，也非常感谢那些优秀博主的经验分享，给予了我很大的帮助。今天就先写到这里啦，up~

March 1st, let’s make more contens and share,to be continue…