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

最新推荐文章于 2024-02-29 21:14:35 发布

程序手艺人

最新推荐文章于 2024-02-29 21:14:35 发布

阅读量3k

点赞数 4

分类专栏：【工作项目积累】文章标签： github

本文链接：https://blog.csdn.net/z2066411585/article/details/78917985

版权

【工作项目积累】专栏收录该内容

202 篇文章 31 订阅

订阅专栏

准备工作:

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” # 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 发布时报错 ,但是台式机没关系：如
- 最终在 Segmentfault 论坛上找到了答案：
- _config.yml文件中
  repository: https://github.com/wisezhao/wisezhao.github.io.git改为
  repository: git@github.com:wisezhao/wisezhao.github.io.git