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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z2066411585/article/details/78917985

准备工作:

  • 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 generatehexo g
    • 执行配置命令 : hexo deployhexo 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” # 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这条指令)

相关资源

网站优化

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

疑难杂症

  • 笔记本电脑HP431 hexo d 发布时报错 ,但是台式机没关系: 如
    enter description here
    • 最终在 Segmentfault 论坛上找到了答案 :
    • _config.yml文件中
      repository: https://github.com/wisezhao/wisezhao.github.io.git改为
      repository: git@github.com:wisezhao/wisezhao.github.io.git

没有更多推荐了,返回首页