程序员如何用GitHub打造个人博客(一)

准备工作:

• Hexo : 基于Node的一个静态博客框架，可以方便生成静态网页托管在github上
• node,js : 用来生成静态页面。 Node.js官网下载
• git :本地数据提交至github
• github : 博客的远程仓库，备份数据

安装:

• 安装Node.js
• 安装Hexo
  • 终端中输入 ： npm install -g hexo
  • 终端cd到一个选定的目录 执行 hexo init
  • 安装npm npm install
  • 开启hexo服务器 hexo s ， 浏览器中打开网址： http://localhost:4000
• 关联Github
  • 登录Github帐号，新建仓库名：.github.io固定写法
  • 终端cd到blog文件夹下，打开_config.yml文件,配置如下参数：
    • 配置所有的_config.yml文件时（包括theme中的），在所有的冒号:后边都要加一个空格，否则执行hexo命令会报错
  • 生成静态页面 :hexo generate 或 hexo g
  • 执行配置命令 : hexo deploy 或 hexo d
    • git 中执行hexo d 提示找不到命令，执行npm install hexo-deployer-git --save

 deploy:
 type: git
 repository:  https://github.com/xxx/xxx.github.io.git
 branch: master

• 发布文章
  • cd 至blog文件夹下， 新建文章hexo new "postName"
  • 文章完成后，生成静态页面 hexo g
  • 部署至Github : hexo d
  • 安装网页主题
  • Hexo官网主题页去搜寻自己喜欢的theme。以hexo-theme-next为例，执行如下命令： git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 将blog目录下_config.yml里theme的名称landscape修改为next
  • 每次部署文章的步骤:
    • 清除缓存文件 (db.json) 和已生成的静态文件 (public) : hexo clean
    • 生成缓存和静态页面 : hexo g
    • 重新部署至服务器 :hexo d
  • 更改theme内容，比如名称，描述，头像
    • blog/_config.yml
    • blog/themes/next/_config.yml
    • Next官网 配置说明

Linux安装

• 安装npm新版, 旧版本导致安装hexo失败
• nvm 是npm的包安装管理器,先安装nvm,然后通过nvm install stable 安装最新版
• 安装nvm完成之后,需要添加如下内容到~/.bashrc,然后source ~/.bashrc export NVM_DIR=”/home/zhaomm/.nvm” [ -s “NVM_DIR/nvm.sh" ] && . "NVM_DIR/nvm.sh" ] && . "NVM_DIR/nvm.sh" ] && . "NVM_DIR/nvm.sh” # This loads nvm
• 博客的内容和npm安装包内容保证在一个目录,否则发布内容之后网页会提示404

更新功能：

阅读统计量

• 配置LeanCloud
• 修改Next主题_config.yml 中的 busuanzi_count: enable :true

多说评论

Github自动备份博客源文件

• 配置文件blog/scripts下的GitUpdate.js

Hexo添加文章时自动打开编辑器

• 配置文件blog/scripts下的OpenMarkdown.js

文章在首页显示部分文字

增加主菜单

• 菜单图标示例
• 主题配置_config.yml 中#Menu Settings 添加 菜单，如：event: /event/event.html
• 菜单图标：menu_icons:

文章简单加密访问

• 修改 themes->next->layout->_partials->head.swig

 <script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码','') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

• 文章添加密码访问

---
title: Hexo文章简单加密访问
date: 2016-12-01 10:45:29
tags: hexo
categories: 博客
keywords:
    - Hexo
    - 加密
password: password
---

备份说明

• 博客数据备份于github上的blog
  • node_modules ( 用npm install 会重新生成)
  • public ( 用hexo g 会重新生成)
  • .deploy_git （用hexo d 会重新生成）
• 定期更新Next主题， 目录中Next为一个git仓库
• 当重装电脑之后，或者想在其他电脑上修改博客，如下
  • 克隆默认仓库至本地 git clone git@github.com:wisezhao/blog.git
  • 进入目录，Git bash 依次执行 :
    • npm install hexo
    • npm install
    • npm install hexo-deployer-git （记得，不需要hexo init这条指令）

相关资源

• Hexo博客搭建
• Next主题
• 图片保存:七牛云 -> 对象存储　-> photo
  • 图片大小：640*480　

网站优化

• 由于Ubuntu 下的小书匠无法输入中文,暂时切换到win7中使用,由于ubuntu 和win7 中需要同步：
  • 保存文件绑定github ,token, 自动保存到github中
  • 修改blog下的GitUpdate.js防止冲突出错

疑难杂症

• 笔记本电脑HP431 hexo d 发布时报错 ,但是台式机没关系： 如

• 最终在 Segmentfault 论坛上找到了答案 ：
• _config.yml文件中 repository: https://github.com/wisezhao/wisezhao.github.io.git改为 repository: git@github.com:wisezhao/wisezhao.github.io.git