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

2019-02-21 16:19:59 浏览数 (1)

准备工作:

  • 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
代码语言：javascript复制
 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
代码语言：javascript复制
 <script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码','') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>
  • 文章添加密码访问
代码语言：javascript复制
---
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

npm hexo github git node.js

0 人点赞